❇️ You can use useBottomSheet hook to control the bottom sheet from any component.
❇️ BottomSheetProvider higher order component helps to maintain clean code.
❇️ This package uses react-native-reanimated and react-native-gesture-handler for best performance.
❇️ All the animations are running on the main thread.
❇️ Customize the BottomSheet component the way you want. Pass props "globally" or override global props "locally".
Go ahead, fork the repo, and create many pull requests. 😄 😄
install the package by running the below command
npm install react-native-bottom-sheet-hook
or
yarn add react-native-bottom-sheet-hook
Note: Since this package uses
react-native-reanimatedandreact-native-gesture-handler, please follow the below steps
Wrap your root component with GestureHandlerRootView as below,
import { GestureHandlerRootView } from "react-native-gesture-handler";
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<NavigationContainer>
<Stacks/>
</NavigationContainer>
</GestureHandlerRootView>
)
Add react-native-reanimated/plugin plugin to your babel.config.js
module.exports = {
presets: [
... // don't add it here :)
],
plugins: [
...
// has to be listed last.
'react-native-reanimated/plugin',
],
};
Wrap your screen component or the root component with BottomSheetProvider
import { BottomSheetProvider } from 'react-native-bottom-sheet-hook';
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetProvider>
<NavigationContainer>
<Stacks/>
</NavigationContainer>
</BottomSheetProvider>
</GestureHandlerRootView>
import the useBottomSheet and use show and hide functions.
You need to pass the component to show in the bottom sheet as the argument to show function.
import React from "react";
import { View, StyleSheet, Button, Text } from "react-native";
import { useBottomSheet } from "react-native-bottom-sheet-hook";
export default function HomeScreen() {
const { show, hide } = useBottomSheet();
const renderBottomSheetComponent = () => {
return (
<View style={{ alignItems: "center" }}>
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Welcome to</Text>
<Text style={{ fontSize: 18, fontWeight: "bold", marginTop: 20 }}>
React Native Bottom Sheet Hook
</Text>
<Text style={{marginTop: 40, fontSize: 16}}>Use the "useBottomSheet" hook to control me</Text>
<Button title="Close" color='red' onPress={hide} />
</View>
);
};
const handlePress = () => {
show(renderBottomSheetComponent(), { height: 300 });
};
return (
<View style={styles.container}>
<Button title="Show bottom sheet" onPress={handlePress} />
</View>
);
}
| Prop name | type | required | description | default value |
|---|---|---|---|---|
| hideHandle | boolean | N | Hide the handle of the bottom sheet | false |
| hideBackground | boolean | N | Hide the background of the bottom sheet | false |
| backgroundColor | string | N | Change the background color of the bottom sheet | '#303133' |
| containerStyle | StyleProp | N | Change the container style of the bottom sheet | undefined |
| height | number | N | Height of the bottom sheet | DEVICE_HEIGHT * 0.4 |
| Argument name | type | required | description | default value |
|---|---|---|---|---|
| component | ReactElement | Y | Component to render inside the BottomSheet
|
|
| config | Configurations | N | Set configurations for the BottomSheet component. Additionally, if you have set global configurations through BottomSheetProvider props, you can override them here |
false |
| Prop name | type | required | description | default value |
|---|---|---|---|---|
| hideHandle | boolean | N | Hide the handle of the bottom sheet | false |
| hideBackground | boolean | N | Hide the background of the bottom sheet | false |
| backgroundColor | string | N | Change the background color of the bottom sheet | '#303133' |
| containerStyle | StyleProp | N | Change the container style of the bottom sheet | undefined |
| height | number | N | Height of the bottom sheet | DEVICE_HEIGHT * 0.4 |
