JSPM – react-native-side-menu@0.9.3

Package Exports

react-native-side-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-side-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

react-native-side-menu