@niibase/bottom-sheet-manager 1.2.0 → 1.4.0

package/src/provider.tsx

@@ -1,7 +1,3 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { StatusBar } from "react-native";
-import React from "react";
 import Animated, {
   interpolate,
   interpolateColor,
@@ -13,8 +9,18 @@ import Animated, {
   withSpring,
   withTiming,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { StatusBar } from "react-native";
+import React from "react";
 
-import { BottomSheetInstance, SheetPayload, Sheets } from "./types";
+import {
+  BottomSheetInstance,
+  SheetPayload,
+  SheetProviderProps,
+  Sheets,
+  StackBehavior,
+} from "./types";
 import { eventManager } from "./events";
 
 export const providerRegistryStack: string[] = [];
@@ -46,7 +52,7 @@ export function registerSheet<SheetId extends keyof Sheets = never>(
       ? (sheetsRegistry[context] = {})
       : sheetsRegistry[context];
     registry[id as string] = Sheet;
-    eventManager.publish(`${context}-on-register`);
+    eventManager.publishAsync(`${context}-on-register`);
   }
 }
 
@@ -55,36 +61,28 @@ export function registerSheet<SheetId extends keyof Sheets = never>(
  * `global`. However if you want to render a Sheet within another sheet or if you want to render
  * Sheets in a modal. You can use a separate Provider with a custom context value.
  *
- * For example
+ * > **Note:** Context names must be unique across all `SheetProvider` instances.
+ *
+ * @example
  * ```ts
  * // Define your SheetProvider in the component/modal where
  * // you want to show some Sheets.
  * <SheetProvider context="local-context" />
  *
- * // Then register your sheet when for example the
- * // Modal component renders.
- *
- * registerSheet('local-sheet', LocalSheet,'local-context');
- *
+ * // Then register your sheet at module level (outside JSX):
+ * registerSheet('local-sheet', LocalSheet, 'local-context');
  * ```
  */
 export function SheetProvider({
-  iosModalSheetTypeOfAnimation = false,
   context = "global",
-  duration = 300,
+  statusBar,
+  scaleConfig,
   children,
-}: React.PropsWithChildren<{
-  context?: string;
-  duration?: number;
-  iosModalSheetTypeOfAnimation?: boolean;
-}>) {
+}: SheetProviderProps) {
   const { top } = useSafeAreaInsets();
   const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
   const sheetIds = Object.keys(sheetsRegistry[context] || sheetsRegistry["global"] || {});
 
-  // Rerender when a new sheet is added.
-  const onRegister = React.useCallback(forceUpdate, [forceUpdate]);
-
   // IOS modal sheet type of animation
   const isFullScreen = useSharedValue(-1);
   const colorStyle = useAnimatedStyle(() => ({
@@ -95,28 +93,52 @@ export function SheetProvider({
       ["transparent", "#000"],
     ),
   }));
-  const animatedStyle = useAnimatedStyle(
-    () => ({
+  const animatedStyle = useAnimatedStyle(() => {
+    const radius = interpolate(
+      isFullScreen.value,
+      [0, 0.3],
+      [0, scaleConfig?.borderRadius ?? 24],
+      "clamp",
+    );
+    const scale = interpolate(
+      isFullScreen.value,
+      [0.5, 0.8],
+      [1, scaleConfig?.scale ?? 0.92],
+      "clamp",
+    );
+    const translateY = interpolate(
+      isFullScreen.value,
+      [0.5, 0.7],
+      [0, top + (scaleConfig?.translateY ?? 5)],
+      "clamp",
+    );
+
+    return {
       flex: 1,
       overflow: "hidden",
-      borderRadius: interpolate(isFullScreen.value, [0, 0.8, 1], [0, 20, 24], "clamp"),
+      borderRadius:
+        scaleConfig?.animation?.type === "spring"
+          ? withSpring(radius, scaleConfig.animation.config)
+          : withTiming(radius, scaleConfig?.animation?.config ?? { duration: 200 }),
       transform: [
         {
-          scaleX: withTiming(
-            interpolate(isFullScreen.value, [0, 0.98, 1], [1, 1, 0.92], "clamp"),
-            { duration },
-          ),
+          scaleX:
+            scaleConfig?.animation?.type === "spring"
+              ? withSpring(scale, scaleConfig.animation.config)
+              : withTiming(scale, scaleConfig?.animation?.config ?? { duration: 200 }),
         },
         {
-          translateY: withSpring(
-            interpolate(isFullScreen.value, [0, 0.99, 1], [0, top, top + 5], "clamp"),
-            { duration, dampingRatio: 1.5 },
-          ),
+          translateY:
+            scaleConfig?.animation?.type === "spring"
+              ? withSpring(translateY, scaleConfig.animation.config)
+              : withTiming(
+                  translateY,
+                  scaleConfig?.animation?.config ?? { duration: 200 },
+                ),
         },
       ],
-    }),
-    [duration],
-  );
+    };
+  }, [top, scaleConfig]);
 
   // Since background color is white, we need to set status bar to light
   const setStatusBar = StatusBar.setBarStyle;
@@ -124,8 +146,11 @@ export function SheetProvider({
     () => isFullScreen.value,
     (currentValue) => {
       "worklet";
-      if (currentValue > -1) {
-        runOnJS(setStatusBar)(currentValue >= 0.5 ? "light-content" : "default");
+      if (currentValue >= 0) {
+        runOnJS(setStatusBar)(
+          currentValue >= 0.5 ? "light-content" : (statusBar ?? "default"),
+          true,
+        );
       }
     },
     [],
@@ -135,40 +160,55 @@ export function SheetProvider({
     providerRegistryStack.indexOf(context) > -1
       ? providerRegistryStack.indexOf(context)
       : providerRegistryStack.push(context) - 1;
-    const unsub = eventManager.subscribe(`${context}-on-register`, onRegister);
+    const unsub = eventManager.subscribe(`${context}-on-register`, forceUpdate);
     return () => {
       providerRegistryStack.splice(providerRegistryStack.indexOf(context), 1);
       unsub?.unsubscribe();
     };
-  }, [context, onRegister]);
+  }, [context, forceUpdate]);
 
   return (
-    <SheetAnimationContext.Provider
-      value={{ isFullScreen, iosModalSheetTypeOfAnimation }}
-    >
+    <SheetSharedContext.Provider value={{ isFullScreen, topInset: top }}>
       <Animated.View style={colorStyle}>
         <Animated.View style={animatedStyle}>{children}</Animated.View>
       </Animated.View>
       <BottomSheetModalProvider>
         {sheetIds.map((id) => (
-          <RenderSheet key={id} id={id} context={context} duration={duration} />
+          <RenderSheet key={id} id={id} context={context} />
         ))}
       </BottomSheetModalProvider>
-    </SheetAnimationContext.Provider>
+    </SheetSharedContext.Provider>
   );
 }
+
 const ProviderContext = React.createContext("global");
 const SheetIDContext = React.createContext<string | undefined>(undefined);
-const SheetAnimationContext = React.createContext<{
-  iosModalSheetTypeOfAnimation: boolean;
+const SheetSharedContext = React.createContext<{
   isFullScreen: SharedValue<number>;
-}>({ isFullScreen: { value: 0 } as any, iosModalSheetTypeOfAnimation: false });
+  topInset: number;
+}>({
+  isFullScreen: { value: 0 } as SharedValue<number>,
+  topInset: 0,
+});
 
 export const SheetRefContext = React.createContext<
   React.RefObject<BottomSheetInstance | null>
->({} as any);
+>({} as React.RefObject<BottomSheetInstance | null>);
 
-const SheetPayloadContext = React.createContext<any>(undefined);
+const SheetPayloadContext = React.createContext<unknown>(undefined);
+
+// Stack behavior context for managing sheet transitions
+interface StackBehaviorContextValue {
+  behavior: StackBehavior;
+  isTransitioning: boolean;
+  previousSheetId: string | null;
+}
+
+const StackBehaviorContext = React.createContext<StackBehaviorContextValue>({
+  behavior: "switch",
+  isTransitioning: false,
+  previousSheetId: null,
+});
 
 /**
  * Get id of the current context.
@@ -181,9 +221,14 @@ export const useSheetIDContext = () => React.useContext(SheetIDContext);
 /**
  * Get the current sheet animation context.
  */
-export const useSheetAnimationContext = () => React.useContext(SheetAnimationContext);
+export const useSheetSharedContext = () => React.useContext(SheetSharedContext);
+/**
+ * Get stack behavior context for the current sheet.
+ */
+export const useStackBehaviorContext = () => React.useContext(StackBehaviorContext);
 /**
  * Get the current Sheet's internal ref.
+ * Note: `current` may be null before the sheet is fully mounted.
  */
 export const useSheetRef = <
   SheetId extends keyof Sheets = never,
@@ -205,25 +250,26 @@ export function useSheetPayload<SheetId extends keyof Sheets = never>() {
 export function useOnSheet<SheetId extends keyof Sheets = never>(
   id: SheetId | (string & {}),
   type: "show" | "hide" | "onclose",
-  listener: (payload: SheetPayload<SheetId>, context: string, ...args: any[]) => void,
+  listener: (payload: SheetPayload<SheetId>, context: string, ...args: unknown[]) => void,
 ) {
   React.useEffect(() => {
     const subscription = eventManager.subscribe(`${type}_${id}`, listener);
     return () => subscription.unsubscribe();
-  }, [id, listener]);
+  }, [id, listener, type]);
 }
 
-const RenderSheet = ({
-  id,
-  context,
-  duration,
-}: {
+interface RenderSheetProps {
   id: string;
   context: string;
-  duration: number;
-}) => {
-  const [payload, setPayload] = React.useState();
+}
+
+const RenderSheet = ({ id, context }: RenderSheetProps) => {
+  const [payload, setPayload] = React.useState<unknown>();
   const [visible, setVisible] = React.useState(false);
+  const [stackBehavior, setStackBehavior] = React.useState<StackBehavior>("switch");
+  const [isPending, startTransition] = React.useTransition();
+  const [previousSheetId, setPreviousSheetId] = React.useState<string | null>(null);
+
   const ref = React.useRef<BottomSheetInstance | null>(null);
   const Sheet = context.startsWith("$$-auto-")
     ? sheetsRegistry?.global?.[id]
@@ -232,29 +278,46 @@ const RenderSheet = ({
       : undefined;
 
   const onShow = React.useCallback(
-    (data: any, ctx = "global", reopened?: boolean) => {
+    (data: unknown, ctx = "global", reopened?: boolean, behavior?: StackBehavior) => {
       if (ctx !== context) return;
-      if (!reopened) setPayload(data);
-      setVisible(true);
+
+      if (behavior) {
+        setStackBehavior(behavior);
+      }
+
+      if (!reopened) {
+        setPayload(data);
+      }
+
+      // Smooth transition handling using React's useTransition
+      startTransition(() => {
+        setVisible(true);
+      });
     },
     [context],
   );
 
   const onClose = React.useCallback(
-    (_data: any, ctx = "global", reopened?: boolean) => {
+    (_data: unknown, ctx = "global", reopened?: boolean, nextSheetId?: string) => {
       if (context !== ctx) return;
+
+      if (nextSheetId) {
+        setPreviousSheetId(nextSheetId);
+      }
+
       if (!reopened) {
         setPayload(undefined);
-        setTimeout(() => setVisible(false), Math.max(duration ?? 300, 300));
+        setVisible(false);
       } else {
         setVisible(false);
+        setPreviousSheetId(null);
       }
     },
     [context],
   );
 
   const onHide = React.useCallback(
-    (data: any, ctx = "global") => {
+    (data: unknown, ctx = "global") => {
       eventManager.publish(`hide_${id}`, data, ctx);
     },
     [id],
@@ -267,7 +330,7 @@ const RenderSheet = ({
   }, [context, id, payload, visible]);
 
   React.useEffect(() => {
-    let subs = [
+    const subs = [
       eventManager.subscribe(`show_wrap_${id}`, onShow),
       eventManager.subscribe(`onclose_${id}`, onClose),
       eventManager.subscribe(`hide_wrap_${id}`, onHide),
@@ -279,15 +342,25 @@ const RenderSheet = ({
 
   if (!Sheet) return null;
 
-  return visible ? (
+  const stackContextValue: StackBehaviorContextValue = {
+    behavior: stackBehavior,
+    isTransitioning: isPending,
+    previousSheetId,
+  };
+
+  if (!visible) return null;
+
+  return (
     <ProviderContext.Provider value={context}>
       <SheetIDContext.Provider value={id}>
         <SheetRefContext.Provider value={ref}>
           <SheetPayloadContext.Provider value={payload}>
-            <Sheet id={id} payload={payload} context={context} />
+            <StackBehaviorContext.Provider value={stackContextValue}>
+              <Sheet id={id} payload={payload} context={context} />
+            </StackBehaviorContext.Provider>
           </SheetPayloadContext.Provider>
         </SheetRefContext.Provider>
       </SheetIDContext.Provider>
     </ProviderContext.Provider>
-  ) : null;
+  );
 };

package/src/router/index.tsx

@@ -1,14 +1,15 @@
 import {
   createNavigatorFactory,
-  NavigatorTypeBagBase,
-  ParamListBase,
-  StaticConfig,
-  TypedNavigator,
+  EventArg,
+  StackActions,
   useNavigationBuilder,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type StaticConfig,
+  type TypedNavigator,
 } from "@react-navigation/native";
-import React from "react";
+import * as React from "react";
 
-import { BottomSheetRouter, BottomSheetRouterOptions } from "./router";
 import type {
   BottomSheetActionHelpers,
   BottomSheetNavigationEventMap,
@@ -17,13 +18,23 @@ import type {
   BottomSheetNavigationState,
   BottomSheetNavigatorProps,
 } from "./types";
+import { BottomSheetRouter, type BottomSheetRouterOptions } from "./router";
 import { BottomSheetView } from "./view";
 
-function BottomSheetNavigator({
+/**
+ * Unified Navigator that renders the first screen as the base content
+ * and all subsequent screens as bottom sheet overlays.
+ *
+ * Uses BottomSheetRouter (extending StackRouter) to manage navigation state,
+ * with react-native-screens ScreenStack for the base screen rendering
+ * and BottomSheetView for the sheet overlays.
+ */
+function Navigator({
   id,
   children,
   screenListeners,
   screenOptions,
+  initialRouteName,
   ...rest
 }: BottomSheetNavigatorProps) {
   const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
@@ -37,8 +48,30 @@ function BottomSheetNavigator({
     children,
     screenListeners,
     screenOptions,
+    initialRouteName,
   });
 
+  // Handle tab press → popToTop behavior
+  React.useEffect(() => {
+    // @ts-expect-error: there may not be a tab navigator in parent
+    return navigation?.addListener?.("tabPress", (e: any) => {
+      const isFocused = navigation.isFocused();
+
+      requestAnimationFrame(() => {
+        if (
+          state.index > 0 &&
+          isFocused &&
+          !(e as EventArg<"tabPress", true>).defaultPrevented
+        ) {
+          navigation.dispatch({
+            ...StackActions.popToTop(),
+            target: state.key,
+          });
+        }
+      });
+    });
+  }, [navigation, state.index, state.key]);
+
   return (
     <NavigationContent>
       <BottomSheetView
@@ -52,18 +85,38 @@ function BottomSheetNavigator({
 }
 
 /**
- * To use BottomSheetNavigator with expo-router, the first screen should be your app content
- * and add a border radius of 24px to the root view if want to snap to 100%.
+ * Creates a bottom sheet navigator that renders the first screen as the
+ * main content and all subsequent screens as bottom sheet modals.
+ *
+ * @example
+ * ```tsx
+ * // With React Navigation
+ * const { Navigator, Screen } = createBottomSheetNavigator();
+ *
+ * function App() {
+ *   return (
+ *     <Navigator>
+ *       <Screen name="Home" component={HomeScreen} />
+ *       <Screen
+ *         name="Details"
+ *         component={DetailsSheet}
+ *         options={{ snapPoints: ['50%', '100%'] }}
+ *       />
+ *     </Navigator>
+ *   );
+ * }
+ * ```
  *
  * @example
  * ```tsx
+ * // With Expo Router
+ * import { Slot, withLayoutContext } from "expo-router";
  * import {
  *   createBottomSheetNavigator,
  *   BottomSheetNavigationOptions,
  *   BottomSheetNavigationEventMap,
  *   BottomSheetNavigationState,
- * } from "@repo/bottom-sheet";
- * import { Slot, withLayoutContext } from "expo-router";
+ * } from "@niibase/bottom-sheet-manager";
  *
  * const { Navigator } = createBottomSheetNavigator();
  *
@@ -79,36 +132,30 @@ function BottomSheetNavigator({
  * };
  *
  * export default function Layout() {
+ *   // SSR guard - navigator doesn't work on server
  *   if (typeof window === "undefined") return <Slot />;
+ *
  *   return (
- *     <BottomSheet
- *       screenOptions={
- *         {
- *           // API Reference: `@repo/design/bottom-sheet/types.ts`
- *           // And: https://gorhom.github.io/react-native-bottom-sheet/modal/props/
- *         }
- *       }
- *.    />
+ *     <BottomSheet>
+ *       <BottomSheet.Screen name="index" />
+ *       <BottomSheet.Screen
+ *         name="details"
+ *         options={{ snapPoints: ["50%"] }}
+ *       />
+ *     </BottomSheet>
  *   );
  * }
  * ```
  */
 export function createBottomSheetNavigator<
   const ParamList extends ParamListBase,
-  const NavigatorID extends string | undefined = undefined,
-  // We'll define a type bag specialized for bottom sheets:
+  const NavigatorID extends string | undefined = string | undefined,
   const TypeBag extends NavigatorTypeBagBase = {
-    // The param list from the user
     ParamList: ParamList;
-    // Optional ID for this navigator
     NavigatorID: NavigatorID;
-    // The state shape
     State: BottomSheetNavigationState<ParamList>;
-    // The screen options
     ScreenOptions: BottomSheetNavigationOptions;
-    // The event map
     EventMap: BottomSheetNavigationEventMap;
-    // The type of the "navigation" object used by each screen in the navigator
     NavigationList: {
       [RouteName in keyof ParamList]: BottomSheetNavigationProp<
         ParamList,
@@ -116,15 +163,12 @@ export function createBottomSheetNavigator<
         NavigatorID
       >;
     };
-    // The navigator component
-    Navigator: typeof BottomSheetNavigator;
+    Navigator: typeof Navigator;
   },
-  // The static config allows for "static" route config
   const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
 >(config?: Config): TypedNavigator<TypeBag, Config> {
-  // We call `createNavigatorFactory` with our un-typed navigator
-  // but pass in the config to get the typed container
-  return createNavigatorFactory(BottomSheetNavigator)(config);
+  return createNavigatorFactory(Navigator)(config);
 }
 
 export * from "./types";
+export { BottomSheetActions, useBottomSheetNavigation } from "./router";