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

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EACL,qBAAqB,EACrB,KAAK,2BAA2B,GACjC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,KAAK,2BAA2B,GACjC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,oBAAoB,EACpB,KAAK,0BAA0B,GAChC,MAAM,wBAAwB,CAAC;AAGhC,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EACL,qBAAqB,EACrB,KAAK,2BAA2B,GACjC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,KAAK,2BAA2B,GACjC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,oBAAoB,EACpB,KAAK,0BAA0B,GAChC,MAAM,wBAAwB,CAAC;AAGhC,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/typescript/src/store/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../../src/store/store.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAoB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,mBAAmB;;;;;;;;EA+J/B,CAAC"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../../src/store/store.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAoB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,mBAAmB;;;;;;;;EA0K/B,CAAC"}

package/lib/typescript/src/useTracePropChanges.d.ts

@@ -0,0 +1,2 @@
+export declare function useTracePropChanges(componentName: string, props: Record<string, any>): void;
+//# sourceMappingURL=useTracePropChanges.d.ts.map

package/lib/typescript/src/useTracePropChanges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTracePropChanges.d.ts","sourceRoot":"","sources":["../../../src/useTracePropChanges.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAsB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bottom-sheet-stack",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "Bottom Sheet Stack Manager",
   "source": "./src/index.tsx",
   "main": "lib/commonjs/index.js",

package/src/BottomSheetBackdrop.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Pressable, StyleSheet } from 'react-native';
 import Animated, {
   Extrapolation,
@@ -5,17 +6,27 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import { getAnimatedIndex } from './animatedRegistry';
+import { useStartClosing } from './store';
 
 interface BottomSheetBackdropProps {
   sheetId: string;
-  onPress?: () => void;
 }
 
-export function BottomSheetBackdrop({
-  sheetId,
-  onPress,
-}: BottomSheetBackdropProps) {
+export function BottomSheetBackdrop({ sheetId }: BottomSheetBackdropProps) {
   const animatedIndex = getAnimatedIndex(sheetId);
+  const startClosing = useStartClosing();
+
+  if (!animatedIndex) {
+    throw new Error('animatedIndex must be defined in BottomSheetBackdrop');
+  }
+
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setInitialized(true);
+    }, 64);
+  }, []);
 
   const animatedStyle = useAnimatedStyle(() => {
     const opacity = interpolate(
@@ -28,12 +39,14 @@ export function BottomSheetBackdrop({
     return { opacity };
   });
 
+  if (!initialized) {
+    return null;
+  }
+
   return (
     <Pressable
       style={StyleSheet.absoluteFillObject}
-      onPress={() => {
-        onPress?.();
-      }}
+      onPress={() => startClosing(sheetId)}
     >
       <Animated.View
         style={[StyleSheet.absoluteFillObject, animatedStyle, styles.backdrop]}

package/src/BottomSheetManaged.tsx

@@ -5,9 +5,10 @@ import BottomSheetOriginal, {
 import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import React from 'react';
 
+import { useAnimatedReaction } from 'react-native-reanimated';
 import { getAnimatedIndex } from './animatedRegistry';
-import { useBottomSheetDefaultIndex } from './BottomSheetDefaultIndex.context';
 import { createSheetEventHandlers } from './bottomSheetCoordinator';
+import { useBottomSheetDefaultIndex } from './BottomSheetDefaultIndex.context';
 import { useBottomSheetRefContext } from './BottomSheetRef.context';
 import { useBottomSheetContext } from './useBottomSheetContext';
 
@@ -39,24 +40,35 @@ export const BottomSheetManaged = React.forwardRef<
     const ref = contextRef ?? forwardedRef;
 
     const defaultIndex = useBottomSheetDefaultIndex();
+    const contextAnimatedIndex = getAnimatedIndex(id);
+
+    if (!contextAnimatedIndex) {
+      throw new Error('animatedIndex must be defined in BottomSheetManaged');
+    }
+
+    useAnimatedReaction(
+      () => contextAnimatedIndex.value,
+      (value) => {
+        externalAnimatedIndex?.set(value);
+      }
+    );
 
-    const animatedIndex = externalAnimatedIndex ?? getAnimatedIndex(id);
     const { handleAnimate, handleChange, handleClose } =
       createSheetEventHandlers(id);
 
     const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
-      fromIndex: number,
-      toIndex: number,
-      fromPosition: number,
-      toPosition: number
+      fromIndex,
+      toIndex,
+      fromPosition,
+      toPosition
     ) => {
       handleAnimate(fromIndex, toIndex);
       onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
     };
 
     const wrappedOnChange: BottomSheetProps['onChange'] = (
-      index: number,
-      position: number,
+      index,
+      position,
       type
     ) => {
       handleChange(index);
@@ -80,7 +92,7 @@ export const BottomSheetManaged = React.forwardRef<
         ref={ref}
         {...props}
         index={defaultIndex}
-        animatedIndex={animatedIndex}
+        animatedIndex={contextAnimatedIndex}
         onChange={wrappedOnChange}
         onClose={wrappedOnClose}
         onAnimate={wrappedOnAnimate}

package/src/BottomSheetPersistent.tsx

@@ -1,10 +1,16 @@
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import React, { useEffect, useRef } from 'react';
 
-import { useMount, useSheetExists, useUnmount } from './bottomSheet.store';
+import { Portal } from 'react-native-teleport';
+import { BottomSheetContext } from './BottomSheet.context';
+import {
+  useMount,
+  useSheetExists,
+  useSheetPortalSession,
+  useUnmount,
+} from './bottomSheet.store';
 import { BottomSheetDefaultIndexContext } from './BottomSheetDefaultIndex.context';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
-import { BottomSheetPortal } from './BottomSheetPortal';
 import { BottomSheetRefContext } from './BottomSheetRef.context';
 import type { BottomSheetPortalId } from './portal.types';
 import { setSheetRef } from './refsMap';
@@ -23,7 +29,7 @@ export function BottomSheetPersistent({
   const mount = useMount();
   const unmount = useUnmount();
   const sheetExists = useSheetExists(id);
-
+  const portalSession = useSheetPortalSession(id);
   const sheetRef = useRef<BottomSheetMethods>(null);
   const groupId = bottomSheetManagerContext?.groupId || 'default';
 
@@ -49,12 +55,14 @@ export function BottomSheetPersistent({
   }
 
   return (
-    <BottomSheetPortal id={id}>
-      <BottomSheetDefaultIndexContext.Provider value={{ defaultIndex: -1 }}>
-        <BottomSheetRefContext.Provider value={sheetRef}>
-          {children}
-        </BottomSheetRefContext.Provider>
-      </BottomSheetDefaultIndexContext.Provider>
-    </BottomSheetPortal>
+    <Portal hostName={`bottomsheet-${id}-${portalSession}`}>
+      <BottomSheetContext.Provider value={{ id }}>
+        <BottomSheetDefaultIndexContext.Provider value={{ defaultIndex: -1 }}>
+          <BottomSheetRefContext.Provider value={sheetRef}>
+            {children}
+          </BottomSheetRefContext.Provider>
+        </BottomSheetDefaultIndexContext.Provider>
+      </BottomSheetContext.Provider>
+    </Portal>
   );
 }

package/src/BottomSheetPortal.tsx

@@ -4,7 +4,9 @@ import React from 'react';
 import { Portal } from 'react-native-teleport';
 
 import { BottomSheetContext } from './BottomSheet.context';
-import { useSheetUsePortal, useSheetPortalSession } from './bottomSheet.store';
+import { useSheetPortalSession } from './bottomSheet.store';
+import { BottomSheetDefaultIndexContext } from './BottomSheetDefaultIndex.context';
+import { BottomSheetRefContext } from './BottomSheetRef.context';
 import type { BottomSheetPortalId } from './portal.types';
 import { getSheetRef } from './refsMap';
 
@@ -14,22 +16,23 @@ interface BottomSheetPortalProps {
 }
 
 export function BottomSheetPortal({ id, children }: BottomSheetPortalProps) {
-  const usePortal = useSheetUsePortal(id);
   const portalSession = useSheetPortalSession(id);
+  const ref = getSheetRef(id);
 
-  if (!usePortal || portalSession === undefined) {
+  if (!portalSession || !ref) {
     return null;
   }
 
-  const ref = getSheetRef(id);
-  const childWithRef = React.cloneElement(children, {
-    ref,
-  } as { ref: typeof ref });
+  const portalName = `bottomsheet-${id}-${portalSession}`;
 
   return (
-    <Portal hostName={`bottomsheet-${id}-${portalSession}`}>
+    <Portal hostName={portalName}>
       <BottomSheetContext.Provider value={{ id }}>
-        {childWithRef}
+        <BottomSheetDefaultIndexContext.Provider value={{ defaultIndex: 0 }}>
+          <BottomSheetRefContext.Provider value={ref}>
+            {children}
+          </BottomSheetRefContext.Provider>
+        </BottomSheetDefaultIndexContext.Provider>
       </BottomSheetContext.Provider>
     </Portal>
   );

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;
+  });
+}