react-native-bouncy-drawer

Customizable bouncy drawer for React Native

Installation

$ npm install react-native-bouncy-drawer --save

then

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