@yonas-valentin-dev/layerflow-gorhom
v0.1.0
Published
Gorhom Bottom Sheet Modal adapter for Layerflow.
Readme
@yonas-valentin-dev/layerflow-gorhom
Experimental (0.1.0). Covered by mocked-primitive tests only; not yet run on a device. Verify on iOS/Android before relying on it in production.
Layerflow adapter for Gorhom Bottom Sheet Modal v5.
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { GorhomBottomSheetModalRenderer } from '@yonas-valentin-dev/layerflow-gorhom';
<BottomSheetModalProvider>
<PresentationProvider system={layerflow}>
<App />
<PresentationHost adapters={{ sheet: GorhomBottomSheetModalRenderer }} />
</PresentationProvider>
</BottomSheetModalProvider>;The registry can pass any BottomSheetModalProps through modalProps, except name, children,
onChange, onDismiss, enableDismissOnClose, and stackBehavior. Layerflow keeps those six for
itself so its scheduler stays the single source of truth rather than fighting a second modal stack;
they're applied after modalProps, so a stray override can't slip through. The request reports
presented() from Gorhom's onChange once the sheet reaches a snap point, and settles from
onDismiss after the modal unmounts.
Sizing the sheet
Gorhom v5 enables dynamic sizing by default and BottomSheetModal has no default snapPoints, so
content only drives the sheet height when it is rendered inside one of Gorhom's integrated views.
Per the dynamic sizing docs, a
registry entry's component should render its content in BottomSheetView (or a
BottomSheetScrollView/BottomSheetFlatList):
import { BottomSheetView } from '@gorhom/bottom-sheet';
function ConfirmDeleteContent({ input, resolve }: Props) {
return <BottomSheetView>{/* ... */}</BottomSheetView>;
}Alternatively pass explicit snapPoints, or enableDynamicSizing: false, through modalProps.
The host app must also follow Gorhom's official setup for its provider, Gesture Handler, and Reanimated dependencies.
