TestDrawer.js

//github.com/infinitered/ignite

          <Drawer
            ref='drawer'
            content={this.renderDrawerContent()}
            styles={drawerStyles}
            openDrawerOffset={100}
            type='overlay'
            tapToClose
            panOpenMask={0.05}
            panCloseMask={0.3}
          >
            <Navigator
              ref={(ref) => { this.navigator = ref }}
              initialRoute={Routes.PresentationScreen}
              configureScene={Router.configureScene}
              renderScene={Router.renderScene}
              navigationBar={NavigationBar.render()}
              style={styles.container}
            />
          </Drawer>
          
  ///github.com/root-two/react-native-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>

//github.com/aksonov/react-native-router-flux
            <Drawer
                ref="navigation"
                open={state.open}
                onOpen={()=>Actions.refresh({key:state.key, open: true})}
                onClose={()=>Actions.refresh({key:state.key, open: false})}
                type="displace"
                content={<TabView />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                tweenHandler={(ratio) => ({
                 main: { opacity:Math.max(0.54,1-ratio) }
            })}>
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
            
            Props

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

Important

content (React.Component) null - Menu component
type (String: displace:overlay:static) displace- Type of drawer.
open (Boolean) null - If true will trigger drawer open, if false will trigger close.
openDrawerOffset (Number|Function) 0 - Can either be a integer (pixel value) or decimal (ratio of screen width). Defines the right hand margin when the drawer is open. Or, can be function which returns offset: (viewport) => viewport.width - 200
closedDrawerOffset (Number|Function) 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.
styles (Object) null - Styles for the drawer, main, drawerOverlay and mainOverlay container Views.
Animation / Tween

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

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/}, mainOverlay: {/native props/} }
tweenDuration (Integer) 250 - The duration of the open/close animation.
tweenEasing (String) linear - A easing type supported by tween-functions
Event Handlers

onOpen (Function) - Will be called immediately after the drawer has entered the open state.
onOpenStart (Function) callback fired at the start of an open animation.
onClose (Function) - Will be called immediately after the drawer has entered the closed state.
onCloseStart (Function) callback fired at the start of a close animation.
Gestures

captureGestures (oneOf(true, false, 'open', 'closed')) open - If true, will capture all gestures inside of the pan mask. If 'open' will only capture when drawer is open.
acceptDoubleTap (Boolean) false - Toggle drawer when double tap occurs within pan mask?
acceptTap (Boolean) false - Toggle drawer when any tap occurs within pan mask?
acceptPan (Boolean) true - Allow for drawer pan (on touch drag). Set to false to effectively disable the drawer while still allowing programmatic control.
tapToClose (Boolean) false - Same as acceptTap, except only for close.
negotiatePan (Boolean) false - If true, attempts to handle only horizontal swipes, making it play well with a child ScrollView.
Additional Configurations

panThreshold (Number) .25 - Ratio of screen width that must be travelled to trigger a drawer open/close.
panOpenMask (Number) null - Ratio of screen width that is valid for the start of a pan open action. If null -> defaults to max(.05, closedDrawerOffset).
panCloseMask (Number) null - Ratio of screen width that is valid for the start of a pan close action. If null -> defaults to max(.05, openDrawerOffset).
initializeOpen (Boolean) false - Initialize with drawer open?
side (String left|right) left - which side the drawer should be on.
useInteractionManager (Boolean) false - if true will run InteractionManager for open/close animations.
elevation (Number) 0 - (Android-only) Sets the elevation of the drawer using Android's underlying elevation API