Bottom sheet navigator for React Navigation.
Integrates @gorhom/bottom-sheet with React Navigation.
yarn add @th3rdwave/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheetIf you don't have those already, you will also need to install the @gorhom/bottom-sheet dependencies react-native-reanimated and react-native-gesture-handler.
import { createBottomSheetNavigator } from "@th3rdwave/react-navigation-bottom-sheet"; // ... const BottomSheet = createBottomSheetNavigator(); <BottomSheet.Navigator // Default options screenOptions={{ snapPoints: ["60%", "90%"] }} > {/* The first screen should be your app content */} <BottomSheet.Screen name="app" component={MyApp} /> <BottomSheet.Screen name="firstSheet" component={FirstSheetComponent} /> <BottomSheet.Screen name="secondSheet" component={SecondSheetComponent} // Can pass any prop from @gorhom/bottom-sheet's BottomSheetModal options={{ snapPoints: [200, "100%"], index: 1 }} /> </BottomSheet.Navigator>; // ... // Open like any regular react-navigation screen. navigation.navigate("firstSheet", { id: 1 });See the example app for full usage details.
Array<string | number>Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number and string.
Defaults to ['66%'].
Most props from BottomSheetModal are exposed as navigation options. See the @gorhom/bottom-sheet website for full documentation.
Navigation helpers are available on the navigation object.
(index: number) => voidSnaps the current sheet to index.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT