βοΈ 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-reanimated
andreact-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 |