13
React Native slidable drawer designed using react native's Animated and PanRespo...
source link: https://reactnativeexample.com/react-native-slidable-drawer-designed-using-react-natives-animated-and-panresponder-apis/
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 Slidable Drawer Panel
React Native slidable drawer designed using react native's Animated and PanResponder APIs. Purely Typescript.
Installation
Install package by running:
npm i react-native-slidable-drawer-panel
yarn add react-native-slidable-drawer-panel
Open Source, check the bottom of this page/file for contribution guidelines.
Example
Basic Example:
import React, { useState } from 'react';
import { Button, SafeAreaView, StyleSheet } from 'react-native';
import SlidableDrawer from 'react-native-slidable-drawer-panel';
export default function App() {
const [showDrawer, setShowDrawer] = useState(false);
const [event, setEvent] = useState('none');
const closeDrawer = () => {
setEvent('close');
};
const showDrawerFn = () => {
setShowDrawer(true);
};
const onSlideEnd = () => {
setShowDrawer(false);
setEvent('none');
};
return (
<SafeAreaView style={styles.container}>
<Button title='Show Drawer' onPress={showDrawerFn} />
{showDrawer && (
<SlidableDrawer
onSlideEnd={onSlideEnd}
drawerOpenSpeed={3}
event={event}>
<Button title='Close drawer' onPress={closeDrawer} />
</SlidableDrawer>
)}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Component Props
Property Type Description onSlideEnd Function This gets called when the drawer finishes closing event string Value is eithernone or close. When the event is set to close, the drawer closes completely
backdropColor
string
A regular react native color property value
drawerHandleColor
string
A regular react native color property value
useCustomDrawer
boolean
When set to true, the children of the SlidableDrawer are treated as a replacement of the default drawer. Set this to true if you want to display your custom drawer instead. Default value is false, this means the children of the SlidableDrawer are treated as contents of the drawer
noDrawerHandle
boolean
Drawer handle isn't displayed if this is set to true
drawerHeight
number
The value you provide gets multiplied by 100 to set the drawer height to a percentage of the device's window height. Valid values are from 0 to 0 to 1. Default is 0.45
drawerBackgroundColor
string
A regular react native color property value.
drawerOpenSpeed
number
The speed at which the drawer opens (relative to time and friction) when the component renders. Values range from 1 to 5, 5 being the fastest. Default is 5.
children
React.Element
A react native component/element
Contributions
To make contributions to this project; fork and make pull requests from your fork.
There is an example app in this repository to help you test your changes, whichever way feels convenient.
Pull requests would be approved once they have been reviewed and determined to be aligned with the intended cause of the project.
GitHub
https://github.com/alishalawani/react-native-slidable-drawer-panel
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK