Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-side-menu

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-side-menu

Simple customizable component to create side menu

  • 1.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Customizable side menu for react-native

Content

  • Installation
  • Usage example
  • Component props
  • Questions?

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

propdefaulttypedescription
menuinheritedReact.ComponentMenu component
isOpenfalseBooleanProps driven control over menu open state
openMenuOffset2/3 of device screen widthNumberContent view left margin if menu is opened
hiddenMenuOffsetnoneNumberContent view left margin if menu is hidden
edgeHitWidthnoneNumberEdge distance on content view to open side menu, defaults to 60
toleranceXnoneNumberX axis tolerance
toleranceYnoneNumberY axis tolerance
disableGesturesfalseBoolDisable whether the menu can be opened with gestures or not
onStartShould
SetResponderCapture
noneFunctionFunction 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
onChangenoneFunctionCallback on menu open/close. Is passed isOpen as an argument
onMovenoneFunctionCallback on menu move. Is passed left as an argument
onSlidingnoneFunctionCallback when menu is sliding. It returns a decimal from 0 to 1 which represents the percentage of menu offset between hiddenMenuOffset and openMenuOffset.
menuPositionleftStringeither 'left' or 'right'
animationFunctionnone(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
animationStylenone(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)
bounceBackOnOverdrawtruebooleanwhen true, content view will bounce back to openMenuOffset when dragged further
autoClosingtruebooleanWhen 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

Keywords

FAQs

Package last updated on 09 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc