Gathering detailed insights and metrics for react-native-slidable-drawer-panel
Installations
npm install react-native-slidable-drawer-panelDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.11.1
NPM Version
8.0.0
Score
39.1
Supply Chain
62.5
Quality
64.1
Maintenance
25
Vulnerability
94.3
License
Releases
Unable to fetch releases
Contributors
1
Love this project? Help keep it running — sponsor us today! 🚀
Download Statistics
Total Downloads
1,825
Last Day
1
Last Week
3
Last Month
30
Last Year
183
Maintainers
1
Package Meta Information
Latest Version
1.0.6
Package Id
react-native-slidable-drawer-panel@1.0.6
Unpacked Size
0.98 MB
Size
459.85 kB
File Count
15
NPM Version
8.0.0
Node Version
16.11.1
Total Downloads
Cumulative downloads
Total Downloads
1,825
Last Day
-50%
1
Compared to previous day
Last Week
-75%
3
Compared to previous week
Last Month
76.5%
30
Compared to previous month
Last Year
-68.9%
183
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
4
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
or
yarn add react-native-slidable-drawer-panel
Demo
Open Source, check the bottom of this page/file for contribution guidelines.
Example
Basic Example:
1import React, { useState } from 'react'; 2import { Button, SafeAreaView, StyleSheet } from 'react-native'; 3import SlidableDrawer from 'react-native-slidable-drawer-panel'; 4 5export default function App() { 6 const [showDrawer, setShowDrawer] = useState(false); 7 const [event, setEvent] = useState('none'); 8 const closeDrawer = () => { 9 setEvent('close'); 10 }; 11 const showDrawerFn = () => { 12 setShowDrawer(true); 13 }; 14 const onSlideEnd = () => { 15 setShowDrawer(false); 16 setEvent('none'); 17 }; 18 return ( 19 <SafeAreaView style={styles.container}> 20 <Button title='Show Drawer' onPress={showDrawerFn} /> 21 {showDrawer && ( 22 <SlidableDrawer 23 onSlideEnd={onSlideEnd} 24 drawerOpenSpeed={3} 25 event={event}> 26 <Button title='Close drawer' onPress={closeDrawer} /> 27 </SlidableDrawer> 28 )} 29 </SafeAreaView> 30 ); 31} 32 33const styles = StyleSheet.create({ 34 container: { 35 flex: 1, 36 backgroundColor: '#fff', 37 alignItems: 'center', 38 justifyContent: 'center', 39 }, 40});
Component Props
| Property | Type | Description |
|---|---|---|
| onSlideEnd | Function | This gets called when the drawer finishes closing |
| event | string | Value is either none 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.
No vulnerabilities found.
No security vulnerabilities found.