SoftZen / react-native-bouncy-drawer

Bouncy drawer for React Native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-native-bouncy-drawer

Customizable bouncy drawer for React Native

NPM

example drawer

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

About

Bouncy drawer for React Native

License:MIT License


Languages

Language:JavaScript 55.0%Language:Objective-C 26.0%Language:Python 10.2%Language:Java 8.8%