Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/SoftZen/react-native-bouncy-drawer

Bouncy drawer for React Native
https://github.com/SoftZen/react-native-bouncy-drawer

Last synced: 28 days ago
JSON representation

Bouncy drawer for React Native

Lists

README 

        

[![](https://img.shields.io/npm/dm/react-native-bouncy-drawer.svg?style=flat-square)](https://www.npmjs.com/package/react-native-bouncy-drawer)



# react-native-bouncy-drawer

Customizable bouncy drawer for React Native



[![NPM](https://nodei.co/npm/react-native-bouncy-drawer.png)](https://www.npmjs.com/package/react-native-bouncy-drawer)



example drawer



Installation

---

```javascript

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

```

then

```javascript

import BouncyDrawer from 'react-native-bouncy-drawer'



/*...*/



render() {

  return (

     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