@niibase/bottom-sheet-manager 1.2.0 → 1.4.0

package/src/sheet.tsx

@@ -19,29 +19,28 @@ import {
   type NativeEventSubscription,
 } from "react-native";
 import {
-  Easing,
   interpolate,
   useAnimatedReaction,
   useSharedValue,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTheme } from "@react-navigation/native";
 import React from "react";
 
 import {
   useProviderContext,
-  useSheetAnimationContext,
   useSheetIDContext,
   useSheetRef,
+  useSheetSharedContext,
+  useStackBehaviorContext,
 } from "./provider";
-import { BottomSheetInstance, BottomSheetProps, SheetIds } from "./types";
+import { BottomSheetInstance, BottomSheetProps, SheetIds, StackBehavior } from "./types";
 import { PrivateManager } from "./manager";
 import { eventManager } from "./events";
 
 interface BottomSheetFC
   extends React.MemoExoticComponent<React.ForwardRefExoticComponent<BottomSheetProps>> {
   <Id extends SheetIds>(
-    props: BottomSheetProps & React.RefAttributes<BottomSheetInstance<Id>>,
+    props: BottomSheetProps<Id> & React.RefAttributes<BottomSheetInstance<Id>>,
   ): React.JSX.Element;
 
   // Components
@@ -57,6 +56,9 @@ interface BottomSheetFC
   TextInput: typeof BottomSheetTextInput;
 }
 
+const FULL_SCREEN_POINTS: (string | number)[] =
+  Platform.OS === "ios" ? ["%90", "90%"] : ["%93", "93%"];
+
 const useSheetManager = ({
   id,
   onHide,
@@ -64,79 +66,105 @@ const useSheetManager = ({
   onContextUpdate,
 }: {
   id?: string;
-  onHide: (data?: any, dismiss?: boolean) => void;
-  onBeforeShow?: (data?: any) => void;
+  onHide: (data?: unknown, dismiss?: boolean, behavior?: StackBehavior) => void;
+  onBeforeShow?: (data?: unknown, behavior?: StackBehavior) => void;
   onContextUpdate: () => void;
 }) => {
-  const [visible, setVisible] = React.useState(false);
   const currentContext = useProviderContext();
+  const hasShownRef = React.useRef(false);
 
   React.useEffect(() => {
     if (!id) return undefined;
 
     const subscriptions = [
-      eventManager.subscribe(`show_${id}`, (data: any, context?: string) => {
-        if (currentContext !== context || visible) return;
-        onContextUpdate?.();
-        onBeforeShow?.(data);
-        setVisible(true);
-      }),
-      eventManager.subscribe(`hide_${id}`, (data: any, context, dismiss?: boolean) => {
-        if (currentContext !== context) return;
-        onHide?.(data, dismiss);
-      }),
+      eventManager.subscribe(
+        `show_${id}`,
+        (data: unknown, context?: string, behavior?: StackBehavior) => {
+          if (currentContext !== context) return;
+          if (!hasShownRef.current) {
+            hasShownRef.current = true;
+            onContextUpdate?.();
+            onBeforeShow?.(data, behavior);
+          }
+        },
+      ),
+      eventManager.subscribe(
+        `hide_${id}`,
+        (data: unknown, context: string, dismiss?: boolean, behavior?: StackBehavior) => {
+          if (currentContext !== context) return;
+          hasShownRef.current = false;
+          onHide?.(data, dismiss, behavior);
+        },
+      ),
     ];
+
     return () => {
+      hasShownRef.current = false;
       subscriptions.forEach((s) => s?.unsubscribe?.());
     };
   }, [id, onHide, onBeforeShow, onContextUpdate, currentContext]);
-
-  return { visible, setVisible };
 };
 
 const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetProps>(
   (
     {
       children,
-      snapPoints,
       onClose,
       onBeforeShow,
       stackBehavior = "switch",
       hardwareBackPressToClose = true,
       enableDynamicSizing = false,
       handleIndicatorStyle,
-      iosModalSheetTypeOfAnimation: pageAnimation,
+      iosModalSheetTypeOfAnimation,
+      snapPoints: defaultSnapPoints,
+      animatedIndex: defaultAnimatedIndex,
       backgroundStyle,
+      onAnimate,
       handleStyle,
-      clickThrough,
-      fullScreen,
+      style,
+      passThrough,
       opacity,
-
       ...props
     },
     ref,
   ) => {
     const currentSheetRef = useSheetRef();
     const currentCtx = useProviderContext();
+    const stackContext = useStackBehaviorContext();
 
-    const { isFullScreen, iosModalSheetTypeOfAnimation } = useSheetAnimationContext();
     const animatedIndex = useSharedValue(0);
 
-    const { colors } = useTheme();
-    const { top } = useSafeAreaInsets();
-    const themeBackgroundStyle = React.useMemo(
-      () => ({ backgroundColor: colors.card }),
-      [colors.card],
-    );
-    const themeHandleIndicatorStyle = React.useMemo(
-      () => ({
-        backgroundColor: colors.border,
-        height: 5,
-        width: 50,
-      }),
-      [colors.border],
+    const [currentStackBehavior, setCurrentStackBehavior] =
+      React.useState<StackBehavior>(stackBehavior);
+    const isPushed = currentStackBehavior === "push";
+
+    const { bottom, left, right } = useSafeAreaInsets();
+
+    const defaultStyle = React.useMemo(
+      () => ({ paddingBottom: bottom, paddingLeft: left, paddingRight: right }),
+      [bottom, left, right],
     );
 
+    const { isFullScreen } = useSheetSharedContext();
+    const [snapPoints, fullScreenIndex] = React.useMemo(() => {
+      let resolved = defaultSnapPoints;
+
+      if (
+        Platform.OS === "android" &&
+        iosModalSheetTypeOfAnimation &&
+        Array.isArray(resolved)
+      ) {
+        resolved = resolved.map((p) => (p === "90%" || p === "%90" ? "93%" : p));
+      }
+
+      const fullScreenIndex =
+        resolved instanceof Array
+          ? resolved.findIndex((p) => FULL_SCREEN_POINTS.includes(p))
+          : resolved?.value?.findIndex((p) => FULL_SCREEN_POINTS.includes(p)) || -1;
+
+      return [resolved, fullScreenIndex] as const;
+    }, [defaultSnapPoints, iosModalSheetTypeOfAnimation]);
+
     const valueRef = React.useRef<unknown>(null);
     const bottomSheetRef = React.useRef<BottomSheetModal>(null);
     const hardwareBackPressEvent = React.useRef<NativeEventSubscription>(
@@ -145,11 +173,28 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
 
     const id = useSheetIDContext();
     const sheetId = props.id || id;
+
+    const hideSheetRef = React.useRef<
+      (
+        data?: unknown,
+        fromManager?: boolean,
+        dismiss?: boolean,
+        incomingBehavior?: StackBehavior,
+      ) => void
+    >(null!);
+
     useSheetManager({
       id: sheetId,
-      onHide: (data, dismiss) => hideSheet(data, true, dismiss),
-      onBeforeShow: (data) => {
-        onBeforeShow?.(data);
+      onHide: (data, dismiss, behavior) => {
+        // Update state for future renders, but also pass behavior directly
+        // so hideSheet doesn't read a stale closure value (React state update
+        // is async — hideSheet runs before the re-render).
+        if (behavior) setCurrentStackBehavior(behavior);
+        hideSheetRef.current(data, true, dismiss, behavior);
+      },
+      onBeforeShow: (data, behavior) => {
+        if (behavior) setCurrentStackBehavior(behavior);
+        onBeforeShow?.(data as never);
         valueRef.current = undefined;
         currentSheetRef.current = getInstance();
       },
@@ -164,70 +209,107 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
     });
 
     useAnimatedReaction(
-      () => {
-        if (!!iosModalSheetTypeOfAnimation || !!pageAnimation) {
-          isFullScreen.value = 0;
-        }
-        return animatedIndex.value;
-      },
+      () => animatedIndex.value,
       (index) => {
         "worklet";
-        const points: (string | number)[] = ["%100", "100%"];
-        const checkFullScreen = fullScreen
-          ? -1
-          : snapPoints instanceof Array
-            ? snapPoints.findIndex((p) => points.includes(p))
-            : snapPoints?.value?.findIndex((p) => points.includes(p)) || -1;
-
-        if (
-          -1 !== checkFullScreen &&
-          (!!iosModalSheetTypeOfAnimation || !!pageAnimation)
-        ) {
-          isFullScreen.value = interpolate(
-            index,
-            [checkFullScreen - 1, checkFullScreen],
-            [0, 1],
+        if (defaultAnimatedIndex) {
+          defaultAnimatedIndex.set(index);
+        }
+
+        if (iosModalSheetTypeOfAnimation) {
+          isFullScreen.set(
+            interpolate(
+              index,
+              [fullScreenIndex - 1, fullScreenIndex, fullScreenIndex + 1],
+              [0, 1, 0],
+            ),
           );
         }
       },
-      [snapPoints],
+      [iosModalSheetTypeOfAnimation],
     );
 
     const hideSheet = React.useCallback(
-      (data?: any, isSheetManagerOrRef?: boolean, dismiss?: boolean) => {
+      (
+        data?: unknown,
+        fromManager?: boolean,
+        dismiss?: boolean,
+        incomingBehavior?: StackBehavior,
+      ) => {
+        // Use the freshly-delivered behavior from the event when available.
+        // currentStackBehavior comes from React state which may not have flushed
+        // yet when this callback fires synchronously from the manager.
+        const activeBehavior = incomingBehavior ?? currentStackBehavior;
+
         let value = data ?? valueRef.current;
 
-        if (!dismiss || stackBehavior !== "push") {
-          hardwareBackPressEvent.current?.remove();
+        hardwareBackPressEvent.current?.remove();
+
+        const closeValue = onClose?.(value as never);
+        if (closeValue !== undefined) value = closeValue;
+
+        if (dismiss && activeBehavior === "push") {
+          // For push behavior, a "dismiss" event means another sheet wants to
+          // appear on top — do not close this sheet.
+          if (fromManager) valueRef.current = data;
+          return;
+        }
+
+        if (activeBehavior !== "replace" || !dismiss) {
           bottomSheetRef.current?.close();
-          const closeValue = onClose?.(value);
-          if (undefined !== closeValue) value = closeValue;
         }
 
         if (sheetId) {
-          PrivateManager.remove(sheetId, currentCtx);
-          if (dismiss && stackBehavior === "push") return;
+          const hasHistory = PrivateManager.history.length > 0;
+          const shouldRestorePrevious = activeBehavior !== "replace";
 
-          const history = PrivateManager.history.length >= 1;
           eventManager.publish(
             `onclose_${sheetId}`,
             value,
             currentCtx,
-            history || dismiss,
+            hasHistory || !!dismiss,
+            activeBehavior,
           );
 
-          if (stackBehavior === "replace") return;
-          if (dismiss) {
-            PrivateManager.history.push({ id: sheetId, context: currentCtx });
-          } else if (history) {
-            const { id, context } = PrivateManager.history.pop()!;
-            eventManager.publish(`show_wrap_${id}`, undefined, context, true);
+          if (shouldRestorePrevious) {
+            if (dismiss) {
+              // it will surface naturally when the push sheet is closed.
+              if (activeBehavior !== "push") {
+                PrivateManager.history.push({
+                  id: sheetId,
+                  context: currentCtx,
+                  behavior: activeBehavior,
+                });
+              }
+            } else if (hasHistory) {
+              const otherSheetsStillOpen = PrivateManager.stack().some(
+                (s) => !(s.id === sheetId && s.context === currentCtx),
+              );
+              if (!otherSheetsStillOpen) {
+                const prev = PrivateManager.history.pop()!;
+                eventManager.publish(
+                  `show_wrap_${prev.id}`,
+                  undefined,
+                  prev.context,
+                  true,
+                  prev.behavior,
+                );
+              }
+            }
           }
+
+          PrivateManager.remove(sheetId, currentCtx);
         }
-        if (isSheetManagerOrRef) valueRef.current = data;
+
+        if (fromManager) valueRef.current = data;
       },
-      [sheetId, currentCtx, onClose],
+      [sheetId, currentCtx, onClose, currentStackBehavior],
     );
+
+    React.useEffect(() => {
+      hideSheetRef.current = hideSheet;
+    }, [hideSheet]);
+
     const getInstance = React.useCallback(
       (): BottomSheetInstance => ({
         close(options = {}): void {
@@ -252,9 +334,7 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
 
     React.useEffect(() => {
       if (sheetId) {
-        PrivateManager.registerRef(sheetId, currentCtx, {
-          current: getInstance(),
-        } as React.RefObject<BottomSheetInstance>);
+        PrivateManager.registerRef(sheetId, currentCtx, { current: getInstance() });
       }
       currentSheetRef.current = getInstance();
     }, [currentCtx, getInstance, sheetId, currentSheetRef]);
@@ -264,7 +344,9 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
         hardwareBackPressEvent.current = BackHandler.addEventListener(
           "hardwareBackPress",
           () => {
-            bottomSheetRef.current?.close();
+            // Go through hideSheet so internal state (PrivateManager, events,
+            // history) is updated correctly — not just the visual sheet.
+            hideSheetRef.current(undefined, true, false);
             return true;
           },
         );
@@ -275,44 +357,43 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
 
     React.useImperativeHandle(ref, getInstance, [getInstance]);
 
+    const zIndex = React.useMemo(
+      () => (isPushed && sheetId ? PrivateManager.zIndex(sheetId, currentCtx) : 0),
+      [sheetId, isPushed, currentCtx],
+    );
+
+    const backdropOpacity = React.useMemo(() => {
+      if (isPushed && stackContext.previousSheetId) {
+        return (opacity || 0.45) * 0.6;
+      }
+      return opacity || 0.45;
+    }, [isPushed, stackContext.previousSheetId, opacity]);
+
     return (
-      <View
-        pointerEvents="box-none"
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            zIndex:
-              sheetId && stackBehavior === "push"
-                ? PrivateManager.zIndex(sheetId, currentCtx)
-                : 0,
-          },
-        ]}
-      >
+      <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex }]}>
         <RNBottomSheet
           enableDynamicSizing={enableDynamicSizing}
-          animationConfigs={{ duration: 400, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }}
-          backdropComponent={(props) => (
+          backdropComponent={(backdropProps) => (
             <BottomSheetBackdrop
-              enableTouchThrough={!!clickThrough}
-              opacity={opacity || 0.45}
+              enableTouchThrough={!!passThrough}
+              opacity={backdropOpacity}
               disappearsOnIndex={-1}
               appearsOnIndex={0}
-              {...props}
+              {...backdropProps}
             />
           )}
+          topInset={0}
+          bottomInset={0}
           {...props}
           ref={bottomSheetRef}
           onClose={hideSheet}
+          onAnimate={onAnimate}
           animatedIndex={animatedIndex}
-          topInset={
-            fullScreen
-              ? 0
-              : top + (iosModalSheetTypeOfAnimation || pageAnimation ? 20 : 5)
-          }
-          snapPoints={enableDynamicSizing ? undefined : (snapPoints ?? ["66%"])}
-          handleIndicatorStyle={[themeHandleIndicatorStyle, handleIndicatorStyle]}
-          backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
-          handleStyle={[themeBackgroundStyle, handleStyle]}
+          style={[defaultStyle, style]}
+          snapPoints={enableDynamicSizing ? undefined : snapPoints}
+          handleIndicatorStyle={handleIndicatorStyle}
+          backgroundStyle={backgroundStyle}
+          handleStyle={handleStyle}
         >
           {children}
         </RNBottomSheet>
@@ -335,17 +416,4 @@ BottomSheet.FooterContainer = BottomSheetFooterContainer;
 BottomSheet.Backdrop = BottomSheetBackdrop;
 BottomSheet.TextInput = BottomSheetTextInput;
 
-try {
-  const { cssInterop } = require("nativewind");
-  cssInterop(BottomSheet, {
-    handleIndicatorClassName: "handleIndicatorStyle",
-    backgroundClassName: "backgroundStyle",
-    containerClassName: "containerStyle",
-    handleClassName: "handleStyle",
-    className: "style",
-  });
-} catch (e) {
-  // Ignore error
-}
-
 export default BottomSheet;

package/src/types.ts

@@ -1,5 +1,6 @@
 import type { BottomSheetProps as RNBottomSheetProps } from "@gorhom/bottom-sheet";
 import type { WithSpringConfig, WithTimingConfig } from "react-native-reanimated";
+import { StatusBarStyle } from "react-native";
 import React from "react";
 
 export interface Sheets {}
@@ -21,6 +22,37 @@ export interface SheetDefinition<Payload = never, ReturnValue = never> {
     returnValue: ReturnValue;
 }
 
+/**
+ * Defines how sheets behave when a new sheet is opened.
+ *
+ * - `switch`: Closes current sheet and shows new one. Previous sheet is
+ *   restored when new one closes.
+ *
+ * - `replace`: Closes current sheet and opens new one. Previous sheet is
+ *   removed from stack (not restored on close).
+ *
+ * - `push`: Stacks new sheet on top. Previous sheet remains visible underneath.
+ */
+export type StackBehavior = "switch" | "replace" | "push";
+
+export type SheetProviderProps = React.PropsWithChildren<{
+    context?: string;
+    /** @default default */
+    statusBar?: StatusBarStyle;
+    scaleConfig?: {
+        /** Scale factor when sheet is open (default: 0.92) */
+        scale?: number;
+        /** Vertical translation when sheet is open (default: 5) */
+        translateY?: number;
+        /** Border radius when sheet is open (default: 24) */
+        borderRadius?: number;
+        /** Animation config - timing or spring (default: timing with 300ms duration) */
+        animation?:
+            | { type: "timing"; config?: WithTimingConfig }
+            | { type: "spring"; config?: WithSpringConfig };
+    };
+}>;
+
 export interface BottomSheetInstance<Id extends SheetIds = SheetIds> {
     /**
      * Close the bottom sheet.
@@ -81,14 +113,14 @@ export interface BottomSheetInstance<Id extends SheetIds = SheetIds> {
     ) => void;
 }
 
-export type BottomSheetProps = Omit<
+export type BottomSheetProps<Id extends SheetIds = SheetIds> = Omit<
     RNBottomSheetProps,
-    "children" | "onClose" | "animatedIndex" | "topInset"
+    "children" | "onClose"
 > & {
     /**
      * ID of the `BottomSheet`.
      */
-    id?: SheetID<SheetIds>;
+    id?: SheetID<Id>;
 
     /**
      * Content of the `BottomSheet`.
@@ -102,25 +134,25 @@ export type BottomSheetProps = Omit<
     hardwareBackPressToClose?: boolean;
 
     /**
-     * Callback when the sheet close.
+     * Callback when the sheet closes. Return a value to override the close data
+     * forwarded to `SheetManager.show()` callers.
      *
-     * @type () => any;
-     * @returns The data returned by the sheet to be returned when closed.
+     * @returns Optionally return a new value to pass back to the caller.
      */
-    onClose?: (data?: any) => any;
+    onClose?: (data?: SheetReturnValue<Id>) => SheetReturnValue<Id> | void;
 
     /**
      * Event called before sheets is visible.
      * @param data Payload of the sheet if any.
      * @type () => void;
      */
-    onBeforeShow?: (data?: any) => void;
+    onBeforeShow?: (data?: SheetPayload<Id>) => void;
 
     /**
      * Can click through the sheet to the underlying view.
      * @default false
      */
-    clickThrough?: boolean;
+    passThrough?: boolean;
 
     /**
      * Opacity of the sheet's overlay.
@@ -129,26 +161,21 @@ export type BottomSheetProps = Omit<
     opacity?: number;
 
     /**
-     * Defines the stack behavior when modal mounts. (experimental)
+     * Defines the stack behavior when sheets are opened.
+     *
+     * - `switch`: (default) Dismisses the current sheet before showing the new one.
+     * - `replace`: Swaps the current sheet's content with smooth crossfade animation.
+     * - `push`: Pushes new sheet on top, creating a navigable stack.
+     *
      * @default "switch"
      */
-    stackBehavior?: "push" | "replace" | "switch";
-
-    /**
-     * Whether the bottom sheet edge to edge.
-     * @default false
-     */
-    fullScreen?: boolean;
+    stackBehavior?: StackBehavior;
 
     /**
-     * Whether the bottom sheet is an iOS modal sheet type of animation.
+     * Whether the bottom sheet is an iOS 18 modal sheet type of animation.
+     * When enabled at snap point 90%, the content behind the sheet scales down and gets a
+     * border radius, similar to iOS 18 system sheets.
      * @default false
      */
     iosModalSheetTypeOfAnimation?: boolean;
-
-    className?: string;
-    handleIndicatorClassName?: string;
-    backgroundClassName?: string;
-    containerClassName?: string;
-    handleClassName?: string;
 };