Customizable side menu for react-native

Content

• Installation
• Usage example
• Component props
• Questions?

Installation

npm install react-native-side-menu

Usage example

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

class ContentView extends React.Component {
  render() {
    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>
    );
  }
}

class Application extends React.Component {
  render() {
    const menu = <Menu navigator={navigator}/>;

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

Component props

• menu (React.Component) - Menu component
• isOpen (Boolean) - Props driven control over menu open state
• openMenuOffset (Number) - Content view left margin if menu is opened, defaults to 2/3 of device screen width
• hiddenMenuOffset (Number) - Content view left margin if menu is hidden
• edgeHitWidth (Number) - Edge distance on content view to open side menu, defaults to 60
• toleranceX (Number) - X axis tolerance
• toleranceY (Number) - Y axis tolerance
• disableGestures (Bool) - Disable whether the menu can be opened with gestures or not
• onStartShouldSetResponderCapture (Function) - Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details
• onChange (Function) - Callback on menu open/close. Is passed isOpen as an argument
• menuPosition (String) - either 'left' or 'right', defaults to 'left'
• animationFunction (Function -> Object) - Function that accept 2 arguments (prop, value) and return an object:
  • prop you should use at the place you specify parameter to animate
  • value you should use to specify the final value of prop
• animationStyle (Function -> Object) - Function that accept 1 argument (value) and return an object:
  • value you should use at the place you need current value of animated parameter (left offset of content view)
• bounceBackOnOverdraw - when true, content view will bounce back to openMenuOffset when dragged further, defaults to true

FAQ

ScrollView does not scroll to top on status bar press

On iPhone, the scroll-to-top gesture has no effect if there is more than one scroll view on-screen that has scrollsToTop set to true. Since it defaults to true in ReactNative, you have to set scrollsToTop={false} on your ScrollView inside Menu component in order to get it working as desired.

Questions?

Feel free to contact me in twitter or create an issue