@lodev09/react-native-true-sheet 3.2.2 → 3.3.0-beta.1

package/src/TrueSheet.types.ts

@@ -40,6 +40,52 @@ export type WillFocusEvent = NativeSyntheticEvent<null>;
 export type WillBlurEvent = NativeSyntheticEvent<null>;
 export type BackPressEvent = NativeSyntheticEvent<null>;
 
+/**
+ * Ref methods exposed by a TrueSheet instance.
+ */
+export interface TrueSheetRef {
+  /**
+   * Present the sheet at a given detent index.
+   * @param index - The detent index to present at (default: 0)
+   * @param animated - Whether to animate the presentation (default: true)
+   */
+  present: (index?: number, animated?: boolean) => Promise<void>;
+  /**
+   * Dismiss the sheet.
+   * @param animated - Whether to animate the dismissal (default: true)
+   */
+  dismiss: (animated?: boolean) => Promise<void>;
+  /**
+   * Resize the sheet to a given detent index.
+   * @param index - The detent index to resize to
+   */
+  resize: (index: number) => Promise<void>;
+}
+
+/**
+ * Methods for controlling TrueSheet instances by name.
+ * Returned by the `useTrueSheet` hook.
+ */
+export interface TrueSheetContextMethods {
+  /**
+   * Present a sheet by name.
+   * @param name - The name of the sheet to present
+   * @param index - The detent index to present at (default: 0)
+   */
+  present: (name: string, index?: number) => Promise<void>;
+  /**
+   * Dismiss a sheet by name.
+   * @param name - The name of the sheet to dismiss
+   */
+  dismiss: (name: string) => Promise<void>;
+  /**
+   * Resize a sheet by name.
+   * @param name - The name of the sheet to resize
+   * @param index - The detent index to resize to
+   */
+  resize: (name: string, index: number) => Promise<void>;
+}
+
 /**
  * Options for customizing the grabber (drag handle) appearance.
  */
@@ -97,6 +143,25 @@ export interface BlurOptions {
   interaction?: boolean;
 }
 
+/**
+ * Defines the stack behavior when a modal is presented on web.
+ *
+ * @platform web
+ */
+export type StackBehavior =
+  /**
+   * Mount the modal on top of the current one.
+   */
+  | 'push'
+  /**
+   * Minimize the current modal then mount the new one.
+   */
+  | 'switch'
+  /**
+   * Dismiss the current modal then mount the new one.
+   */
+  | 'replace';
+
 /**
  * Inset adjustment behavior for the sheet content.
  */
@@ -355,6 +420,17 @@ export interface TrueSheetProps extends ViewProps {
    */
   keyboardMode?: 'resize' | 'pan';
 
+  /**
+   * Defines the stack behavior when a modal is presented.
+   * - `push`: Mount the modal on top of the current one.
+   * - `switch`: Minimize the current modal then mount the new one.
+   * - `replace`: Dismiss the current modal then mount the new one.
+   *
+   * @platform web
+   * @default 'switch'
+   */
+  stackBehavior?: StackBehavior;
+
   /**
    * Called when the sheet's content is mounted and ready.
    * The sheet automatically waits for this event before presenting.

package/src/TrueSheet.web.tsx

@@ -0,0 +1,423 @@
+import {
+  createElement,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
+
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetFooter,
+  type BottomSheetFooterProps,
+  BottomSheetHandle,
+  type BottomSheetHandleProps,
+  BottomSheetModal,
+  BottomSheetView,
+  type SNAP_POINT_TYPE,
+} from '@gorhom/bottom-sheet';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+
+import { BottomSheetContext } from './TrueSheetProvider.web';
+import type {
+  TrueSheetProps,
+  TrueSheetRef,
+  DetentChangeEvent,
+  DidBlurEvent,
+  DidDismissEvent,
+  DidFocusEvent,
+  DidPresentEvent,
+  MountEvent,
+  PositionChangeEvent,
+  WillBlurEvent,
+  WillDismissEvent,
+  WillFocusEvent,
+  WillPresentEvent,
+  DragBeginEvent,
+  DragChangeEvent,
+  DragEndEvent,
+} from './TrueSheet.types';
+
+const DEFAULT_CORNER_RADIUS = 16;
+
+const DEFAULT_GRABBER_COLOR = 'rgba(0, 0, 0, 0.3)';
+const DEFAULT_GRABBER_WIDTH = 32;
+const DEFAULT_GRABBER_HEIGHT = 4;
+
+const renderSlot = (slot: TrueSheetProps['header'] | TrueSheetProps['footer']) => {
+  if (!slot) return null;
+  if (isValidElement(slot)) return slot;
+  return createElement(slot);
+};
+
+export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) => {
+  const {
+    name,
+    detents = [0.5, 1],
+    dismissible = true,
+    draggable = true,
+    dimmed = true,
+    dimmedDetentIndex = 0,
+    children,
+    scrollable = false,
+    initialDetentIndex = -1,
+    backgroundColor = '#ffffff',
+    cornerRadius = DEFAULT_CORNER_RADIUS,
+    grabber = true,
+    grabberOptions,
+    maxHeight,
+    header,
+    footer,
+    onMount,
+    onWillPresent,
+    onDidPresent,
+    onWillDismiss,
+    onDidDismiss,
+    onDetentChange,
+    onPositionChange,
+    onDragBegin,
+    onDragChange,
+    onDragEnd,
+    onWillFocus,
+    onDidFocus,
+    onWillBlur,
+    onDidBlur,
+    stackBehavior = 'switch',
+    style,
+  } = props;
+
+  const { height: windowHeight } = useWindowDimensions();
+  const defaultName = useId();
+  const sheetName = name ?? defaultName;
+  const bottomSheetContext = useContext(BottomSheetContext);
+  const modalRef = useRef<BottomSheetModal>(null);
+  const initialDetentIndexRef = useRef(initialDetentIndex);
+  const currentIndexRef = useRef(0);
+  const isPresenting = useRef(false);
+  const isDismissing = useRef(false);
+  const isMinimized = useRef(false);
+  const isDragging = useRef(false);
+
+  const presentResolver = useRef<(() => void) | null>(null);
+  const dismissResolver = useRef<(() => void) | null>(null);
+
+  const animatedPosition = useSharedValue(windowHeight);
+  const animatedIndex = useSharedValue(0);
+
+  const [snapIndex, setSnapIndex] = useState(initialDetentIndex);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useDerivedValue(() => {
+    onPositionChange?.({
+      nativeEvent: {
+        position: animatedPosition.value,
+        index: animatedIndex.value,
+        detent: detents[animatedIndex.value] ?? 0,
+        realtime: true,
+      },
+    } as PositionChangeEvent);
+  });
+
+  const hasAutoDetent = detents.includes('auto');
+
+  const containerHeight = maxHeight ?? windowHeight;
+  const snapPoints = useMemo(
+    () =>
+      detents
+        .filter((detent): detent is number => detent !== 'auto' && typeof detent === 'number')
+        .map((detent) => Math.min(1, Math.max(0.1, detent)) * containerHeight),
+    [detents, containerHeight]
+  );
+
+  const handleChange = useCallback(
+    (index: number, _position: number, _type: SNAP_POINT_TYPE) => {
+      const previousIndex = currentIndexRef.current;
+      currentIndexRef.current = index;
+
+      // Handle drag end
+      if (isDragging.current && !isPresenting.current) {
+        isDragging.current = false;
+        onDragEnd?.({
+          nativeEvent: {
+            index,
+            position: animatedPosition.value,
+            detent: detents[index] ?? 0,
+          },
+        } as DragEndEvent);
+      }
+
+      if (!isPresenting.current && !isMinimized.current && previousIndex !== index && index >= 0) {
+        onDetentChange?.({
+          nativeEvent: {
+            index,
+            position: animatedPosition.value,
+            detent: detents[index] ?? 0,
+          },
+        } as DetentChangeEvent);
+      }
+
+      if (isPresenting.current) {
+        isPresenting.current = false;
+
+        // Resolve present promise
+        if (presentResolver.current) {
+          presentResolver.current();
+          presentResolver.current = null;
+        }
+
+        onDidPresent?.({
+          nativeEvent: {
+            index,
+            position: animatedPosition.value,
+            detent: detents[index] ?? 0,
+          },
+        } as DidPresentEvent);
+
+        onDidFocus?.({ nativeEvent: null } as DidFocusEvent);
+      }
+
+      // Fire onDidBlur when sheet reaches minimized state (index -1 but still mounted)
+      if (isMinimized.current && index === -1) {
+        onDidBlur?.({ nativeEvent: null } as DidBlurEvent);
+      }
+
+      // Fire onDidFocus when sheet is restored from minimized state
+      if (isMinimized.current && index >= 0) {
+        isMinimized.current = false;
+        onDidFocus?.({ nativeEvent: null } as DidFocusEvent);
+      }
+    },
+    [detents, animatedPosition]
+  );
+
+  const handleDismiss = useCallback(() => {
+    // Resolve dismiss promise
+    if (dismissResolver.current) {
+      dismissResolver.current();
+      dismissResolver.current = null;
+    }
+
+    onDidDismiss?.({ nativeEvent: null } as DidDismissEvent);
+
+    // Reset states since sheet is being dismissed
+    isMinimized.current = false;
+    isDismissing.current = false;
+    isDragging.current = false;
+  }, []);
+
+  const handleAnimate = useCallback(
+    (_fromIndex: number, toIndex: number) => {
+      // Detect drag begin (when not presenting or dismissing)
+      if (!isPresenting.current && !isDismissing.current && !isDragging.current && toIndex >= 0) {
+        isDragging.current = true;
+        onDragBegin?.({
+          nativeEvent: {
+            index: currentIndexRef.current,
+            position: animatedPosition.value,
+            detent: detents[currentIndexRef.current] ?? 0,
+          },
+        } as DragBeginEvent);
+      }
+
+      // Drag change during animation
+      if (isDragging.current && toIndex >= 0) {
+        onDragChange?.({
+          nativeEvent: {
+            index: toIndex,
+            position: animatedPosition.value,
+            detent: detents[toIndex] ?? 0,
+          },
+        } as DragChangeEvent);
+      }
+
+      if (isPresenting.current) {
+        onWillPresent?.({
+          nativeEvent: {
+            index: toIndex,
+            position: animatedPosition.value,
+            detent: detents[toIndex] ?? 0,
+          },
+        } as WillPresentEvent);
+
+        // Focus events fire together with present events
+        onWillFocus?.({ nativeEvent: null } as WillFocusEvent);
+      }
+
+      // Detect if sheet is being restored (will focus)
+      if (isMinimized.current && toIndex >= 0) {
+        onWillFocus?.({ nativeEvent: null } as WillFocusEvent);
+      }
+
+      if (toIndex === -1 && !isPresenting.current) {
+        // Will be handled as blur if the sheet doesn't actually dismiss
+        isMinimized.current = true;
+        onWillBlur?.({ nativeEvent: null } as WillBlurEvent);
+
+        if (isDismissing.current) {
+          onWillDismiss?.({ nativeEvent: null } as WillDismissEvent);
+        }
+      }
+    },
+    [detents, animatedPosition]
+  );
+
+  const backdropComponent = useCallback(
+    (backdropProps: BottomSheetBackdropProps) => {
+      if (!dimmed) {
+        return null;
+      }
+      return (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          opacity={0.5}
+          appearsOnIndex={dimmedDetentIndex}
+          disappearsOnIndex={dimmedDetentIndex - 1}
+          pressBehavior={dismissible ? 'close' : 'none'}
+        />
+      );
+    },
+    [dimmed, dimmedDetentIndex, dismissible]
+  );
+
+  const handleComponent = useCallback(
+    (handleProps: BottomSheetHandleProps) => {
+      if (!grabber) {
+        return null;
+      }
+
+      const height = grabberOptions?.height ?? DEFAULT_GRABBER_HEIGHT;
+      const borderRadius = grabberOptions?.cornerRadius ?? height / 2;
+
+      return (
+        <BottomSheetHandle
+          {...handleProps}
+          style={[styles.handle, { paddingTop: grabberOptions?.topMargin }]}
+          indicatorStyle={{
+            height,
+            borderRadius,
+            width: grabberOptions?.width ?? DEFAULT_GRABBER_WIDTH,
+            backgroundColor: grabberOptions?.color ?? DEFAULT_GRABBER_COLOR,
+          }}
+        />
+      );
+    },
+    [grabber, grabberOptions]
+  );
+
+  const footerComponent = useMemo(
+    () =>
+      footer
+        ? (footerProps: BottomSheetFooterProps) => (
+            <BottomSheetFooter {...footerProps}>{renderSlot(footer)}</BottomSheetFooter>
+          )
+        : undefined,
+    [footer]
+  );
+
+  // For scrollable, we render the child directly
+  const ContainerComponent = scrollable ? Fragment : BottomSheetView;
+
+  const sheetMethodsRef = useRef<TrueSheetRef>({
+    present: (index = 0) => {
+      return new Promise<void>((resolve) => {
+        presentResolver.current = resolve;
+        setSnapIndex(index);
+        isPresenting.current = true;
+        modalRef.current?.present();
+      });
+    },
+    dismiss: () => {
+      return new Promise<void>((resolve) => {
+        dismissResolver.current = resolve;
+        isDismissing.current = true;
+        modalRef.current?.dismiss();
+      });
+    },
+    resize: async (index: number) => {
+      modalRef.current?.snapToIndex(index);
+    },
+  });
+
+  useImperativeHandle(ref, () => sheetMethodsRef.current);
+
+  // Register with context provider
+  useEffect(() => {
+    bottomSheetContext?.register(sheetName, sheetMethodsRef);
+    return () => {
+      bottomSheetContext?.unregister(sheetName);
+    };
+  }, [sheetName]);
+
+  // Auto-present on mount if initialDetentIndex is set
+  useEffect(() => {
+    if (initialDetentIndexRef.current >= 0) {
+      sheetMethodsRef.current.present(initialDetentIndexRef.current);
+    }
+  }, []);
+
+  // Handle mount event after first render
+  useEffect(() => {
+    if (!isMounted) {
+      setIsMounted(true);
+      onMount?.({ nativeEvent: null } as MountEvent);
+    }
+  }, [isMounted, onMount]);
+
+  return (
+    <BottomSheetModal
+      ref={modalRef}
+      name={sheetName}
+      style={[
+        styles.root,
+        { backgroundColor, borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius },
+      ]}
+      index={snapIndex}
+      animateOnMount
+      enablePanDownToClose={dismissible}
+      enableContentPanningGesture={draggable}
+      enableHandlePanningGesture={draggable}
+      animatedPosition={animatedPosition}
+      animatedIndex={animatedIndex}
+      handleComponent={handleComponent}
+      onChange={handleChange}
+      onAnimate={handleAnimate}
+      enableDynamicSizing={hasAutoDetent}
+      maxDynamicContentSize={maxHeight}
+      snapPoints={snapPoints.length > 0 ? snapPoints : undefined}
+      onDismiss={handleDismiss}
+      stackBehavior={stackBehavior}
+      backdropComponent={backdropComponent}
+      backgroundComponent={null}
+      footerComponent={footerComponent}
+    >
+      <ContainerComponent>
+        {renderSlot(header)}
+        <View style={style}>{children}</View>
+      </ContainerComponent>
+    </BottomSheetModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    overflow: 'hidden',
+  },
+  handle: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 999,
+    paddingVertical: 10,
+    pointerEvents: 'none',
+  },
+});

package/src/TrueSheetProvider.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+
+import { TrueSheet } from './TrueSheet';
+import type { TrueSheetContextMethods } from './TrueSheet.types';
+
+export interface TrueSheetProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for TrueSheet on native platforms.
+ * This is a pass-through component - no context is needed on native
+ * since TrueSheet uses static instance methods internally.
+ */
+export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
+  return children;
+}
+
+/**
+ * Hook to control TrueSheet instances by name.
+ * On native, this maps directly to TrueSheet static methods.
+ */
+export function useTrueSheet(): TrueSheetContextMethods {
+  return {
+    present: TrueSheet.present,
+    dismiss: TrueSheet.dismiss,
+    resize: TrueSheet.resize,
+  };
+}

package/src/TrueSheetProvider.web.tsx

@@ -0,0 +1,81 @@
+import { createContext, useContext, useRef, type ReactNode, type RefObject } from 'react';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import type { TrueSheetContextMethods, TrueSheetRef } from './TrueSheet.types';
+
+interface BottomSheetContextValue extends TrueSheetContextMethods {
+  register: (name: string, methods: RefObject<TrueSheetRef>) => void;
+  unregister: (name: string) => void;
+}
+
+export const BottomSheetContext = createContext<BottomSheetContextValue | null>(null);
+
+export interface TrueSheetProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for TrueSheet on web.
+ * Required to wrap your app for sheet management via useTrueSheet hook.
+ */
+export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
+  const sheetsRef = useRef<Map<string, RefObject<TrueSheetRef>>>(new Map());
+
+  const register = (name: string, methods: RefObject<TrueSheetRef>) => {
+    sheetsRef.current.set(name, methods);
+  };
+
+  const unregister = (name: string) => {
+    sheetsRef.current.delete(name);
+  };
+
+  const present = async (name: string, index: number = 0) => {
+    const sheet = sheetsRef.current.get(name);
+    if (!sheet?.current) {
+      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
+      return;
+    }
+    return sheet.current.present(index);
+  };
+
+  const dismiss = async (name: string) => {
+    const sheet = sheetsRef.current.get(name);
+    if (!sheet?.current) {
+      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
+      return;
+    }
+    return sheet.current.dismiss();
+  };
+
+  const resize = async (name: string, index: number) => {
+    const sheet = sheetsRef.current.get(name);
+    if (!sheet?.current) {
+      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
+      return;
+    }
+    return sheet.current.resize(index);
+  };
+
+  return (
+    <BottomSheetContext.Provider value={{ register, unregister, present, dismiss, resize }}>
+      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+    </BottomSheetContext.Provider>
+  );
+}
+
+/**
+ * Hook to control TrueSheet instances by name.
+ * On web, this uses the TrueSheetContext from TrueSheetProvider.
+ */
+export function useTrueSheet(): TrueSheetContextMethods {
+  const context = useContext(BottomSheetContext);
+
+  if (!context) {
+    throw new Error('useTrueSheet must be used within a TrueSheetProvider');
+  }
+
+  return {
+    present: context.present,
+    dismiss: context.dismiss,
+    resize: context.resize,
+  };
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
+export * from './TrueSheetProvider';

package/src/navigation/types.ts

@@ -142,6 +142,8 @@ export type TrueSheetNavigationOptions = Pick<
   | 'pageSizing'
   | 'header'
   | 'footer'
+  | 'insetAdjustment'
+  | 'stackBehavior'
 > & {
   /**
    * The detent index to present at.