diff --git a/src/BottomSheetDefaultIndex.context.ts b/src/BottomSheetDefaultIndex.context.ts new file mode 100644 index 0000000..d551695 --- /dev/null +++ b/src/BottomSheetDefaultIndex.context.ts @@ -0,0 +1,14 @@ +import { createContext, useContext } from 'react'; + +interface BottomSheetDefaultIndexContextValue { + defaultIndex: number; +} + +export const BottomSheetDefaultIndexContext = + createContext(null); + +export function useBottomSheetDefaultIndex(): number { + const context = useContext(BottomSheetDefaultIndexContext); + // Default to 0 (open) if no provider - for regular sheets + return context?.defaultIndex ?? 0; +} diff --git a/src/BottomSheetManaged.tsx b/src/BottomSheetManaged.tsx index 52f4c5a..ef26fce 100644 --- a/src/BottomSheetManaged.tsx +++ b/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} diff --git a/src/BottomSheetPersistent.tsx b/src/BottomSheetPersistent.tsx index 2b738fc..39d257b 100644 --- a/src/BottomSheetPersistent.tsx +++ b/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 ( - - {children} - + + + {children} + + ); } diff --git a/src/bottomSheetCoordinator.ts b/src/bottomSheetCoordinator.ts index f94f603..81bc501 100644 --- a/src/bottomSheetCoordinator.ts +++ b/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(); diff --git a/src/store/store.ts b/src/store/store.ts index 4076235..bbcd1a6 100644 --- a/src/store/store.ts +++ b/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 }, }, }; }),