Simple and fast bottom sheet for react-native. Built with react-native-reanimated and react-native-gesture-handler.
This library is compatible with Expo.
npm install @vaicar/react-native-bottom-sheetor if you use yarn:
yarn add @vaicar/react-native-bottom-sheetIf you are not using Expo, make sure to install react-native-reanimated and react-native-gesture-handler .
If you want the bottom sheet to be in front of everything (like header, bottom tabs, etc), you will have to wrap your root navigation component with the BottomSheetPortalHost component, like that:
import { BottomSheetPortalHost } from '@vaicar/react-native-bottom-sheet';
<BottomSheetPortalHost>
<Navigation ... />
</BottomSheetPortalHost> import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import BottomSheet from '@vaicar/react-native-bottom-sheet';
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.bottomSheetRef = React.createRef();
}
openBottomSheet = () => {
this.bottomSheetRef.current.open();
};
closeBottomSheet = () => {
this.bottomSheetRef.current.close();
};
render() {
return (
<View>
<TouchableOpacity
onPress={this.openBottomSheet}
>
<Text>Open bottom sheet</Text>
</TouchableOpacity>
<BottomSheet
closeOnDragDown
ref={this.bottomSheetRef}
height={400}
duration={200}
onClose={() => {
console.log('Bottom sheet closed!');
}}
onOpen={() => {
console.log('Bottom sheet opened!');
}}
>
<Text>Hello world!</Text>
</BottomSheet>
</View>
);
}
}If you're not using BottomSheetPortalHost, make sure to set the property usePortal to false.
| name | required | default | description |
|---|---|---|---|
| height | yes | Bottom sheet's height | |
| duration | no | 300 | The open/close animation's duration (in ms) |
| closeOnDragDown | no | true | Closes the bottom sheet on drag down |
| closeOnPressMask | no | true | Closes the bottom sheet when the user clicks on the background mask |
| fadeMask | no | true | fade the background when bottom sheet is opened/closed or moved |
| onClose | no | () => {} | Called when the bottom sheet finishes the closing animation. |
| onOpen | no | () => {} | Called when the bottom sheet finishes the opening animation. |
| usePortal | no | true | If true, the bottom sheet will use the BottomSheetPortalHost component, to move the bottom-sheet on top of everything. |
Opens the bottom-sheet. Returns a promise, that's resolved when the bottom sheet finishes the opening animation.
this.bottomSheetRef.current.open().then(() => {
// bottom sheet finished the opening animation
})Closes the bottom-sheet. Returns a promise, that's resolved when the bottom sheet finishes the closing animation.
this.bottomSheetRef.current.close().then(() => {
// bottom sheet finished the closing animation
})- Add examples;
- Add tests;
- Improve documentation
- Add more props to make the component more customizable.