Skip to content

Benmidi/react-native-side-menu

 
 

Repository files navigation

Customizable side menu for react-native

Content

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

About

Simple customizable component to create side menu

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 82.6%
  • Objective-C 17.4%