GithubHelp home page GithubHelp logo

rn-drawer's Introduction

React Native Drawer

Configurable react native pull out drawer. Supports displace, overlay (material design) static (slack style) transitions modes, as well as custom tweens.


npm install rn-drawer


var Drawer = require('rn-drawer')

var Application = React.createClass({
  closeControlPanel: function(){
  openControlPanel: function(){
  render: function() {
    return (
        content={<ControlPanel />}
        <MainView />

If you want to close the drawer programmatically, use the closeDrawer & openDrawer methods. There is also a drawerActions prop provided to the drawer component, but this may be removed in future versions.


//Material Design Style Overlay Drawer
  openDrawerOffset={50} //50px gap on the right side of drawer
  panCloseMask={1} //can close with right to left swipe anywhere on screen
    drawer: {
      shadowColor: "#000000",
      shadowOpacity: 0.8,
      shadowRadius: 0,
  tweenHandler={(ratio) => {
    return {
      drawer: { shadowRadius: Math.min(ratio*5*5, 5) },
      main: { opacity:(2-ratio)/2 },
  content={<Menu />}
    <Main />

//Slack Style Static Drawer
  openDrawerOffset={100} //100px gap on the right side of drawer
  openDrawerThreshold={.3} //pan must travel 30% to trigger open/close action on release
  panOpenMask={.05} //open pan must originate in far left (5%) of screen
  panCloseMask={.3} //can close with right to left swipe in right hand third of screen
  content={<Menu />}
    <Main />

//Simple Navigation Style Displacement, Starting Open
  content={<Menu />}
    <Main />


This module supports a wide range of drawer styles, and hence has a lot of props. It may help to package up presets as separate modules.


  • content (React.Component) null - Menu component
  • type (String: displace:overlay:static) displace- Type of drawer.
  • openDrawerOffset (Number) 0 - Can either be a integer (pixel value) or decimal (ratio of screen width). Defines the right hand margin when the drawer is open.
  • closedDrawerOffset (Number) 0 - Same as openDrawerOffset, except defines left hand margin when drawer is closed.
  • disabled (Boolean) false - If true the drawer can not be opened and will not respond to pans.

Animation / Tween

  • animation (String: spring|linear|easeInOut) linear - Type of slide animation.
  • tweenHandler (Function) null - Takes in the pan ratio (decimal 0 to 1) that represents the tween percent. Returns and object of native props to be set on the constituent views { drawer: {/native props/}, main: {/native props/} }

Additional Configurations

  • openDrawerThreshold (Number) .25 - Ratio of screen width that must be travelled to trigger a drawer open/close
  • panOpenMask (Number) .05 - Ratio of screen width that is valid for the start of a pan open action. Make this number small if you need pans to propagate to children.
  • panCloseMask (Number) .25 - Ratio of screen width that is valid for the start of a pan close action. Make this number small if you need pans to propagate to children.
  • relativeDrag (Boolean) true - true -> open/close calculation based on pan dx : false -> calculation based on absolute pan position (i.e. touch location)
  • panStartCompensation (Boolean) false - true -> drawer will catch up to pan position
  • initializeOpen (Boolean) false - true -> drawer will start open

Props are a work in progress, suggestions welcome.
@TODO support right hand drawer and multiple drawers.


git clone
Open ``./examples/iosDemo/rndrawereg.xcodeprojectin xcode command+r`


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

rn-drawer's People


rt2zz avatar


 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.