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

package/src/BottomSheetScaleView.tsx

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { useScaleAnimatedStyle } from './useScaleAnimation';
+import { useBackgroundScaleAnimatedStyle } from './useScaleAnimation';
 
 /**
  * Wraps your app content with iOS-style scale animation when a bottom sheet
@@ -19,7 +19,7 @@ import { useScaleAnimatedStyle } from './useScaleAnimation';
  * ```
  */
 export function BottomSheetScaleView({ children }: PropsWithChildren) {
-  const animatedStyle = useScaleAnimatedStyle();
+  const animatedStyle = useBackgroundScaleAnimatedStyle();
 
   return (
     <Animated.View style={[styles.container, animatedStyle]}>

package/src/QueueItem.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
@@ -15,7 +15,7 @@ import {
 } from './bottomSheet.store';
 import { BottomSheetBackdrop } from './BottomSheetBackdrop';
 import { cleanupSheetRef } from './refsMap';
-import { useScaleAnimatedStyle } from './useScaleAnimation';
+import { useSheetScaleAnimatedStyle } from './useScaleAnimation';
 
 interface QueueItemProps {
   id: string;
@@ -23,7 +23,11 @@ interface QueueItemProps {
   isActive: boolean;
 }
 
-export function QueueItem({ id, stackIndex, isActive }: QueueItemProps) {
+export const QueueItem = memo(function QueueItem({
+  id,
+  stackIndex,
+  isActive,
+}: QueueItemProps) {
   const content = useSheetContent(id);
   const usePortal = useSheetUsePortal(id);
   const keepMounted = useSheetKeepMounted(id);
@@ -31,7 +35,7 @@ export function QueueItem({ id, stackIndex, isActive }: QueueItemProps) {
   const startClosing = useStartClosing();
 
   const { width, height } = useSafeAreaFrame();
-  const scaleStyle = useScaleAnimatedStyle({ id });
+  const scaleStyle = useSheetScaleAnimatedStyle(id);
 
   useEffect(() => {
     return () => {
@@ -76,7 +80,7 @@ export function QueueItem({ id, stackIndex, isActive }: QueueItemProps) {
       </Animated.View>
     </>
   );
-}
+});
 
 const styles = StyleSheet.create({
   container: {},

package/src/bottomSheetCoordinator.ts

@@ -19,9 +19,7 @@ export function initBottomSheetCoordinator(groupId: string) {
 
         switch (status) {
           case 'opening':
-            requestAnimationFrame(() => {
-              getSheetRef(id)?.current?.expand();
-            });
+            getSheetRef(id)?.current?.expand();
             break;
           case 'hidden':
             if (ref) ref.close();

package/src/store/hooks.ts

@@ -32,6 +32,31 @@ export const useIsSheetOpen = (id: string) =>
     return status === 'open' || status === 'opening';
   }, shallow);
 
+export const useHasScaleBackgroundAbove = (id: string) =>
+  useBottomSheetStore((state) => {
+    const { stackOrder, sheetsById } = state;
+    const sheetIndex = stackOrder.indexOf(id);
+
+    if (sheetIndex === -1) {
+      return false;
+    }
+
+    // Check if any sheet above this one has scaleBackground
+    for (let i = sheetIndex + 1; i < stackOrder.length; i++) {
+      const aboveId = stackOrder[i]!;
+      const aboveSheet = sheetsById[aboveId];
+      if (
+        aboveSheet &&
+        aboveSheet.scaleBackground &&
+        aboveSheet.status !== 'closing' &&
+        aboveSheet.status !== 'hidden'
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }, shallow);
+
 // Action hooks
 
 export const useOpen = () => useBottomSheetStore((state) => state.open);

package/src/store/store.ts

@@ -33,9 +33,9 @@ export const useBottomSheetStore = create(
           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
+        const shouldGetNewPortalSession =
+          sheet.usePortal && (!existingSheet || !existingSheet.keepMounted);
+        const nextPortalSession = shouldGetNewPortalSession
           ? getNextPortalSession(sheet.id)
           : undefined;
 
@@ -46,7 +46,9 @@ export const useBottomSheetStore = create(
               scaleBackground:
                 sheet.scaleBackground ?? existingSheet.scaleBackground,
               params: sheet.params ?? existingSheet.params,
-              portalSession: nextPortalSession ?? existingSheet.portalSession,
+              portalSession: existingSheet.keepMounted
+                ? existingSheet.portalSession
+                : (nextPortalSession ?? existingSheet.portalSession),
             }
           : { ...sheet, status: 'opening', portalSession: nextPortalSession };
 
@@ -144,10 +146,16 @@ export const useBottomSheetStore = create(
       set((state) => {
         if (state.sheetsById[sheet.id]) return state;
 
+        // For portal-based persistent sheets, set initial portalSession
+        // This session will be reused across open/close cycles
+        const portalSession = sheet.usePortal
+          ? getNextPortalSession(sheet.id)
+          : undefined;
+
         return {
           sheetsById: {
             ...state.sheetsById,
-            [sheet.id]: { ...sheet, status: 'hidden' },
+            [sheet.id]: { ...sheet, status: 'hidden', portalSession },
           },
         };
       }),

package/src/useScaleAnimation.ts

@@ -38,7 +38,7 @@ const DEFAULT_CONFIG = {
 } satisfies Required<ScaleConfig>;
 
 function useBackgroundScaleDepth(groupId: string): number {
-  return useBottomSheetStore((state) => {
+  const depth = useBottomSheetStore((state) => {
     const { stackOrder, sheetsById } = state;
 
     for (let i = 0; i < stackOrder.length; i++) {
@@ -55,6 +55,7 @@ function useBackgroundScaleDepth(groupId: string): number {
     }
     return 0;
   });
+  return depth;
 }
 
 function useSheetScaleDepth(
@@ -63,7 +64,7 @@ function useSheetScaleDepth(
 ): number {
   const prevDepthRef = useRef(0);
 
-  return useBottomSheetStore((state) => {
+  const result = useBottomSheetStore((state) => {
     if (!sheetId) {
       return 0;
     }
@@ -93,10 +94,11 @@ function useSheetScaleDepth(
     prevDepthRef.current = depth;
     return depth;
   });
+  return result;
 }
 
-export function useScaleAnimatedStyle({ id }: { id?: string } = {}) {
-  const { groupId, scaleConfig } = useBottomSheetManagerContext();
+function useScaleAnimatedStyleInternal(scaleDepth: number) {
+  const { scaleConfig } = useBottomSheetManagerContext();
 
   const {
     scale = DEFAULT_CONFIG.scale,
@@ -105,14 +107,6 @@ 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);
@@ -142,3 +136,15 @@ export function useScaleAnimatedStyle({ id }: { id?: string } = {}) {
     };
   });
 }
+
+export function useBackgroundScaleAnimatedStyle() {
+  const { groupId } = useBottomSheetManagerContext();
+  const scaleDepth = useBackgroundScaleDepth(groupId);
+  return useScaleAnimatedStyleInternal(scaleDepth);
+}
+
+export function useSheetScaleAnimatedStyle(sheetId: string) {
+  const { groupId } = useBottomSheetManagerContext();
+  const scaleDepth = useSheetScaleDepth(groupId, sheetId);
+  return useScaleAnimatedStyleInternal(scaleDepth);
+}

package/src/useSheetRenderData.ts

@@ -1,4 +1,3 @@
-import { shallow } from 'zustand/shallow';
 import {
   useBottomSheetStore,
   type BottomSheetState,
@@ -11,6 +10,31 @@ export interface SheetRenderItem {
   isActive: boolean;
 }
 
+/**
+ * Deep comparison for SheetRenderItem arrays.
+ * Returns true if arrays have same items with same values.
+ */
+function sheetRenderDataEqual(
+  a: SheetRenderItem[],
+  b: SheetRenderItem[]
+): boolean {
+  if (a.length !== b.length) return false;
+
+  for (let i = 0; i < a.length; i++) {
+    const itemA = a[i]!;
+    const itemB = b[i]!;
+    if (
+      itemA.id !== itemB.id ||
+      itemA.stackIndex !== itemB.stackIndex ||
+      itemA.isActive !== itemB.isActive
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 /**
  * Returns a flat list of sheets to render.
  *
@@ -29,7 +53,7 @@ export function useSheetRenderData(): SheetRenderItem[] {
     const active = getActiveSheets(state, groupId);
 
     return [...hiddenPersistent, ...active];
-  }, shallow);
+  }, sheetRenderDataEqual);
 }
 
 function getHiddenPersistentSheets(