fix: race condition during opening sheets

src/BottomSheetDefaultIndex.context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+interface BottomSheetDefaultIndexContextValue {
+  defaultIndex: number;
+}
+
+export const BottomSheetDefaultIndexContext =
+  createContext<BottomSheetDefaultIndexContextValue | null>(null);
+
+export function useBottomSheetDefaultIndex(): number {
+  const context = useContext(BottomSheetDefaultIndexContext);
+  // Default to 0 (open) if no provider - for regular sheets
+  return context?.defaultIndex ?? 0;
+}

src/BottomSheetManaged.tsx

@@ -6,7 +6,7 @@ import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/typ
 import React from 'react';
 
 import { getAnimatedIndex } from './animatedRegistry';
-import { useSheetStatus } from './bottomSheet.store';
+import { useBottomSheetDefaultIndex } from './BottomSheetDefaultIndex.context';
 import { createSheetEventHandlers } from './bottomSheetCoordinator';
 import { useBottomSheetRefContext } from './BottomSheetRef.context';
 import { useBottomSheetContext } from './useBottomSheetContext';
@@ -30,7 +30,6 @@ export const BottomSheetManaged = React.forwardRef<
       enablePanDownToClose = true,
       backdropComponent = nullBackdrop,
       animatedIndex: externalAnimatedIndex,
-      index: externalIndex,
       ...props
     },
     forwardedRef
@@ -39,9 +38,7 @@ export const BottomSheetManaged = React.forwardRef<
     const contextRef = useBottomSheetRefContext();
     const ref = contextRef ?? forwardedRef;
 
-    const status = useSheetStatus(id);
-    const shouldBeClosed = status === 'hidden' || status === 'closing';
-    const index = externalIndex ?? (shouldBeClosed ? -1 : 0);
+    const defaultIndex = useBottomSheetDefaultIndex();
 
     const animatedIndex = externalAnimatedIndex ?? getAnimatedIndex(id);
     const { handleAnimate, handleChange, handleClose } =
@@ -82,7 +79,7 @@ export const BottomSheetManaged = React.forwardRef<
         animationConfigs={config}
         ref={ref}
         {...props}
-        index={index}
+        index={defaultIndex}
         animatedIndex={animatedIndex}
         onChange={wrappedOnChange}
         onClose={wrappedOnClose}

src/BottomSheetPersistent.tsx

@@ -2,12 +2,13 @@ import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/typ
 import React, { useEffect, useRef } from 'react';
 
 import { useMount, useSheetExists, 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 { useEvent } from './useEvent';
 import { setSheetRef } from './refsMap';
+import { useEvent } from './useEvent';
 
 interface BottomSheetPersistentProps {
   id: BottomSheetPortalId;
@@ -49,9 +50,11 @@ export function BottomSheetPersistent({
 
   return (
     <BottomSheetPortal id={id}>
-      <BottomSheetRefContext.Provider value={sheetRef}>
-        {children}
-      </BottomSheetRefContext.Provider>
+      <BottomSheetDefaultIndexContext.Provider value={{ defaultIndex: -1 }}>
+        <BottomSheetRefContext.Provider value={sheetRef}>
+          {children}
+        </BottomSheetRefContext.Provider>
+      </BottomSheetDefaultIndexContext.Provider>
     </BottomSheetPortal>
   );
 }

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();

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