react-native-bottom-sheet-stack 1.7.4 → 1.7.5

package/src/QueueItem.tsx

@@ -1,17 +1,16 @@
-import { memo, useEffect } from 'react';
+import { memo, useEffect, type PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { PortalHost } from 'react-native-teleport';
 
-import { cleanupAnimatedIndex } from './animatedRegistry';
+import { cleanupAnimatedIndex, getAnimatedIndex } from './animatedRegistry';
 import { BottomSheetContext } from './BottomSheet.context';
 import {
   useSheetContent,
-  useSheetUsePortal,
   useSheetKeepMounted,
   useSheetPortalSession,
-  useStartClosing,
+  useSheetUsePortal,
 } from './bottomSheet.store';
 import { BottomSheetBackdrop } from './BottomSheetBackdrop';
 import { cleanupSheetRef } from './refsMap';
@@ -32,10 +31,10 @@ export const QueueItem = memo(function QueueItem({
   const usePortal = useSheetUsePortal(id);
   const keepMounted = useSheetKeepMounted(id);
   const portalSession = useSheetPortalSession(id);
-  const startClosing = useStartClosing();
 
   const { width, height } = useSafeAreaFrame();
-  const scaleStyle = useSheetScaleAnimatedStyle(id);
+
+  const animatedIndex = getAnimatedIndex(id);
 
   useEffect(() => {
     return () => {
@@ -47,6 +46,10 @@ export const QueueItem = memo(function QueueItem({
   const backdropZIndex = stackIndex * 2;
   const contentZIndex = stackIndex * 2 + 1;
 
+  if (!animatedIndex) {
+    return null;
+  }
+
   return (
     <>
       {isActive && (
@@ -54,19 +57,11 @@ export const QueueItem = memo(function QueueItem({
           style={[StyleSheet.absoluteFillObject, { zIndex: backdropZIndex }]}
           pointerEvents="box-none"
         >
-          <BottomSheetBackdrop sheetId={id} onPress={() => startClosing(id)} />
+          <BottomSheetBackdrop sheetId={id} />
         </View>
       )}
 
-      <Animated.View
-        pointerEvents="box-none"
-        style={[
-          StyleSheet.absoluteFillObject,
-          styles.container,
-          { width, height, zIndex: contentZIndex },
-          scaleStyle,
-        ]}
-      >
+      <ScaleWrapper id={id} zIndex={contentZIndex}>
         {usePortal ? (
           <PortalHost
             name={`bottomsheet-${id}-${portalSession}`}
@@ -77,11 +72,27 @@ export const QueueItem = memo(function QueueItem({
             {content}
           </BottomSheetContext.Provider>
         )}
-      </Animated.View>
+      </ScaleWrapper>
     </>
   );
 });
 
-const styles = StyleSheet.create({
-  container: {},
-});
+const ScaleWrapper = ({
+  id,
+  zIndex,
+  children,
+}: PropsWithChildren<{
+  id: string;
+  zIndex: number;
+}>) => {
+  const scaleStyle = useSheetScaleAnimatedStyle(id);
+
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      style={[StyleSheet.absoluteFillObject, { zIndex }, scaleStyle]}
+    >
+      {children}
+    </Animated.View>
+  );
+};

package/src/animatedRegistry.ts

@@ -2,18 +2,26 @@ 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.
+ * AnimatedIndex is created eagerly in store actions (open/mount)
+ * before any component renders, ensuring it's always available.
  */
 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);
+export function ensureAnimatedIndex(sheetId: string): SharedValue<number> {
+  const existing = animatedIndexRegistry.get(sheetId);
+  if (existing) {
+    return existing;
   }
 
+  const animatedIndex = makeMutable(-1);
+  animatedIndexRegistry.set(sheetId, animatedIndex);
+  return animatedIndex;
+}
+
+export function getAnimatedIndex(
+  sheetId: string
+): SharedValue<number> | undefined {
+  const animatedIndex = animatedIndexRegistry.get(sheetId);
   return animatedIndex;
 }
 
@@ -28,3 +36,11 @@ export function cleanupAnimatedIndex(sheetId: string): void {
 export function __resetAnimatedIndexes(): void {
   animatedIndexRegistry.clear();
 }
+
+/**
+ * Get all animated indexes for debugging.
+ * @internal
+ */
+export function __getAllAnimatedIndexes(): Map<string, SharedValue<number>> {
+  return animatedIndexRegistry;
+}

package/src/bottomSheetCoordinator.ts

@@ -45,7 +45,10 @@ export function createSheetEventHandlers(sheetId: string) {
     const state = useBottomSheetStore.getState();
     const currentStatus = state.sheetsById[sheetId]?.status;
 
-    if (toIndex === -1 && currentStatus === 'open') {
+    if (
+      toIndex === -1 &&
+      (currentStatus === 'open' || currentStatus === 'opening')
+    ) {
       startClosing(sheetId);
     }
   };

package/src/index.tsx

@@ -35,7 +35,12 @@ export type {
   BottomSheetPortalParams,
 } from './portal.types';
 
+export { useBottomSheetStore } from './bottomSheet.store';
+
 // Testing utilities (internal use)
 export { __resetSheetRefs } from './refsMap';
-export { __resetAnimatedIndexes } from './animatedRegistry';
+export {
+  __resetAnimatedIndexes,
+  __getAllAnimatedIndexes,
+} from './animatedRegistry';
 export { __resetPortalSessions } from './portalSessionRegistry';

package/src/store/store.ts

@@ -7,10 +7,10 @@ import {
   getTopSheetId,
   isActivatableKeepMounted,
   isHidden,
-  isOpening,
   removeFromStack,
   updateSheet,
 } from './helpers';
+import { ensureAnimatedIndex } from '../animatedRegistry';
 import { getNextPortalSession } from '../portalSessionRegistry';
 import type { BottomSheetState, BottomSheetStore } from './types';
 
@@ -27,6 +27,13 @@ export const useBottomSheetStore = create(
           return state;
         }
 
+        const hasOpeningInGroup = Object.values(state.sheetsById).some(
+          (s) => s.groupId === sheet.groupId && s.status === 'opening'
+        );
+        if (hasOpeningInGroup) {
+          return state;
+        }
+
         const updatedSheetsById = applyModeToTopSheet(
           state.sheetsById,
           state.stackOrder,
@@ -39,6 +46,8 @@ export const useBottomSheetStore = create(
           ? getNextPortalSession(sheet.id)
           : undefined;
 
+        ensureAnimatedIndex(sheet.id);
+
         const newSheet: BottomSheetState = existingSheet
           ? {
               ...existingSheet,
@@ -69,7 +78,7 @@ export const useBottomSheetStore = create(
     startClosing: (id) =>
       set((state) => {
         const sheet = state.sheetsById[id];
-        if (!sheet || isHidden(sheet) || isOpening(sheet)) return state;
+        if (!sheet || isHidden(sheet)) return state;
 
         let updatedSheetsById = updateSheet(state.sheetsById, id, {
           status: 'closing',
@@ -146,6 +155,8 @@ export const useBottomSheetStore = create(
       set((state) => {
         if (state.sheetsById[sheet.id]) return state;
 
+        ensureAnimatedIndex(sheet.id);
+
         // For portal-based persistent sheets, set initial portalSession
         // This session will be reused across open/close cycles
         const portalSession = sheet.usePortal

package/src/useTracePropChanges.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+export function useTracePropChanges(
+  componentName: string,
+  props: Record<string, any>
+) {
+  const prevProps = useRef(props);
+
+  useEffect(() => {
+    const allKeys = Object.keys({ ...props, ...prevProps.current });
+    allKeys.forEach((key) => {
+      if (prevProps.current[key] !== props[key]) {
+        console.log(`[${componentName}] Prop '${key}' changed.`);
+        if (
+          typeof props[key] === 'object' ||
+          typeof props[key] === 'function'
+        ) {
+          console.log(
+            `[${componentName}] New instance detected for prop '${key}'.`
+          );
+        }
+      }
+    });
+
+    prevProps.current = props;
+  });
+}