Customizable side menu for react-native

Content

• Installation
• Usage example
• Component props
• Special thanks
• Questions?

Installation

npm install react-native-side-menu

Usage example

var SideMenu = require('react-native-side-menu');

var ContentView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
});

var Application = React.createClass({
  render: function() {
    var menu = <Menu navigator={navigator}/>;

    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
});

Clicking on any menu item should cause closing menu. It can be done by using menuActions which are passed thru props to menu component. Example looks like this:

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.navigator.push({...});
  },

  render: function() {
    return (
      <View>
        <Text>Menu</Text>
        <Text onPress={this.about}>About</Text>
      </View>
    );
  }
});

menuActions consists of following method(s):

• close (Void) - Close menu
• toggle (Void) - Toggle menu (close / open)
• open (Void) - Open menu

Component props

• menu (React.Component) - Menu component
• animation (spring|linear|easeInOut) - Type of slide animation. Default is "linear".
• openMenuOffset (Number) - Content view left margin if menu is opened
• hiddenMenuOffset (Number) - Content view left margin if menu is hidden
• toleranceX (Number) - X axis tolerance
• toleranceY (Number) - Y axis tolerance
• disableGestures (Bool) - Disable whether the menu can be opened with gestures or not
• onChange (Function) - Callback on menu open/close. Is passed isOpen as an argument.
• menuPosition (String) - either 'left' or 'right', defaults to 'left'
• touchToClose (Bool) - Allows for touching the partially hidden view to close the menu. Defaults to false.

In progress

Special thanks

Creating this component has been inspired by @khanghoang's RNSideMenu example.

Also, thanks to @ericvicenti for help with figuring out with setNativeProps

Questions?

Feel free to contact me in twitter or create an issue