@nzws/react-navigation-bottom-sheet
v0.2.3-2023-03-19
Published
Bottom sheet component for React Navigation
Downloads
5
Readme
@th3rdwave/react-navigation-bottom-sheet
Bottom sheet navigator for React Navigation.
Integrates @gorhom/bottom-sheet with React Navigation.
Installation
yarn add @th3rdwave/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheet
If 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.
Usage
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.
API
Navigation options
snapPoints
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%']
.
Other options
Most props from BottomSheetModal
are exposed as navigation options. See the @gorhom/bottom-sheet website for full documentation.
Navigation helpers
Navigation helpers are available on the navigation
object.
snapTo
(index: number) => void
Snaps the current sheet to index
.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT