react-native-bottom-sheet-stack 1.6.1 → 1.7.1

package/src/portalSessionRegistry.ts

@@ -0,0 +1,25 @@
+/**
+ * Registry for portal session counters per sheet.
+ * This persists across sheet deletions to ensure unique Portal/PortalHost names
+ * and work around react-native-teleport connection issues after replace flows.
+ */
+const portalSessionRegistry = new Map<string, number>();
+
+export function getNextPortalSession(sheetId: string): number {
+  const current = portalSessionRegistry.get(sheetId) ?? 0;
+  const next = current + 1;
+  portalSessionRegistry.set(sheetId, next);
+  return next;
+}
+
+export function getCurrentPortalSession(sheetId: string): number | undefined {
+  return portalSessionRegistry.get(sheetId);
+}
+
+/**
+ * Reset all portal sessions. Useful for testing.
+ * @internal
+ */
+export function __resetPortalSessions(): void {
+  portalSessionRegistry.clear();
+}

package/src/refsMap.ts

@@ -16,3 +16,11 @@ export function setSheetRef(sheetId: string, ref: SheetRef): void {
 export function cleanupSheetRef(sheetId: string): void {
   sheetRefsMap.delete(sheetId);
 }
+
+/**
+ * Reset all sheet refs. Useful for testing.
+ * @internal
+ */
+export function __resetSheetRefs(): void {
+  sheetRefsMap.clear();
+}

package/src/store/helpers.ts

@@ -0,0 +1,65 @@
+import type { BottomSheetState, BottomSheetStatus, OpenMode } from './types';
+
+export const MODE_STATUS_MAP: Record<OpenMode, BottomSheetStatus | null> = {
+  push: null,
+  switch: 'hidden',
+  replace: 'closing',
+};
+
+export function isActivatableKeepMounted(
+  sheet: BottomSheetState | undefined
+): sheet is BottomSheetState {
+  return Boolean(sheet?.keepMounted && sheet.status === 'hidden');
+}
+
+export function isHidden(sheet: BottomSheetState | undefined): boolean {
+  return sheet?.status === 'hidden';
+}
+
+export function isOpening(sheet: BottomSheetState | undefined): boolean {
+  return sheet?.status === 'opening';
+}
+
+export function updateSheet(
+  sheetsById: Record<string, BottomSheetState>,
+  id: string,
+  update: Partial<BottomSheetState>
+): Record<string, BottomSheetState> {
+  const sheet = sheetsById[id];
+  if (!sheet) return sheetsById;
+
+  return {
+    ...sheetsById,
+    [id]: { ...sheet, ...update },
+  };
+}
+
+export function applyModeToTopSheet(
+  sheetsById: Record<string, BottomSheetState>,
+  stackOrder: string[],
+  mode: OpenMode
+): Record<string, BottomSheetState> {
+  const targetStatus = MODE_STATUS_MAP[mode];
+  if (!targetStatus) return sheetsById;
+
+  const topId = stackOrder[stackOrder.length - 1];
+  if (!topId || !sheetsById[topId]) return sheetsById;
+
+  return updateSheet(sheetsById, topId, { status: targetStatus });
+}
+
+export function removeFromStack(stackOrder: string[], id: string): string[] {
+  return stackOrder.filter((sheetId) => sheetId !== id);
+}
+
+export function getTopSheetId(stackOrder: string[]): string | undefined {
+  return stackOrder[stackOrder.length - 1];
+}
+
+export function getSheetBelowId(
+  stackOrder: string[],
+  id: string
+): string | undefined {
+  const index = stackOrder.indexOf(id);
+  return index > 0 ? stackOrder[index - 1] : undefined;
+}

package/src/store/hooks.ts

@@ -0,0 +1,50 @@
+import { shallow } from 'zustand/shallow';
+import { useBottomSheetStore } from './store';
+
+// State hooks
+
+export const useSheet = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id], shallow);
+
+export const useSheetStatus = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.status, shallow);
+
+export const useSheetParams = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.params, shallow);
+
+export const useSheetContent = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.content, shallow);
+
+export const useSheetUsePortal = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.usePortal, shallow);
+
+export const useSheetKeepMounted = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.keepMounted, shallow);
+export const useSheetPortalSession = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.portalSession, shallow);
+
+export const useSheetExists = (id: string) =>
+  useBottomSheetStore((state) => !!state.sheetsById[id], shallow);
+
+export const useIsSheetOpen = (id: string) =>
+  useBottomSheetStore((state) => {
+    const status = state.sheetsById[id]?.status;
+    return status === 'open' || status === 'opening';
+  }, shallow);
+
+// Action hooks
+
+export const useOpen = () => useBottomSheetStore((state) => state.open);
+
+export const useStartClosing = () =>
+  useBottomSheetStore((state) => state.startClosing);
+
+export const useUpdateParams = () =>
+  useBottomSheetStore((state) => state.updateParams);
+
+export const useClearGroup = () =>
+  useBottomSheetStore((state) => state.clearGroup);
+
+export const useMount = () => useBottomSheetStore((state) => state.mount);
+
+export const useUnmount = () => useBottomSheetStore((state) => state.unmount);

package/src/store/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './store';
+export * from './hooks';
+export { getTopSheetId } from './helpers';

package/src/store/store.ts

@@ -0,0 +1,168 @@
+import { subscribeWithSelector } from 'zustand/middleware';
+import { createWithEqualityFn as create } from 'zustand/traditional';
+
+import {
+  applyModeToTopSheet,
+  getSheetBelowId,
+  getTopSheetId,
+  isActivatableKeepMounted,
+  isHidden,
+  isOpening,
+  removeFromStack,
+  updateSheet,
+} from './helpers';
+import { getNextPortalSession } from '../portalSessionRegistry';
+import type { BottomSheetState, BottomSheetStore } from './types';
+
+export const useBottomSheetStore = create(
+  subscribeWithSelector<BottomSheetStore>((set) => ({
+    sheetsById: {},
+    stackOrder: [],
+
+    open: (sheet, mode = 'push') =>
+      set((state) => {
+        const existingSheet = state.sheetsById[sheet.id];
+
+        if (existingSheet && !isActivatableKeepMounted(existingSheet)) {
+          return state;
+        }
+
+        const updatedSheetsById = applyModeToTopSheet(
+          state.sheetsById,
+          state.stackOrder,
+          mode
+        );
+
+        // Get next portalSession from registry for portal-based sheets
+        // Registry persists across sheet deletions to ensure unique Portal/PortalHost names
+        const nextPortalSession = sheet.usePortal
+          ? getNextPortalSession(sheet.id)
+          : undefined;
+
+        const newSheet: BottomSheetState = existingSheet
+          ? {
+              ...existingSheet,
+              status: 'opening',
+              scaleBackground:
+                sheet.scaleBackground ?? existingSheet.scaleBackground,
+              params: sheet.params ?? existingSheet.params,
+              portalSession: nextPortalSession ?? existingSheet.portalSession,
+            }
+          : { ...sheet, status: 'opening', portalSession: nextPortalSession };
+
+        return {
+          sheetsById: { ...updatedSheetsById, [sheet.id]: newSheet },
+          stackOrder: [...state.stackOrder, sheet.id],
+        };
+      }),
+
+    markOpen: (id) =>
+      set((state) => {
+        if (!state.sheetsById[id]) return state;
+        return {
+          sheetsById: updateSheet(state.sheetsById, id, { status: 'open' }),
+        };
+      }),
+
+    startClosing: (id) =>
+      set((state) => {
+        const sheet = state.sheetsById[id];
+        if (!sheet || isHidden(sheet) || isOpening(sheet)) return state;
+
+        let updatedSheetsById = updateSheet(state.sheetsById, id, {
+          status: 'closing',
+        });
+
+        const belowId = getSheetBelowId(state.stackOrder, id);
+        if (belowId && isHidden(updatedSheetsById[belowId])) {
+          updatedSheetsById = updateSheet(updatedSheetsById, belowId, {
+            status: 'opening',
+          });
+        }
+
+        return { sheetsById: updatedSheetsById };
+      }),
+
+    finishClosing: (id) =>
+      set((state) => {
+        const sheet = state.sheetsById[id];
+        if (!sheet) return state;
+
+        let updatedSheetsById = { ...state.sheetsById };
+
+        if (sheet.keepMounted) {
+          updatedSheetsById = updateSheet(updatedSheetsById, id, {
+            status: 'hidden',
+          });
+        } else {
+          delete updatedSheetsById[id];
+        }
+
+        const newStackOrder = removeFromStack(state.stackOrder, id);
+        const topId = getTopSheetId(newStackOrder);
+
+        if (topId && isHidden(updatedSheetsById[topId])) {
+          updatedSheetsById = updateSheet(updatedSheetsById, topId, {
+            status: 'opening',
+          });
+        }
+
+        return {
+          sheetsById: updatedSheetsById,
+          stackOrder: newStackOrder,
+        };
+      }),
+
+    updateParams: (id, params) =>
+      set((state) => {
+        if (!state.sheetsById[id]) return state;
+        return { sheetsById: updateSheet(state.sheetsById, id, { params }) };
+      }),
+
+    clearGroup: (groupId) =>
+      set((state) => {
+        const idsToRemove = new Set(
+          Object.keys(state.sheetsById).filter(
+            (id) => state.sheetsById[id]?.groupId === groupId
+          )
+        );
+
+        if (idsToRemove.size === 0) return state;
+
+        const updatedSheetsById = { ...state.sheetsById };
+        idsToRemove.forEach((id) => delete updatedSheetsById[id]);
+
+        return {
+          sheetsById: updatedSheetsById,
+          stackOrder: state.stackOrder.filter((id) => !idsToRemove.has(id)),
+        };
+      }),
+
+    clearAll: () => set({ sheetsById: {}, stackOrder: [] }),
+
+    mount: (sheet) =>
+      set((state) => {
+        if (state.sheetsById[sheet.id]) return state;
+
+        return {
+          sheetsById: {
+            ...state.sheetsById,
+            [sheet.id]: { ...sheet, status: 'hidden' },
+          },
+        };
+      }),
+
+    unmount: (id) =>
+      set((state) => {
+        if (!state.sheetsById[id]) return state;
+
+        const updatedSheetsById = { ...state.sheetsById };
+        delete updatedSheetsById[id];
+
+        return {
+          sheetsById: updatedSheetsById,
+          stackOrder: removeFromStack(state.stackOrder, id),
+        };
+      }),
+  }))
+);

package/src/store/types.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+
+export type BottomSheetStatus = 'opening' | 'open' | 'closing' | 'hidden';
+export type OpenMode = 'push' | 'switch' | 'replace';
+
+export interface BottomSheetState {
+  groupId: string;
+  id: string;
+  content?: ReactNode;
+  status: BottomSheetStatus;
+  scaleBackground?: boolean;
+  usePortal?: boolean;
+  params?: Record<string, unknown>;
+  keepMounted?: boolean;
+  /**
+   * Incremented each time a portal-based sheet is opened.
+   * Used to create unique Portal/PortalHost names to work around
+   * react-native-teleport connection issues after replace flows.
+   */
+  portalSession?: number;
+}
+
+export type TriggerState = Omit<BottomSheetState, 'status'>;
+
+export interface BottomSheetStoreState {
+  sheetsById: Record<string, BottomSheetState>;
+  stackOrder: string[];
+}
+
+export interface BottomSheetStoreActions {
+  open(sheet: TriggerState, mode?: OpenMode): void;
+  markOpen(id: string): void;
+  startClosing(id: string): void;
+  finishClosing(id: string): void;
+  updateParams(id: string, params: Record<string, unknown> | undefined): void;
+  clearGroup(groupId: string): void;
+  clearAll(): void;
+  mount(sheet: Omit<BottomSheetState, 'status'>): void;
+  unmount(id: string): void;
+}
+
+export type BottomSheetStore = BottomSheetStoreState & BottomSheetStoreActions;

package/src/useBottomSheetContext.ts

@@ -1,6 +1,5 @@
-import { shallow } from 'zustand/shallow';
 import { useMaybeBottomSheetContext } from './BottomSheet.context';
-import { useBottomSheetStore } from './bottomSheet.store';
+import { useSheetParams, useStartClosing } from './bottomSheet.store';
 import type {
   BottomSheetPortalId,
   BottomSheetPortalParams,
@@ -24,27 +23,19 @@ export function useBottomSheetContext<
   T extends BottomSheetPortalId,
 >(): UseBottomSheetContextReturn<BottomSheetPortalParams<T> | unknown> {
   const context = useMaybeBottomSheetContext();
+  const params = useSheetParams(context?.id || '');
+  const startClosing = useStartClosing();
 
-  const { id, params } = useBottomSheetStore(
-    (state) => ({
-      id: state.sheetsById[context?.id!]?.id,
-      params: state.sheetsById[context?.id!]?.params,
-    }),
-    shallow
-  );
-
-  const startClosing = useBottomSheetStore((state) => state.startClosing);
-
-  if (!id) {
+  if (!context?.id) {
     throw new Error(
       'useBottomSheetContext must be used within a BottomSheet component'
     );
   }
 
-  const close = () => startClosing(id);
+  const close = () => startClosing(context.id);
 
   return {
-    id,
+    id: context.id,
     params: params as BottomSheetPortalParams<T>,
     close,
     closeBottomSheet: close,

package/src/useBottomSheetControl.ts

@@ -1,14 +1,19 @@
 import React from 'react';
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
-import { useBottomSheetStore, type OpenMode } from './bottomSheet.store';
+import {
+  useOpen,
+  useStartClosing,
+  useUpdateParams,
+  type OpenMode,
+} from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
 import type {
   BottomSheetPortalId,
   BottomSheetPortalParams,
   HasParams,
 } from './portal.types';
-import { setSheetRef } from './refsMap';
+import { getSheetRef, setSheetRef } from './refsMap';
 
 interface BaseOpenOptions<TParams> {
   mode?: OpenMode;
@@ -41,15 +46,19 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
 ): UseBottomSheetControlReturn<T> {
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
 
-  const storeOpen = useBottomSheetStore((state) => state.open);
-  const startClosing = useBottomSheetStore((state) => state.startClosing);
-  const storeUpdateParams = useBottomSheetStore((state) => state.updateParams);
+  const storeOpen = useOpen();
+  const startClosing = useStartClosing();
+  const storeUpdateParams = useUpdateParams();
 
   const open = (options?: OpenOptions<T>) => {
     const groupId = bottomSheetManagerContext?.groupId || 'default';
 
-    const ref = React.createRef<BottomSheetMethods>();
-    setSheetRef(id, ref);
+    // Only create ref if it doesn't exist (keepMounted sheets already have one)
+    const existingRef = getSheetRef(id);
+    if (!existingRef) {
+      const ref = React.createRef<BottomSheetMethods>();
+      setSheetRef(id, ref);
+    }
 
     storeOpen(
       {

package/src/useBottomSheetManager.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
 
-import { useBottomSheetStore, type OpenMode } from './bottomSheet.store';
+import {
+  useOpen,
+  useStartClosing,
+  useClearGroup,
+  type OpenMode,
+} from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
 import { setSheetRef } from './refsMap';
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import { shallow } from 'zustand/shallow';
 
 export const useBottomSheetManager = () => {
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
 
-  const { storeOpen, startClosing, storeClearGroup } = useBottomSheetStore(
-    (store) => ({
-      storeOpen: store.open,
-      storeClearGroup: store.clearGroup,
-      startClosing: store.startClosing,
-    }),
-    shallow
-  );
+  const storeOpen = useOpen();
+  const startClosing = useStartClosing();
+  const storeClearGroup = useClearGroup();
 
   const openBottomSheet = (
     content: React.ReactElement,

package/src/useBottomSheetStatus.ts

@@ -1,25 +1,15 @@
-import {
-  useBottomSheetStore,
-  type BottomSheetStatus,
-} from './bottomSheet.store';
-import type { BottomSheetPortalId } from './portal.types';
+import { useSheetStatus, type BottomSheetStatus } from './bottomSheet.store';
 
 export interface UseBottomSheetStatusReturn {
   status: BottomSheetStatus | null;
   isOpen: boolean;
 }
 
-export function useBottomSheetStatus(
-  id: BottomSheetPortalId
-): UseBottomSheetStatusReturn {
-  const status = useBottomSheetStore(
-    (state) => state.sheetsById[id]?.status ?? null
-  );
-
-  const isOpen = status === 'open' || status === 'opening';
+export function useBottomSheetStatus(id: string): UseBottomSheetStatusReturn {
+  const status = useSheetStatus(id) ?? null;
 
   return {
     status,
-    isOpen,
+    isOpen: status === 'open' || status === 'opening',
   };
 }

package/src/useEvent.ts

@@ -0,0 +1,17 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+
+// biome-ignore lint/suspicious/noExplicitAny: No better alternative available.
+type CallbackType = (...args: any[]) => any;
+
+// RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
+export const useEvent = <T extends CallbackType>(callback: T) => {
+  const callbackRef = useRef(callback);
+
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  return useCallback((...args: Parameters<T>): ReturnType<T> => {
+    return callbackRef.current(...args);
+  }, []);
+};

package/src/useScaleAnimation.ts

@@ -2,15 +2,12 @@ import { useRef } from 'react';
 import {
   useAnimatedStyle,
   useDerivedValue,
-  withTiming,
   withSpring,
-  type WithTimingConfig,
+  withTiming,
   type WithSpringConfig,
+  type WithTimingConfig,
 } from 'react-native-reanimated';
-import {
-  useBottomSheetStore,
-  type BottomSheetStore,
-} from './bottomSheet.store';
+import { useBottomSheetStore } from './bottomSheet.store';
 import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
 
 export type ScaleAnimationConfig =
@@ -40,55 +37,66 @@ const DEFAULT_CONFIG = {
   animation: DEFAULT_ANIMATION,
 } satisfies Required<ScaleConfig>;
 
-/**
- * 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 {
+function useBackgroundScaleDepth(groupId: string): number {
+  return useBottomSheetStore((state) => {
+    const { stackOrder, sheetsById } = state;
+
+    for (let i = 0; i < stackOrder.length; i++) {
+      const id = stackOrder[i]!;
+      const sheet = sheetsById[id];
+      if (
+        sheet &&
+        sheet.groupId === groupId &&
+        sheet.status !== 'closing' &&
+        sheet.status !== 'hidden'
+      ) {
+        return sheet.scaleBackground ? 1 : 0;
+      }
+    }
+    return 0;
+  });
+}
+
+function useSheetScaleDepth(
+  groupId: string,
+  sheetId: string | undefined
+): number {
   const prevDepthRef = useRef(0);
 
-  const scaleDepthSelector = (state: BottomSheetStore) => {
-    const { stackOrder, sheetsById } = state;
+  return useBottomSheetStore((state) => {
+    if (!sheetId) {
+      return 0;
+    }
 
-    const startIndex = sheetId ? stackOrder.indexOf(sheetId) + 1 : 0;
+    const { stackOrder, sheetsById } = state;
+    const sheetIndex = stackOrder.indexOf(sheetId);
 
-    if (sheetId && startIndex === 0) {
+    if (sheetIndex === -1) {
       return prevDepthRef.current;
     }
 
     let depth = 0;
-    for (let i = startIndex; i < stackOrder.length; i++) {
+    for (let i = sheetIndex + 1; i < stackOrder.length; i++) {
       const id = stackOrder[i]!;
       const sheet = sheetsById[id];
       if (
         sheet &&
         sheet.groupId === groupId &&
         sheet.scaleBackground &&
-        sheet.status !== 'closing'
+        sheet.status !== 'closing' &&
+        sheet.status !== 'hidden'
       ) {
         depth++;
-        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({ id }: { id?: string } = {}) {
   const { groupId, scaleConfig } = useBottomSheetManagerContext();
-  const scaleDepth = useScaleDepth(groupId, id);
 
   const {
     scale = DEFAULT_CONFIG.scale,
@@ -97,6 +105,14 @@ export function useScaleAnimatedStyle({ id }: { id?: string } = {}) {
     animation = DEFAULT_CONFIG.animation,
   } = scaleConfig ?? {};
 
+  const isBackground = id === undefined;
+
+  const backgroundDepth = useBackgroundScaleDepth(groupId);
+  const sheetDepth = useSheetScaleDepth(groupId, id);
+
+  const scaleDepth = isBackground ? backgroundDepth : sheetDepth;
+
+  // Animate the depth change
   const progress = useDerivedValue(() => {
     if (animation.type === 'spring') {
       return withSpring(scaleDepth, animation.config);