A lightweight and highly performant bottom drawer for react native
source link: https://reactnativeexample.com/a-lightweight-and-highly-performant-bottom-drawer-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native Animated Bottom Drawer
A lightweight and highly performant bottom drawer for react native
Features
- Extremely lightweight (~15kb) and highly performant
- Support for snapping (multi level bottom drawer)
- Smooth Animations and Gestures
- Completely Customisable
useBottomDrawer
hook to allow the bottom drawer children to access bottom drawer methods- Written in Typescript
Installation
using npm
npm i react-native-animated-bottom-drawer
using yarn
yarn add react-native-animated-bottom-drawer
Usage
import React, { useRef } from "react";
import { View, Text, StyleSheet } from "react-native";
import BottomDrawer, {
BottomDrawerMethods,
} from "react-native-animated-bottom-drawer";
const App = () => {
// ref
const bottomDrawerRef = useRef<BottomDrawerMethods>(null);
// renders
return (
<View style={styles.container}>
<BottomDrawer ref={bottomDrawerRef} openOnMount>
<View style={styles.contentContainer}>
<Text>Awesome 🎉</Text>
</View>
</BottomDrawer>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "grey",
},
contentContainer: {
flex: 1,
alignItems: "center",
},
});
export default App;
Available Props
Name | Type | Default | Description | Required |
---|---|---|---|---|
gestureMode |
handle content none |
handle |
This prop determines where to apply the gestures | No |
openDuration |
number |
450 |
Animation duration when the bottom drawer is opened | No |
closeDuration |
number |
300 |
Animation duration when the bottom drawer is closed | No |
onOpen |
function |
null |
Callback function when the bottom drawer is opened | No |
onClose |
function |
null |
Callback function when the bottom drawer is closed | No |
onBackdropPress |
boolean |
true |
Callback function when the backdrop is pressed | No |
closeOnPressBack |
boolean |
true |
Setting this true will allow the bottom drawer to close when hardware back is pressed (only on android) | No |
closeOnBackdropPress |
boolean |
true |
Setting this true will allow the bottom drawer to close when backdrop is pressed | No |
openOnMount |
boolean |
false |
Setting this true will automatically open the bottom drawer when the parent component is mounted | No |
enableSnapping |
boolean |
false |
Set this to true when you want to snap the bottom drawer to multiple heights | No |
snapPoints |
number[] |
[400] |
Array of bottom sheet heights | Yes, if enableSnapping is true |
backdropColor |
string |
#000 |
Set this to true when you want to snap the bottom drawer to multiple heights | No |
customStyles |
object |
{} |
Add your custom styles here! | No |
backdropOpacity |
number |
0.5 |
Opacity of the backdrop | No |
Available Methods
These methods can be accessed by bottom drawer reference or useBottomDrawer
hook.
open
Opens the bottom drawer
type open = (
// open at provided sheetHeight
sheetHeight?: number
) => void;
NOTE: sheetHeight
is only read when enableSnapping
is set to false
If enableSnapping
is true
, then the bottom sheet will be opened at index 0 out of snapPoints
.
close
Closes the bottom drawer
type close = () => void;
snapToPosition
Snaps the bottom drawer to given position
type snapToPostion = (
sheetHeight: number
) => void;
snapToIndex
Snaps the bottom drawer to given index out of snapPoints (requires enableSnapping
to be true
)
type snapToIndex = (
index: number
) => void;
NOTE: This method is only accessible when enableSnapping
is set to true
.
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK