Home

Awesome

react-native-bouncy-drawer

Customizable bouncy drawer for React Native

NPM

<img src="https://github.com/SoftZen/react-native-bouncy-drawer/blob/master/resources/example.gif" alt="example drawer" width="400"/>

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:

proptypedescriptiondefault
headerHeightnumberHeight of the headerios: 60, android: 50
renderContentfuntionContent of the drawer
openButtonContentReact elementCustom button for opening the drawer
closeButtonContentReact elementCustom button for closing the drawer
openButtonStyleobjectStyle for the button opening the drawer
closeButtonStyleobjectStyle for the button closing the drawer
openedHeaderStyleobjectStyle for the header inside the drawer
closedHeaderStyleobjectStyle for the header when the drawer closed
openedHeaderContentReact elementCustom header inside the drawer
defaultOpenButtonIconColorstringHamburger color#373737
defaultCloseButtonIconColorstringClose icon color#000
defaultOpenButtonIconSizenumberHamburger size26
defaultCloseButtonIconSizenumberClose icon size30
titlestringHeader title when the drawer is closed
titleStyleobjectHeader title style when the drawer is closed
openFrictionnumberFriction to open animation
openTensionnumberTension to open animation
openSpeednumberSpeed to open animation
openBouncinessnumberBounciness to open animation
closeFrictionnumberFriction to close animation
closeTensionnumberTension to close animation
closeSpeednumberSpeed to close animation
closeBouncinessnumberBounciness to close animation
openButtonPosition('left',right)Position of the open button'left'
closeButtonPosition('left',right)Position of the close button'left'

License

MIT