https://github.com/th3rdwave/react-navigation-bottom-sheet
https://github.com/th3rdwave/react-navigation-bottom-sheet
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/th3rdwave/react-navigation-bottom-sheet
- Owner: th3rdwave
- License: mit
- Created: 2022-06-11T18:11:47.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-01T03:32:13.000Z (about 2 years ago)
- Last Synced: 2025-05-10T14:18:00.044Z (about 1 year ago)
- Language: TypeScript
- Size: 313 KB
- Stars: 443
- Watchers: 3
- Forks: 24
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @th3rdwave/react-navigation-bottom-sheet
Bottom sheet navigator for React Navigation.
Integrates [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) with [React Navigation](https://github.com/react-navigation/react-navigation).
## Installation
```sh
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](https://gorhom.github.io/react-native-bottom-sheet/#dependencies) react-native-reanimated and react-native-gesture-handler.
## Usage
```js
import { createBottomSheetNavigator } from "@th3rdwave/react-navigation-bottom-sheet";
// ...
const BottomSheet = createBottomSheetNavigator();
{/* The first screen should be your app content */}
;
// ...
// Open like any regular react-navigation screen.
navigation.navigate("firstSheet", { id: 1 });
```
See the [example app](./example/src/SimpleExample.tsx) for full usage details.
## API
### Navigation options
#### `snapPoints`
```ts
Array
```
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](https://gorhom.github.io/react-native-bottom-sheet/modal/props) for full documentation.
### Navigation helpers
Navigation helpers are available on the `navigation` object.
#### `snapTo`
```ts
(index: number) => void
```
Snaps the current sheet to `index`.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT