Home

Awesome

react-native-drawer-menu Build Status Coverage Status

A drawer component for React Native Application (ios / android)

Similar to drawer menu component of QQ mobile.

Examples

iOS Platform

<a href="#ios-left" id="ios-left"><img src="./GIF/ios-left-default.gif" align="left" width="200"></a>

<a href="#ios-right" id="ios-right"><img src="./GIF/ios-right-overlay.gif" width="200"/></a>

Android Platform

<a href="#android-left" id="android-left"><img src="./GIF/android-left-default.gif" align="left" width="200"></a>

<a href="#android-right" id="android-right"><img src="./GIF/android-right-overlay.gif" width="200"></a>

Usage

SUGGESTION In iOS, the drawer menu component should only be used in the top level route, because the action that swipes from left side of the screen to right is designed to pop route from navigate stack. You are supposed to avoid the conflict of the UI interactions. At least, don't use the Left drawer menu to wrap sub routes, use Right drawer menu if it's needed.

install from npm

npm install --save react-native-drawer-menu

import in project

import Drawer from 'react-native-drawer-menu';
import {Easing} from 'react-native'; // Customize easing function (Optional)
// in render function
render() {
  // prepare your drawer content
  var drawerContent = (<View style={styles.drawerContent}>
    <View style={styles.leftTop}/>
    <View style={styles.leftBottom}>
      <View><Text>Drawer Content</Text></View>
    </View>
  </View>);
  // customize drawer's style (Optional)
  var customStyles = {
    drawer: {
      shadowColor: '#000',
      shadowOpacity: 0.4,
      shadowRadius: 10
    },
    mask: {}, // style of mask if it is enabled
    main: {} // style of main board
  };
  return (
    <Drawer
      style={styles.container}
      drawerWidth={300}
      drawerContent={drawerContent}
      type={Drawer.types.Overlay}
      customStyles={{drawer: styles.drawer}}
      drawerPosition={Drawer.positions.Right}
      onDrawerOpen={() => {console.log('Drawer is opened');}}
      onDrawerClose={() => {console.log('Drawer is closed')}}
      easingFunc={Easing.ease}
    >
      <View style={styles.content}>
        <Text>{Object.values(Drawer.positions).join(' ')}</Text>
        <Text>{Object.values(Drawer.types).join(' ')}</Text>
      </View>
    </Drawer>
  );
}

Notice: The reference of the drawer is passed to drawer content element, you could use this.props.drawer to invoke Drawer's instance methods like this.props.drawer.closeDrawer()

Properties

PropertyTypeDefaultDescription
disabledBoolfalseDisable the component or not.
leftDisabledBoolfalseDisable left drawer or not.
rightDisabledBoolfalseDisable right drawer or not.
typeString‘default'Type of the drawer. default / overlay You can also use static value Drawer.types.Default / Drawer.types.Overlay.
drawerPositionString‘left'Determine where does the drawer come out. left / right / both You can also use static value Drawer.positions.Left / Drawer.positions.Right / Drawer.positions.Both.
drawerWidthNumber200The width of drawer, it’s disabled when use replace type.
drawerContentReact ComponentnullThe content of the drawer menu, default is left content.
leftDrawerContentReact ComponentnullThe content of the left drawer menu.
rightDrawerContentReact ComponentnullThe content of the right drawer menu.
durationNumber160The duration of animation to open or close drawer.
maskAlphaNumber0.4Maximum value is 0.5, the opactiy value of the mask over the main board when drawer is open. Mask can be disabled with showMask property.
showMaskBooltrueWhether show the mask when drawer is open.
customStylesObject{}Customize drawer styles. You can customize main / mask / drawer / leftDrawer / rightDrawer.
onDrawerOpenfunctionnullTriggers when drawer is totally opened.
onLeftDrawerOpenfunctionnullTriggers when the left drawer is totally opened.
onRightDrawerOpenfunctionnullTriggers when the right drawer is totally opened.
onDrawerClosefunctionnullTriggers when drawer is totally closed.
onLeftDrawerClosefunctionnullTriggers when the left drawer is totally closed.
onRightDrawerClosefunctionnullTriggers when the right drawer is totally closed.
startCaptureBoolfalseWhether to capture touch events while clicking on screen.
moveCaptureBoolfalseWhether to capture touch events while swiping over the screen.
easingFuncfunctionnullEasing function of drawer animation, default is Easing.linear. You can pass function like Easing.ease/Easing.bezier(x1, y1, x2, y2)/Easing.sin/Easing.elastic(times)/Easing.bounce etc.
responderNegotiatefunctionnullCustomize conditions to set pan responder, evt & gestureState will be passed as arguments. Default condition is left 20% area on screen in left Drawer, or right 20% area on screen in right Drawer.

Instance methods

Use ref to invoke instance methods.

MethodDescription
openDrawerOpen drawer manually
openLeftDrawerOpen left drawer manually
openRightDrawerOpen right drawer manually
closeDrawerClose drawer manually. The drawerContent has a ref of drawer instance, you can also trigger with it.
closeLeftDrawerClose left drawer manually
closeRightDrawerClose right drawer manually