@th3rdwave/react-navigation-bottom-sheet

Bottom sheet navigator for React Navigation.

Integrates @gorhom/bottom-sheet with 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 react-native-reanimated and react-native-gesture-handler.

Usage

`js
import { createBottomSheetNavigator } from "@th3rdwave/react-navigation-bottom-sheet";

// ...

const BottomSheet = createBottomSheetNavigator();

// Default options
screenOptions={{ snapPoints: ["60%", "90%"] }}
>
{/ The first screen should be your app content /}


name="secondSheet"
component={SecondSheetComponent}
// Can pass any prop from @gorhom/bottom-sheet's BottomSheetModal
options={{ snapPoints: [200, "100%"], index: 1 }}
/>
;

// ...

// Open like any regular react-navigation screen.
navigation.navigate("firstSheet", { id: 1 });

`

See the example app for full usage details.

API

$3

#### 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 for full documentation.

$3

Navigation helpers are available on the navigation object.

#### snapTo

`ts
(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