JSPM – react-native-side-menu@0.18.1

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

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

react-native-side-menu