react-native-bottom-sheet-stack 1.6.0 → 1.7.0

package/src/useScaleAnimation.ts

@@ -2,14 +2,18 @@ import { useRef } from 'react';
 import {
   useAnimatedStyle,
   useDerivedValue,
+  withSpring,
   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 =
+  | { type: 'timing'; config?: WithTimingConfig }
+  | { type: 'spring'; config?: WithSpringConfig };
+
 export interface ScaleConfig {
   /** Scale factor when sheet is open (default: 0.92) */
   scale?: number;
@@ -17,76 +21,104 @@ export interface ScaleConfig {
   translateY?: number;
   /** Border radius when sheet is open (default: 12) */
   borderRadius?: number;
-  /** Animation duration in ms (default: 300) */
-  duration?: number;
+  /** Animation config - timing or spring (default: timing with 300ms duration) */
+  animation?: ScaleAnimationConfig;
 }
 
-const DEFAULT_CONFIG: Required<ScaleConfig> = {
+const DEFAULT_ANIMATION: ScaleAnimationConfig = {
+  type: 'timing',
+  config: { duration: 300 },
+};
+
+const DEFAULT_CONFIG = {
   scale: 0.92,
   translateY: 10,
   borderRadius: 12,
-  duration: 300,
-};
+  animation: DEFAULT_ANIMATION,
+} satisfies Required<ScaleConfig>;
+
+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.scaleBackground &&
+        sheet.status !== 'closing' &&
+        sheet.status !== 'hidden'
+      ) {
+        return 1;
+      }
+    }
+    return 0;
+  });
+}
 
-/**
- * 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 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,
     translateY = DEFAULT_CONFIG.translateY,
     borderRadius = DEFAULT_CONFIG.borderRadius,
-    duration = DEFAULT_CONFIG.duration,
+    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(() => {
-    return withTiming(scaleDepth, { duration });
+    if (animation.type === 'spring') {
+      return withSpring(scaleDepth, animation.config);
+    }
+    return withTiming(scaleDepth, animation.config);
   });
 
   return useAnimatedStyle(() => {

package/src/useSheetRenderData.ts

@@ -0,0 +1,74 @@
+import { shallow } from 'zustand/shallow';
+import {
+  useBottomSheetStore,
+  type BottomSheetState,
+} from './bottomSheet.store';
+import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
+
+export interface SheetRenderItem {
+  id: string;
+  stackIndex: number;
+  isActive: boolean;
+}
+
+/**
+ * Returns a flat list of sheets to render.
+ *
+ * Each sheet appears exactly once - this prevents React from
+ * unmounting/remounting when a sheet transitions between states.
+ *
+ * Render order:
+ * 1. Hidden persistent sheets (keepMounted=true, not in stack)
+ * 2. Active sheets (in stackOrder)
+ */
+export function useSheetRenderData(): SheetRenderItem[] {
+  const { groupId } = useBottomSheetManagerContext();
+
+  return useBottomSheetStore((state) => {
+    const hiddenPersistent = getHiddenPersistentSheets(state, groupId);
+    const active = getActiveSheets(state, groupId);
+
+    return [...hiddenPersistent, ...active];
+  }, shallow);
+}
+
+function getHiddenPersistentSheets(
+  state: { sheetsById: Record<string, BottomSheetState>; stackOrder: string[] },
+  groupId: string
+): SheetRenderItem[] {
+  const inStack = new Set(state.stackOrder);
+
+  return Object.values(state.sheetsById)
+    .filter((sheet) => isHiddenPersistent(sheet, groupId, inStack))
+    .map((sheet) => ({
+      id: sheet.id,
+      stackIndex: -1,
+      isActive: false,
+    }));
+}
+
+function isHiddenPersistent(
+  sheet: BottomSheetState,
+  groupId: string,
+  inStack: Set<string>
+): boolean {
+  const belongsToGroup = sheet.groupId === groupId;
+  const isPersistent = sheet.keepMounted === true;
+  const isHidden = sheet.status === 'hidden';
+  const isNotInStack = !inStack.has(sheet.id);
+
+  return belongsToGroup && isPersistent && isHidden && isNotInStack;
+}
+
+function getActiveSheets(
+  state: { sheetsById: Record<string, BottomSheetState>; stackOrder: string[] },
+  groupId: string
+): SheetRenderItem[] {
+  return state.stackOrder
+    .filter((id) => state.sheetsById[id]?.groupId === groupId)
+    .map((id, index) => ({
+      id,
+      stackIndex: index,
+      isActive: true,
+    }));
+}