Customizable bouncy drawer for React Native
$ 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
| 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' |
MIT