react-native-bottom-sheet-stack 1.0.2 → 1.0.3

package/src/BottomSheetManaged.tsx

@@ -1,12 +1,11 @@
 import BottomSheetOriginal, {
-  BottomSheetBackdrop,
   useBottomSheetSpringConfigs,
-  type BottomSheetBackdropProps,
   type BottomSheetProps,
 } from '@gorhom/bottom-sheet';
 import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 
+import { getAnimatedIndex } from './animatedRegistry';
 import { createSheetEventHandlers } from './bottomSheetCoordinator';
 import { useBottomSheetState } from './useBottomSheetState';
 
@@ -14,6 +13,9 @@ export interface BottomSheetRef extends BottomSheetMethods {}
 
 interface BottomSheetManagedProps extends BottomSheetProps {}
 
+// Null backdrop - we render our own backdrop separately in BottomSheetHost
+const nullBackdrop = () => null;
+
 export const BottomSheetManaged = React.forwardRef<
   BottomSheetRef,
   BottomSheetManagedProps
@@ -24,35 +26,36 @@ export const BottomSheetManaged = React.forwardRef<
       onAnimate,
       onClose,
       enablePanDownToClose = true,
-      backdropComponent,
+      backdropComponent = nullBackdrop,
+      animatedIndex: externalAnimatedIndex,
       ...props
     },
     ref
   ) => {
     const { bottomSheetState } = useBottomSheetState();
 
-    const { handleAnimate, handleClose } = useMemo(
-      () => createSheetEventHandlers(bottomSheetState.id),
-      [bottomSheetState.id]
-    );
+    // Get or create shared animated index for this sheet
+    const animatedIndex =
+      externalAnimatedIndex ?? getAnimatedIndex(bottomSheetState.id);
 
-    const wrappedOnAnimate: BottomSheetProps['onAnimate'] = useCallback(
-      (
-        fromIndex: number,
-        toIndex: number,
-        fromPosition: number,
-        toPosition: number
-      ) => {
-        handleAnimate(fromIndex, toIndex);
-        onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
-      },
-      [handleAnimate, onAnimate]
+    const { handleAnimate, handleClose } = createSheetEventHandlers(
+      bottomSheetState.id
     );
 
-    const wrappedOnClose = useCallback(() => {
+    const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
+      fromIndex: number,
+      toIndex: number,
+      fromPosition: number,
+      toPosition: number
+    ) => {
+      handleAnimate(fromIndex, toIndex);
+      onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
+    };
+
+    const wrappedOnClose = () => {
       onClose?.();
       handleClose();
-    }, [handleClose, onClose]);
+    };
 
     const config = useBottomSheetSpringConfigs({
       stiffness: 400,
@@ -60,25 +63,15 @@ export const BottomSheetManaged = React.forwardRef<
       mass: 0.7,
     });
 
-    const renderBackdropComponent = useCallback(
-      (backdropProps: BottomSheetBackdropProps) => (
-        <BottomSheetBackdrop
-          {...backdropProps}
-          disappearsOnIndex={-1}
-          appearsOnIndex={0}
-        />
-      ),
-      []
-    );
-
     return (
       <BottomSheetOriginal
         animationConfigs={config}
         ref={ref}
         {...props}
+        animatedIndex={animatedIndex}
         onClose={wrappedOnClose}
         onAnimate={wrappedOnAnimate}
-        backdropComponent={backdropComponent || renderBackdropComponent}
+        backdropComponent={backdropComponent}
         enablePanDownToClose={enablePanDownToClose}
       >
         {children}

package/src/BottomSheetManager.context.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { ScaleConfig } from './useScaleAnimation';
 
 export interface BottomSheetManagerContextValue {
   groupId: string;
+  scaleConfig?: ScaleConfig;
 }
 
 export const BottomSheetManagerContext =

package/src/BottomSheetManager.provider.tsx

@@ -4,23 +4,27 @@ import {
   BottomSheetManagerContext,
   type BottomSheetManagerContextValue,
 } from './BottomSheetManager.context';
+import type { ScaleConfig } from './useScaleAnimation';
 
 interface ProviderProps extends PropsWithChildren {
   id: string;
+  scaleConfig?: ScaleConfig;
 }
 
-function BottomSheetManagerProviderComp({ id, children }: ProviderProps) {
+export function BottomSheetManagerProvider({
+  id,
+  scaleConfig,
+  children,
+}: ProviderProps) {
+  const value = { groupId: id, scaleConfig };
+
   return (
-    <BottomSheetManagerContext.Provider key={id} value={{ groupId: id }}>
+    <BottomSheetManagerContext.Provider key={id} value={value}>
       {children}
     </BottomSheetManagerContext.Provider>
   );
 }
 
-export const BottomSheetManagerProvider = React.memo(
-  BottomSheetManagerProviderComp
-);
-
 export const useBottomSheetManagerContext =
   (): BottomSheetManagerContextValue => {
     const context = React.useContext(BottomSheetManagerContext);

package/src/BottomSheetScaleView.tsx

@@ -0,0 +1,41 @@
+import { useContext, type PropsWithChildren } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { BottomSheetManagerContext } from './BottomSheetManager.context';
+import { useScaleAnimatedStyle, useScaleDepth } from './useScaleAnimation';
+
+/**
+ * Wraps your app content with iOS-style scale animation when a bottom sheet
+ * with scaleBackground: true is open. Place your main content inside this
+ * component, but keep BottomSheetHost outside of it.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetManagerProvider id="default" scaleConfig={{ scale: 0.92 }}>
+ *   <BottomSheetScaleView>
+ *     <MainContent />
+ *   </BottomSheetScaleView>
+ *   <BottomSheetHost />
+ * </BottomSheetManagerProvider>
+ * ```
+ */
+export function BottomSheetScaleView({ children }: PropsWithChildren) {
+  const context = useContext(BottomSheetManagerContext);
+  const groupId = context?.groupId ?? 'default';
+  const scaleConfig = context?.scaleConfig;
+
+  const scaleDepth = useScaleDepth(groupId);
+  const animatedStyle = useScaleAnimatedStyle(scaleDepth, scaleConfig);
+
+  return (
+    <Animated.View style={[styles.container, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/animatedRegistry.ts

@@ -0,0 +1,22 @@
+import { makeMutable, type SharedValue } from 'react-native-reanimated';
+
+/**
+ * Registry for shared animated values per sheet.
+ * This allows backdrop to access the animatedIndex from the bottom sheet.
+ */
+const animatedIndexRegistry = new Map<string, SharedValue<number>>();
+
+export function getAnimatedIndex(sheetId: string): SharedValue<number> {
+  let animatedIndex = animatedIndexRegistry.get(sheetId);
+
+  if (!animatedIndex) {
+    animatedIndex = makeMutable(-1);
+    animatedIndexRegistry.set(sheetId, animatedIndex);
+  }
+
+  return animatedIndex;
+}
+
+export function cleanupAnimatedIndex(sheetId: string): void {
+  animatedIndexRegistry.delete(sheetId);
+}

package/src/bottomSheet.store.ts

@@ -30,136 +30,136 @@ interface BottomSheetStoreActions {
   clearAll(): void;
 }
 
-export const useBottomSheetStore = create(
-  subscribeWithSelector<BottomSheetStoreState & BottomSheetStoreActions>(
-    (set) => ({
-      sheetsById: {},
-      stackOrder: [],
-
-      push: (sheet) =>
-        set((state) => {
-          if (state.sheetsById[sheet.id]) {
-            return state;
-          }
-          return {
-            sheetsById: {
-              ...state.sheetsById,
-              [sheet.id]: { ...sheet, status: 'opening' },
-            },
-            stackOrder: [...state.stackOrder, sheet.id],
-          };
-        }),
-
-      switch: (sheet) =>
-        set((state) => {
-          if (state.sheetsById[sheet.id]) {
-            return state;
-          }
-
-          const newSheetsById = { ...state.sheetsById };
-          const topId = state.stackOrder[state.stackOrder.length - 1];
-
-          if (topId && newSheetsById[topId]) {
-            newSheetsById[topId] = {
-              ...newSheetsById[topId],
-              status: 'hidden',
-            };
-          }
-
-          newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
-
-          return {
-            sheetsById: newSheetsById,
-            stackOrder: [...state.stackOrder, sheet.id],
-          };
-        }),
-
-      replace: (sheet) =>
-        set((state) => {
-          if (state.sheetsById[sheet.id]) {
-            return state;
-          }
-
-          const newSheetsById = { ...state.sheetsById };
-          const topId = state.stackOrder[state.stackOrder.length - 1];
-
-          if (topId && newSheetsById[topId]) {
-            newSheetsById[topId] = {
-              ...newSheetsById[topId],
-              status: 'closing',
-            };
-          }
+export type BottomSheetStore = BottomSheetStoreState & BottomSheetStoreActions;
 
-          newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
-
-          return {
-            sheetsById: newSheetsById,
-            stackOrder: [...state.stackOrder, sheet.id],
-          };
-        }),
-
-      markOpen: (id) =>
-        set((state) => {
-          const sheet = state.sheetsById[id];
-          if (!sheet) {
-            return state;
-          }
-          return {
-            sheetsById: {
-              ...state.sheetsById,
-              [id]: { ...sheet, status: 'open' },
-            },
+export const useBottomSheetStore = create(
+  subscribeWithSelector<BottomSheetStore>((set) => ({
+    sheetsById: {},
+    stackOrder: [],
+
+    push: (sheet) =>
+      set((state) => {
+        if (state.sheetsById[sheet.id]) {
+          return state;
+        }
+        return {
+          sheetsById: {
+            ...state.sheetsById,
+            [sheet.id]: { ...sheet, status: 'opening' },
+          },
+          stackOrder: [...state.stackOrder, sheet.id],
+        };
+      }),
+
+    switch: (sheet) =>
+      set((state) => {
+        if (state.sheetsById[sheet.id]) {
+          return state;
+        }
+
+        const newSheetsById = { ...state.sheetsById };
+        const topId = state.stackOrder[state.stackOrder.length - 1];
+
+        if (topId && newSheetsById[topId]) {
+          newSheetsById[topId] = {
+            ...newSheetsById[topId],
+            status: 'hidden',
           };
-        }),
-
-      startClosing: (id) =>
-        set((state) => {
-          const sheet = state.sheetsById[id];
-          if (!sheet || sheet.status === 'hidden') {
-            return state;
-          }
-
-          const newSheetsById = { ...state.sheetsById };
-          newSheetsById[id] = { ...sheet, status: 'closing' };
+        }
 
-          const index = state.stackOrder.indexOf(id);
-          const belowId = state.stackOrder[index - 1];
-          const belowSheet = belowId ? newSheetsById[belowId] : undefined;
+        newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
 
-          if (belowId && belowSheet && belowSheet.status === 'hidden') {
-            newSheetsById[belowId] = { ...belowSheet, status: 'opening' };
-          }
+        return {
+          sheetsById: newSheetsById,
+          stackOrder: [...state.stackOrder, sheet.id],
+        };
+      }),
 
-          return { sheetsById: newSheetsById };
-        }),
+    replace: (sheet) =>
+      set((state) => {
+        if (state.sheetsById[sheet.id]) {
+          return state;
+        }
 
-      finishClosing: (id) =>
-        set((state) => {
-          if (!state.sheetsById[id]) {
-            return state;
-          }
+        const newSheetsById = { ...state.sheetsById };
+        const topId = state.stackOrder[state.stackOrder.length - 1];
 
-          const newSheetsById = { ...state.sheetsById };
-          delete newSheetsById[id];
-
-          const newStackOrder = state.stackOrder.filter(
-            (sheetId) => sheetId !== id
-          );
-
-          const topId = newStackOrder[newStackOrder.length - 1];
-          const topSheet = topId ? newSheetsById[topId] : undefined;
-
-          if (topId && topSheet && topSheet.status === 'hidden') {
-            newSheetsById[topId] = { ...topSheet, status: 'opening' };
-          }
-
-          return {
-            sheetsById: newSheetsById,
-            stackOrder: newStackOrder,
+        if (topId && newSheetsById[topId]) {
+          newSheetsById[topId] = {
+            ...newSheetsById[topId],
+            status: 'closing',
           };
-        }),
-
-      clearAll: () => set(() => ({ sheetsById: {}, stackOrder: [] })),
-    })
-  )
+        }
+
+        newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
+
+        return {
+          sheetsById: newSheetsById,
+          stackOrder: [...state.stackOrder, sheet.id],
+        };
+      }),
+
+    markOpen: (id) =>
+      set((state) => {
+        const sheet = state.sheetsById[id];
+        if (!sheet) {
+          return state;
+        }
+        return {
+          sheetsById: {
+            ...state.sheetsById,
+            [id]: { ...sheet, status: 'open' },
+          },
+        };
+      }),
+
+    startClosing: (id) =>
+      set((state) => {
+        const sheet = state.sheetsById[id];
+        if (!sheet || sheet.status === 'hidden') {
+          return state;
+        }
+
+        const newSheetsById = { ...state.sheetsById };
+        newSheetsById[id] = { ...sheet, status: 'closing' };
+
+        const index = state.stackOrder.indexOf(id);
+        const belowId = state.stackOrder[index - 1];
+        const belowSheet = belowId ? newSheetsById[belowId] : undefined;
+
+        if (belowId && belowSheet && belowSheet.status === 'hidden') {
+          newSheetsById[belowId] = { ...belowSheet, status: 'opening' };
+        }
+
+        return { sheetsById: newSheetsById };
+      }),
+
+    finishClosing: (id) =>
+      set((state) => {
+        if (!state.sheetsById[id]) {
+          return state;
+        }
+
+        const newSheetsById = { ...state.sheetsById };
+        delete newSheetsById[id];
+
+        const newStackOrder = state.stackOrder.filter(
+          (sheetId) => sheetId !== id
+        );
+
+        const topId = newStackOrder[newStackOrder.length - 1];
+        const topSheet = topId ? newSheetsById[topId] : undefined;
+
+        if (topId && topSheet && topSheet.status === 'hidden') {
+          newSheetsById[topId] = { ...topSheet, status: 'opening' };
+        }
+
+        return {
+          sheetsById: newSheetsById,
+          stackOrder: newStackOrder,
+        };
+      }),
+
+    clearAll: () => set(() => ({ sheetsById: {}, stackOrder: [] })),
+  }))
 );

package/src/bottomSheetCoordinator.ts

@@ -16,19 +16,18 @@ export function initBottomSheetCoordinator(groupId: string) {
         }
 
         const ref = sheetRefs[id]?.current;
-        if (!ref) {
-          return;
-        }
 
         switch (status) {
           case 'opening':
-            ref.expand();
+            requestAnimationFrame(() => {
+              sheetRefs[id]?.current?.expand();
+            });
             break;
           case 'hidden':
-            ref.close();
+            if (ref) ref.close();
             break;
           case 'closing':
-            ref.close();
+            if (ref) ref.close();
             break;
         }
       });

package/src/index.tsx

@@ -3,7 +3,5 @@ export { BottomSheetManagerProvider } from './BottomSheetManager.provider';
 export { useBottomSheetManager } from './useBottomSheetManager';
 export { useBottomSheetState } from './useBottomSheetState';
 export { BottomSheetManaged } from './BottomSheetManaged';
-export {
-  ScaleBackgroundWrapper,
-  type ScaleBackgroundConfig,
-} from './ScaleBackgroundWrapper';
+export { BottomSheetScaleView } from './BottomSheetScaleView';
+export { type ScaleConfig } from './useScaleAnimation';

package/src/useBottomSheetManager.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { useBottomSheetStore, type OpenMode } from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
@@ -26,62 +26,51 @@ export const useBottomSheetManager = () => {
     shallow
   );
 
-  const openBottomSheet = useCallback(
-    (
-      content: React.ReactElement,
-      options: {
-        id?: string;
-        groupId?: string;
-        mode?: OpenMode;
-        scaleBackground?: boolean;
-      } = {}
-    ) => {
-      const groupId =
-        options.groupId || bottomSheetManagerContext?.groupId || 'default';
+  const openBottomSheet = (
+    content: React.ReactElement,
+    options: {
+      id?: string;
+      groupId?: string;
+      mode?: OpenMode;
+      scaleBackground?: boolean;
+    } = {}
+  ) => {
+    const groupId =
+      options.groupId || bottomSheetManagerContext?.groupId || 'default';
 
-      const id = options.id || Math.random().toString(36);
-      const ref = React.createRef<BottomSheetMethods>();
+    const id = options.id || Math.random().toString(36);
+    const ref = React.createRef<BottomSheetMethods>();
 
-      sheetRefs[id] = ref;
+    sheetRefs[id] = ref;
 
-      // @ts-ignore
-      const contentWithRef = React.cloneElement(content, { ref });
+    // @ts-ignore
+    const contentWithRef = React.cloneElement(content, { ref });
 
-      const sheetData = {
-        id,
-        groupId,
-        content: contentWithRef,
-        scaleBackground: options.scaleBackground,
-      };
+    const sheetData = {
+      id,
+      groupId,
+      content: contentWithRef,
+      scaleBackground: options.scaleBackground,
+    };
 
-      if (options.mode === 'replace') {
-        replaceBottomSheet(sheetData);
-      } else if (options.mode === 'switch') {
-        switchBottomSheet(sheetData);
-      } else {
-        pushBottomSheet(sheetData);
-      }
+    if (options.mode === 'replace') {
+      replaceBottomSheet(sheetData);
+    } else if (options.mode === 'switch') {
+      switchBottomSheet(sheetData);
+    } else {
+      pushBottomSheet(sheetData);
+    }
 
-      return id;
-    },
-    [
-      bottomSheetManagerContext?.groupId,
-      pushBottomSheet,
-      replaceBottomSheet,
-      switchBottomSheet,
-    ]
-  );
+    return id;
+  };
 
-  const close = useCallback(
-    (id: string) => {
-      startClosing(id);
-    },
-    [startClosing]
-  );
+  const close = (id: string) => {
+    startClosing(id);
+  };
 
-  const clearAll = useCallback(() => {
+  const clearAll = () => {
     storeClearAll();
-  }, [storeClearAll]);
+  };
 
   return {
     clearAll,

package/src/useBottomSheetState.ts

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import { useMaybeBottomSheetContext } from './BottomSheet.context';
 import {
   useBottomSheetStore,
@@ -13,7 +12,7 @@ export function useBottomSheetState(): {
   const context = useMaybeBottomSheetContext();
 
   const bottomSheetState = useBottomSheetStore(
-    useCallback((state) => state.sheetsById[context?.id!], [context?.id])
+    (state) => state.sheetsById[context?.id!]
   );
 
   const startClosing = useBottomSheetStore((state) => state.startClosing);
@@ -24,10 +23,7 @@ export function useBottomSheetState(): {
     );
   }
 
-  const close = useCallback(
-    () => startClosing(bottomSheetState.id),
-    [bottomSheetState.id, startClosing]
-  );
+  const close = () => startClosing(bottomSheetState.id);
 
   return {
     bottomSheetState,