Wondering what’s next for npm?Check out our public roadmap! »

    react-native-side-menu
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-side-menu package

    1.1.3 • Public • Published

    Customizable side menu for react-native

    Content

    Installation

    npm install react-native-side-menu --save

    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

    prop default type description
    menu inherited React.Component Menu component
    isOpen false Boolean Props driven control over menu open state
    openMenuOffset 2/3 of device screen width Number Content view left margin if menu is opened
    hiddenMenuOffset none Number Content view left margin if menu is hidden
    edgeHitWidth none Number Edge distance on content view to open side menu, defaults to 60
    toleranceX none Number X axis tolerance
    toleranceY none Number Y axis tolerance
    disableGestures false Bool Disable whether the menu can be opened with gestures or not
    onStartShould
    SetResponderCapture
    none 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 none Function Callback on menu open/close. Is passed isOpen as an argument
    onMove none Function Callback on menu move. Is passed left as an argument
    onSliding none Function Callback when menu is sliding. It returns a decimal from 0 to 1 which represents the percentage of menu offset between hiddenMenuOffset and openMenuOffset.
    menuPosition left String either 'left' or 'right'
    animationFunction none (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 none (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 true boolean when true, content view will bounce back to openMenuOffset when dragged further
    autoClosing true boolean When true, menu close automatically as soon as an event occurs

    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

    Install

    npm i react-native-side-menu

    DownloadsWeekly Downloads

    3,861

    Version

    1.1.3

    License

    MIT

    Last publish

    Collaborators

    • avatar