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

package/src/bottomSheet.store.ts

@@ -11,6 +11,7 @@ export interface BottomSheetState {
   content: ReactNode;
   status: BottomSheetStatus;
   scaleBackground?: boolean;
+  usePortal?: boolean;
 }
 
 type TriggerState = Omit<BottomSheetState, 'status'>;
@@ -20,146 +21,172 @@ interface BottomSheetStoreState {
   stackOrder: string[];
 }
 
+export interface PortalOpenOptions {
+  scaleBackground?: boolean;
+}
+
 interface BottomSheetStoreActions {
   push(sheet: TriggerState): void;
   switch(sheet: TriggerState): void;
   replace(sheet: TriggerState): void;
+  openPortal(id: string, groupId: string, options?: PortalOpenOptions): void;
   markOpen(id: string): void;
   startClosing(id: string): void;
   finishClosing(id: string): void;
   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;
-          }
+export type BottomSheetStore = BottomSheetStoreState & BottomSheetStoreActions;
 
-          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],
+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',
           };
-        }),
+        }
 
-      replace: (sheet) =>
-        set((state) => {
-          if (state.sheetsById[sheet.id]) {
-            return state;
-          }
+        newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
 
-          const newSheetsById = { ...state.sheetsById };
-          const topId = state.stackOrder[state.stackOrder.length - 1];
+        return {
+          sheetsById: newSheetsById,
+          stackOrder: [...state.stackOrder, sheet.id],
+        };
+      }),
 
-          if (topId && newSheetsById[topId]) {
-            newSheetsById[topId] = {
-              ...newSheetsById[topId],
-              status: 'closing',
-            };
-          }
+    replace: (sheet) =>
+      set((state) => {
+        if (state.sheetsById[sheet.id]) {
+          return state;
+        }
 
-          newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
+        const newSheetsById = { ...state.sheetsById };
+        const topId = state.stackOrder[state.stackOrder.length - 1];
 
-          return {
-            sheetsById: newSheetsById,
-            stackOrder: [...state.stackOrder, sheet.id],
+        if (topId && newSheetsById[topId]) {
+          newSheetsById[topId] = {
+            ...newSheetsById[topId],
+            status: 'closing',
           };
-        }),
-
-      markOpen: (id) =>
-        set((state) => {
-          const sheet = state.sheetsById[id];
-          if (!sheet) {
-            return state;
-          }
-          return {
-            sheetsById: {
-              ...state.sheetsById,
-              [id]: { ...sheet, status: 'open' },
+        }
+
+        newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
+
+        return {
+          sheetsById: newSheetsById,
+          stackOrder: [...state.stackOrder, sheet.id],
+        };
+      }),
+
+    openPortal: (id, groupId, options) =>
+      set((state) => {
+        if (state.sheetsById[id]) {
+          return state;
+        }
+        return {
+          sheetsById: {
+            ...state.sheetsById,
+            [id]: {
+              id,
+              groupId,
+              content: null,
+              status: 'opening',
+              usePortal: true,
+              scaleBackground: options?.scaleBackground,
             },
-          };
-        }),
-
-      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: [] })),
-    })
-  )
+          },
+          stackOrder: [...state.stackOrder, 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,11 @@ 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';
+export { BottomSheetPortal } from './BottomSheetPortal';
+export { useBottomSheetControl } from './useBottomSheetControl';
+export type {
+  BottomSheetPortalRegistry,
+  BottomSheetPortalId,
+} from './portal.types';

package/src/portal.types.ts

@@ -0,0 +1,25 @@
+/**
+ * Registry for portal-based bottom sheets.
+ * Augment this interface in your app to get type-safe sheet IDs:
+ *
+ * @example
+ * ```tsx
+ * declare module 'react-native-bottom-sheet-stack' {
+ *   interface BottomSheetPortalRegistry {
+ *     'my-sheet': true;
+ *     'settings-sheet': true;
+ *     'profile-sheet': true;
+ *   }
+ * }
+ * ```
+ */
+export interface BottomSheetPortalRegistry {}
+
+/**
+ * Type-safe portal sheet ID.
+ * If BottomSheetPortalRegistry is augmented, this will be a union of the registered keys.
+ * Otherwise, it falls back to `string` for flexibility.
+ */
+export type BottomSheetPortalId = keyof BottomSheetPortalRegistry extends never
+  ? string
+  : Extract<keyof BottomSheetPortalRegistry, string>;

package/src/useBottomSheetControl.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
+import {
+  useBottomSheetStore,
+  type BottomSheetStatus,
+  type PortalOpenOptions,
+} from './bottomSheet.store';
+import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
+import type { BottomSheetPortalId } from './portal.types';
+import { sheetRefs } from './refsMap';
+
+export interface UseBottomSheetControlReturn {
+  open: (options?: PortalOpenOptions) => void;
+  close: () => void;
+  isOpen: boolean;
+  status: BottomSheetStatus | null;
+}
+
+export function useBottomSheetControl(
+  id: BottomSheetPortalId
+): UseBottomSheetControlReturn {
+  const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
+
+  const openPortal = useBottomSheetStore((state) => state.openPortal);
+  const startClosing = useBottomSheetStore((state) => state.startClosing);
+  const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
+
+  const open = (options?: PortalOpenOptions) => {
+    const groupId = bottomSheetManagerContext?.groupId || 'default';
+
+    // Create ref when opening (same pattern as useBottomSheetManager)
+    const ref = React.createRef<BottomSheetMethods>();
+    sheetRefs[id] = ref;
+
+    openPortal(id, groupId, options);
+  };
+
+  const close = () => {
+    startClosing(id);
+  };
+
+  const status = sheetState?.status ?? null;
+  const isOpen = status === 'open' || status === 'opening';
+
+  return {
+    open,
+    close,
+    isOpen,
+    status,
+  };
+}

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,

package/src/useScaleAnimation.ts

@@ -0,0 +1,114 @@
+import { useRef } from 'react';
+import {
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  useBottomSheetStore,
+  type BottomSheetStore,
+} from './bottomSheet.store';
+
+export interface ScaleConfig {
+  /** Scale factor when sheet is open (default: 0.92) */
+  scale?: number;
+  /** Vertical translation when sheet is open (default: 10) */
+  translateY?: number;
+  /** Border radius when sheet is open (default: 12) */
+  borderRadius?: number;
+  /** Animation duration in ms (default: 300) */
+  duration?: number;
+}
+
+const DEFAULT_CONFIG: Required<ScaleConfig> = {
+  scale: 0.92,
+  translateY: 10,
+  borderRadius: 12,
+  duration: 300,
+};
+
+/**
+ * Returns the number of sheets with scaleBackground above a given element.
+ * For background wrapper, pass undefined as sheetId - returns 0 or 1 (binary).
+ * For sheets, returns the count of scaleBackground sheets above it.
+ * Uses shallow comparison internally for optimal re-renders.
+ */
+export function useScaleDepth(groupId: string, sheetId?: string): number {
+  const prevDepthRef = useRef(0);
+
+  const scaleDepthSelector = (state: BottomSheetStore) => {
+    const { stackOrder, sheetsById } = state;
+
+    // For background: check if ANY scaleBackground sheet is active (binary 0/1)
+    // For a sheet: count scaleBackground sheets above it in the stack
+    const startIndex = sheetId ? stackOrder.indexOf(sheetId) + 1 : 0;
+
+    if (sheetId && startIndex === 0) {
+      // Sheet not found in stack, return previous value to avoid flicker
+      return prevDepthRef.current;
+    }
+
+    let depth = 0;
+    for (let i = startIndex; i < stackOrder.length; i++) {
+      const id = stackOrder[i]!;
+      const sheet = sheetsById[id];
+      if (
+        sheet &&
+        sheet.groupId === groupId &&
+        sheet.scaleBackground &&
+        sheet.status !== 'closing'
+      ) {
+        depth++;
+        // For background wrapper (no sheetId), we only need to know if there's at least one
+        // Don't accumulate - background scales once, sheets below scale cumulatively
+        if (!sheetId) {
+          break;
+        }
+      }
+    }
+
+    prevDepthRef.current = depth;
+    return depth;
+  };
+
+  return useBottomSheetStore(scaleDepthSelector);
+}
+
+/**
+ * Returns animated style for scale effect based on depth.
+ * Uses power scaling: scale^depth for cascading effect.
+ */
+export function useScaleAnimatedStyle(depth: number, config?: ScaleConfig) {
+  const {
+    scale = DEFAULT_CONFIG.scale,
+    translateY = DEFAULT_CONFIG.translateY,
+    borderRadius = DEFAULT_CONFIG.borderRadius,
+    duration = DEFAULT_CONFIG.duration,
+  } = config ?? {};
+
+  const progress = useDerivedValue(() => {
+    return withTiming(depth, { duration });
+  });
+
+  return useAnimatedStyle(() => {
+    const p = progress.value;
+
+    if (p === 0) {
+      return {
+        transform: [{ scale: 1 }, { translateY: 0 }],
+        borderRadius: 0,
+        overflow: 'visible',
+      };
+    }
+
+    const currentScale = Math.pow(scale, p);
+    const currentTranslateY = translateY * p;
+    const currentBorderRadius = Math.min(borderRadius * p, borderRadius);
+
+    return {
+      transform: [{ scale: currentScale }, { translateY: currentTranslateY }],
+      borderRadius: currentBorderRadius,
+      overflow: 'hidden',
+    };
+  });
+}