Skip to content
Side menu component for React Native
Branch: master
Clone or download
Latest commit 8169e58 Feb 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Remove build folder from git Sep 9, 2017
examples/Basic Update examples folder Jul 19, 2017
.babelrc Add a build pipeline Jul 16, 2017
.eslintignore Convert to modern JS Jul 15, 2017
.eslintrc Update example Jul 15, 2017
.flowconfig Convert to modern JS Jul 15, 2017
.gitignore
.npmignore
LICENSE Initial commit Apr 4, 2015
README.md
build.sh
index.js Added onAnimationComplete callback Feb 22, 2018
libdefs.js Convert to modern JS Jul 15, 2017
package.json Release v1.1.3. Sep 9, 2017
styles.js
yarn.lock Add a build pipeline Jul 16, 2017

README.md

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
onAnimationComplete none (Function -> Void) Function that accept 1 optional argument (event):
- event you should this to capture the animation event after the animation has successfully completed
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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.