Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SoftZen/react-native-bouncy-drawer
Bouncy drawer for React Native
https://github.com/SoftZen/react-native-bouncy-drawer
Last synced: 6 days ago
JSON representation
Bouncy drawer for React Native
- Host: GitHub
- URL: https://github.com/SoftZen/react-native-bouncy-drawer
- Owner: SoftZen
- License: mit
- Created: 2017-10-10T18:32:29.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-09T06:35:51.000Z (over 6 years ago)
- Last Synced: 2024-04-29T04:04:54.757Z (8 months ago)
- Language: JavaScript
- Size: 1.42 MB
- Stars: 152
- Watchers: 6
- Forks: 18
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-bouncy-drawer ★116 - Highly customizable Bouncy Drawer (Components / UI)
- awesome-reactnative-ui - react-native-bouncy-drawer - native-bouncy-drawer/blob/master/resources/example.gif)| (Others)
- awesome-react-native - react-native-bouncy-drawer ★116 - Highly customizable Bouncy Drawer (Components / UI)
- awesome-reactnative-ui - react-native-bouncy-drawer - native-bouncy-drawer/blob/master/resources/example.gif)| (Others)
- awesome-react-native - react-native-bouncy-drawer - Highly customizable Bouncy Drawer. ![](https://img.shields.io/github/stars/SoftZen/react-native-bouncy-drawer.svg?style=social&label=Star) (Components / Drawer)
- awesome-react-native - react-native-bouncy-drawer ★116 - Highly customizable Bouncy Drawer (Components / UI)
- awesome-react-native - react-native-bouncy-drawer ★116 - Highly customizable Bouncy Drawer (Components / UI)
README
[![](https://img.shields.io/npm/dm/react-native-bouncy-drawer.svg?style=flat-square)](https://www.npmjs.com/package/react-native-bouncy-drawer)
# react-native-bouncy-drawer
Customizable bouncy drawer for React Native[![NPM](https://nodei.co/npm/react-native-bouncy-drawer.png)](https://www.npmjs.com/package/react-native-bouncy-drawer)
Installation
---
```javascript
$ npm install react-native-bouncy-drawer --save
```
then
```javascript
import BouncyDrawer from 'react-native-bouncy-drawer'/*...*/
render() {
return (
console.log('will open')}
didOpen={() => console.log('did open')}
willClose={() => console.log('will close')}
didClose={() => console.log('did close')}
title="Activity"
titleStyle={{ color: '#fff', fontFamily: 'Helvetica Neue', fontSize: 20, marginLeft: -3 }}
closedHeaderStyle={{ backgroundColor: '#3F3C4C' }}
defaultOpenButtonIconColor="#fff"
defaultCloseButtonIconColor="#fff"
renderContent={this.renderContent}
openedHeaderStyle={{ backgroundColor: '#3F3C4C' }}
/>
);
}
```
Refer to the Example## Available props:
| prop | type | description |default|
| ------ | ------ | ------ | ------ |
|headerHeight | number |Height of the header|ios: 60, android: 50|
|renderContent|funtion|Content of the drawer|
|openButtonContent|React element|Custom button for opening the drawer|
|closeButtonContent|React element|Custom button for closing the drawer|
|openButtonStyle|object|Style for the button opening the drawer|
|closeButtonStyle|object|Style for the button closing the drawer|
|openedHeaderStyle|object|Style for the header inside the drawer|
|closedHeaderStyle|object|Style for the header when the drawer closed|
|openedHeaderContent|React element|Custom header inside the drawer|
|defaultOpenButtonIconColor|string|Hamburger color|#373737|
|defaultCloseButtonIconColor|string|Close icon color|#000|
|defaultOpenButtonIconSize|number|Hamburger size|26|
|defaultCloseButtonIconSize|number|Close icon size|30|
|title|string|Header title when the drawer is closed|
|titleStyle|object|Header title style when the drawer is closed|
|openFriction|number|Friction to open animation|
|openTension|number|Tension to open animation|
|openSpeed|number|Speed to open animation|
|openBounciness|number|Bounciness to open animation|
|closeFriction|number|Friction to close animation|
|closeTension|number|Tension to close animation|
|closeSpeed|number|Speed to close animation|
|closeBounciness|number|Bounciness to close animation|
|openButtonPosition|('left',right)|Position of the open button|'left'|
|closeButtonPosition|('left',right)|Position of the close button|'left'|License
----MIT