Home

Awesome

USAGE WARNING

This module is not as performant as it should be. For production applications we generally recommend using either React Native Side Menu or React Navigation as applicable. React Native Drawer will continue to be available and potentially useful for its high customizability but again it is not recommended for production appliciations. If you are interested in revamping react native drawer to be more performant (i.e. use Animated) please get in touch!

React Native Drawer

<img width="220px" align="right" src="https://raw.githubusercontent.com/rt2zz/react-native-drawer/master/examples/rn-drawer.gif" />

React native drawer, configurable to achieve material design style, slack style, parallax, and more. Works in both iOS and Android.

npm version npm downloads

Installation

npm install --save react-native-drawer

Usage

import Drawer from 'react-native-drawer'

class Application extends Component {  
  closeControlPanel = () => {
    this._drawer.close()
  };
  openControlPanel = () => {
    this._drawer.open()
  };
  render () {
    return (
      <Drawer
        ref={(ref) => this._drawer = ref}
        content={<ControlPanel />}
        >
        <MainView />
      </Drawer>
    )
  }
})

Examples

//Parallax Effect (slack style)
<Drawer
  type="static"
  content={<ControlPanel />}
  openDrawerOffset={100}
  styles={drawerStyles}
  tweenHandler={Drawer.tweenPresets.parallax}
  >
    <Main />
</Drawer>

//Material Design Style Drawer
<Drawer
  type="overlay"
  content={<ControlPanel />}
  tapToClose={true}
  openDrawerOffset={0.2} // 20% gap on the right side of drawer
  panCloseMask={0.2}
  closedDrawerOffset={-3}
  styles={drawerStyles}
  tweenHandler={(ratio) => ({
    main: { opacity:(2-ratio)/2 }
  })}
  >
    <Main />
</Drawer>

const drawerStyles = {
  drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
  main: {paddingLeft: 3},
}

Props

This module supports a wide range of drawer styles, and hence has a lot of props.

Important
Animation / Tween

Note: In the future animations with use Animated, and the api will change.

Event Handlers
Gestures
Additional Configurations

Tween Handler

You can achieve pretty much any animation you want using the tween handler with the transformMatrix property. E.G.

tweenHandler={(ratio) => {
  var r0 = -ratio/6
  var r1 = 1-ratio/6
  var t = [
             r1,  r0,  0,  0,
             -r0, r1,  0,  0,
             0,   0,   1,  0,
             0,   0,   0,  1,
          ]
  return {
    main: {
      style: {
        transformMatrix: t,
        opacity: 1 - ratio/2,
      },
    }
  }
}}

Will result in a skewed fade out animation.

Opening & Closing the Drawer Programmatically

Three options:

  1. Use the open prop (controlled mode):

    <Drawer
  open={true}

  2. Using the Drawer Ref:

    // assuming ref is set up on the drawer as (ref) => this._drawer = ref
onPress={() => {this._drawer.open()}}

  3. Using Context

    contextTypes = {drawer: React.PropTypes.object}
// later...
this.context.drawer.open()

Demo

Credits

Component was adapted from and inspired by @khanghoang's RNSideMenu AND @kureevalexey's react-native-side-menu