react-native-bouncy-drawer
Customizable bouncy drawer for React Native
Installation
$ npm install react-native-bouncy-drawer --savethen
import BouncyDrawer from 'react-native-bouncy-drawer' /*...*/ render() { return ( <BouncyDrawer willOpen={() => 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
