Side menu component for React Native

Overview

Customizable side menu for react-native

iOS android

Content

Installation

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

Usage example

import SideMenu from '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.

The swipe animation is extremely slow

Try disabling remote JS debugging (from developer menu on phone/VD)

My SideMenu contents are visible even when the side menu is hidden

Ensure that your main view has a background color applied

<Sidemenu menu={menu}>
<App style={{backgroundColor='white'}} />
</SideMenu>

Questions?

Feel free to contact me in twitter or create an issue

Comments
  • Support React 0.7 and above

    Support React 0.7 and above

    As per latest changelog, looks like Dimensions shouldn't be required as a standalone module, but from React package instead, e.g.:

    import {Dimensions} from 'react-native';
    

    Currently, it prints warnings.

    opened by grabbou 35
  • The sidemenu is not hidden when closed

    The sidemenu is not hidden when closed

    Using the same styles as the example, this is what I am seeing when the menu is closed / opened:

    screen shot 2016-06-17 at 11 53 51 pm

    This is the styling I'm using:

    export const sidebar = StyleSheet.create({
      menu: {
        flex: 1,
        width: window.width,
        height: window.height,
        backgroundColor: 'gray',
        padding: 20,
      },
      avatarContainer: {
        marginBottom: 20,
        marginTop: 20,
      },
      avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
        flex: 1,
      },
      name: {
        position: 'absolute',
        left: 70,
        top: 20,
      },
      item: {
        fontSize: 14,
        fontWeight: '300',
        paddingTop: 5,
      }
    });
    

    I'm rendering the SideMenu at the top:

    render() {
        const { isOpen } = this.state;
        return (
          <SideMenu
            menu={ <Menu /> }
            onChange={(isOpen) => this.updateMenuState(isOpen)}
            isOpen={ isOpen }>
    
            <View style={ pageStyles.body }>
              <Header toggle={ this.toggleMenu } />
              <NavTabs />
            </View>
    
          </SideMenu>
        )
      }
    

    Not sure why the sidemenu does not hide. Any help would be appreciated.

    feedback needed 
    opened by stanleycyang 17
  • iPhone app startup (side-menu always shows up first)

    iPhone app startup (side-menu always shows up first)

    On app startup on iPhone the side-menu will show up for like a second, and then disappear again.

    I'm not sure if this is related to #107, but I've experienced this every time while debugging my app on iPhone. I hoped v0.15.2 would clear this up, but this issue still persists.

    Might it be because I'm debugging and the app is not yet optimalized with bundling?

    bug 
    opened by cbrevik 16
  • Implement fancy animation!

    Implement fancy animation!

    Hey, just finished playing around with the code, and following:

    import SideMenu from 'react-native-side-menu';
    
    export default class Menu extends SideMenu {
    
      updatePosition() {
        var style = {};
        var scaleFactor = this.left > 0
            ? this.left / this.props.scaleFactor / 100
            : 1;
        style.transform = [{
          scale: scaleFactor
        }];
        this.sideMenu.setNativeProps({
          left: this.left,
          style: style
        });
      }
    
    }
    

    makes this: screen shot 2015-07-17 at 14 01 47

    DefaultProps:

    • scaleFactor - 3
    • animationKind - 'slide' (for compatibility)

    Can we implement it by exporting a ScaleMenu class that will extend Menu and override the above method + add two more props described above? Simple.

    opened by grabbou 16
  • menu gets stuck sometimes

    menu gets stuck sometimes

    Testing on a real android device. While doing some user research my users commonly get the side menu stuck. Using gestures sometimes the logic for completely opening or closing the menu is insufficient (or doesn't cover some edge case) and the side menu stays ~10% (of the side menu's width) open.

    Has anyone else encountered this? Does this ever happen on ios?

    Here's a screenshot contactsprosidemenubug

    help wanted 
    opened by morenoh149 15
  • calling animationFunction at constructor

    calling animationFunction at constructor

    I think we need to call animationFunction at the beginning. There reason for that is, adding listeners to Animated API wont trigger until onOpen is called first. Which cause an issue of missing the first events.

    we can also put this one in componentDidMount.

    @Kureev Any thoughts on that?

    feedback needed 
    opened by alinz 14
  • Menu from the example works once in a while in IOS device

    Menu from the example works once in a while in IOS device

    The menu example seems to work perfectly in the IOS Simulator. But when I try to run it on my device (iPhone 5S), it doesn't work as expected. The menu shows up once in a while.

    bug help wanted 
    opened by pointcom 14
  • Roadmap

    Roadmap

    • [x] Make a working alpha version
    • [x] Make an example and description for alpha
    • [x] Expose menu API for menu view
    • [x] Support different animations
    • [x] Toggle menu functionality (thanks, @dvcrn)
    • [x] Extend and describe side menu API
    • [x] Create menuPosition property in cases of using menu on the right side (will be opened by slide right-to-left)
    feature request 
    opened by Kureev 13
  • Android menu touch problem

    Android menu touch problem

    I'm building a cross-platform app and have run into an issue with touch events not making it through to my menu component on Android. It works fine on iOS, but on Android any touch on the menu is treated as a touch on the content portion of the screen. For example, when I have touchToClose turned on and I tap on my menu it triggers a close. When I use the inspector and click the menu it shows me the path to App > SideMenu > TouchableWithoutFeedback on Android, which is strange since it also shows that that is starting at (240, 0) on my (360 x 488) screen and I'm clearly clicking to the left of that. On iOS the inspector works as expected and shows me the path to App > Menu > MyComponent. Any ideas as to what may be going on here? Thanks in advance!

    react-native bug 
    opened by dizlexik 12
  • DisableGestures on specific pages

    DisableGestures on specific pages

    I have a menu on a navbar that when you click it, it opens the side menu. And you can also open it by swiping on the left just like in the example.

    But I want that the gesture (swiping left) on some pages just pops() the stack and it goes back. To do this I would have to disable the gestures on the SideMenu. Any ideas on how I can achieve this on certain views?

    feature request 
    opened by JoaoCnh 12
  • When using SideMenu, the ScrollView do not work

    When using SideMenu, the ScrollView do not work

    <SideMenu menu={menu}>
      <Listview ...>
    </SideMenu>
    

    Look at the source code, onStartShouldSetPanResponder is true, so maybe scrollview cover.

    Do not know how to solve the problem?

    opened by Iliker 12
  • Bump handlebars from 4.0.10 to 4.7.6 in /examples/Basic

    Bump handlebars from 4.0.10 to 4.7.6 in /examples/Basic

    Bumps handlebars from 4.0.10 to 4.7.6.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • No incompatibilities are to be expected

    Commits

    v4.7.3 - February 5th, 2020

    Chore/Housekeeping:

    • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@Tea56)
    • Fix spelling and punctuation in changelog - d78cc73

    Bugfixes:

    • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
    • Include Type Definition for runtime.js in Package - a32d05f

    Compatibility notes:

    Commits
    Maintainer changes

    This version was pushed to npm by erisds, a new releaser for handlebars since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Setup Community Lint Config and CI

    Setup Community Lint Config and CI

    Summary

    Set up community's eslint-config and setup github actions

    Test Plan

    CI passes

    What's required for testing (prerequisites)?

    What are the steps to reproduce (after prerequisites)?

    Compatibility

    | OS | Implemented | | ------- | :---------: | | iOS | ✅❌ | | Android | ✅❌ |

    Checklist

    • [ ] I have tested this on a device and a simulator
    • [ ] I added the documentation in README.md
    • [ ] I mentioned this change in CHANGELOG.md
    • [ ] I updated the typed files (TS and Flow)
    • [ ] I added a sample use of the API in the example project (example/App.js)
    opened by Naturalclar 0
  • feat: add TypeScript typings

    feat: add TypeScript typings

    Summary

    Added TypeScript definition from definitelyTyped to this package. This will allow users to not have to import types to use this package in a TypeScript project.

    Test Plan

    Will add type-check in this repository

    Checklist

    • [ ] I have tested this on a device and a simulator
    • [ ] I added the documentation in README.md
    • [ ] I mentioned this change in CHANGELOG.md
    • [x] I updated the typed files (TS and Flow)
    • [ ] I added a sample use of the API in the example project (example/App.js)
    opened by Naturalclar 1
  • Warnings

    Warnings

    Can you PLEASE update react-native-side-menu to remove next warnings:

    1. Animated: "useNativeDriver" was not specified. This is required option and must be set to 'true' or 'false' By documentation, it should be used like this: Animated.timing(this.state.animatedValue, { toValue: 1, duration: 500, useNativeDriver: true, // <-- Add this }).start();

    2. componentWillReceiveProps has been renamed, and is not recomended for use.

    3. componentWillMount has been renamed, and is not recomended for use.

    This will be problem is future and your plugin is very good. Would be shame to have problems in near future. Thanks a lot in advance.

    opened by acavrbaski 6
  • align problem when phone language is Arabic

    align problem when phone language is Arabic

    Hello My phone is Arabic After installing the app, when opening the app for the first time, the side menu is showing the right aligned. But afterward opens the app, the side menu works well correctly. I have an error video. https://mega.nz/#!ySAxiIBB!86WCiXg0qWRTKdao8sb4BbAAbfXy4S1YIg-oC4Qo7_c

    VID-20200106-WA 00_00_36 20200310-162259-0

    opened by Vitaliy716 3
Releases(v1.0.0)
  • v1.0.0(Jul 15, 2017)

    Hi there! I didn't spend enough attention to this project for a quite a while, but I can't ignore enormous amount of issues anymore. To make them approachable, I decided to start cleaning up the codebase we have nowadays. In my mind it is hard to make a good contribution if project doesn't even keep the same code style. Also, its pretty said to see things like module.exports in React Native modules in 2017.

    Therefore, I started cleaning this project up by introducing a code style standard. Here is a list of current changes:

    • Assembled https://github.com/airbnb/javascript to maintain one of the most common javascript code styles
    • Assembled Flow to replace comments by types and improve developer experience overall
    • Updated Basic example to use latest version of React/React Native

    Breaking changes:

    • Using ES module notation instead of commonJS one, e.g. from now on it should be
       import SideMenu from 'react-native-side-menu';
      

      instead of

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

      (yay! 🎉 )

    Source code(tar.gz)
    Source code(zip)
  • 0.18.0(Jan 11, 2016)

    Hey!

    Thanks to @Kureev, @grabbou, @BasitAli we are presenting next version of side menu - 0.18.

    Features

    There were a couple of people complaining that menu can be dragged more than allowed sideMenuOffset. We now made this behaviour configurable - if you don't like it - simply set bounceBackOnOverdraw to false.

    We now also align better with the rest of existing ecosystem by not restricting react-native version inside peerDependencies.

    Note to developers: Our examples now run master version directly instead of getting it from npm which speeds up development significantly as we always get latest preview of menu. We hope this will make you even more excited about contributing!

    Fixes

    There were a couple of complaints about scrollsToTop behaviour on ScrollViews not working properly when using SideMenu. This is due to iOS implementation detail that we have described in our FAQ section.

    Upgrading notes

    No actions need to be taken when upgrading from previous release (0.17.2). Component has been tested in production applications with latest React Native version (0.17) and no issues were found.

    Source code(tar.gz)
    Source code(zip)
  • v0.17.0(Dec 21, 2015)

    Hey folks!

    It was a really busy time, but seems I've managed to find some for react-native-side-menu. In this release I've mostly concentrated on deprecating menuActions, context etc. I'm also planning a next step to move out a draggable behavior to standalone function. It'll make possible to use it like this:

    const DraggableSideMenu = makeDraggable(SideMenu)
    

    But that's a small spoiler for the upcoming x-mas major release. Let's now focus on the current one:

    Deprecating menuActions

    A while ago I've introduced a menuActions to manage side menu's state. Then we felt into some pitfalls with a way passing them down (thru props or context). Well, I didn't like using plain props, because you can't pass them to Nth child without having a lot of boilerplate in your code. So, at some point I decided to use a context for this purpose. Unexpectedly, some of people started to complain about using context (experimental feature + some "magic" in the code). Well, I'm agree, but it seems to be a lesser evil.

    So, I though about it for a while and find out that we can actually remove a menuActions object (:open_mouth:). Instead, I propose to use a plain prop on SideMenu component (isOpen) and it's as simple as

    <SideMenu menu={<Menu />} isOpen={true}>
      <Content />
    </SideMenu>
    

    How you'll provide isOpen flag to component - it's up to you. Personally I use redux library for my data flow, but for sure you can use something else.

    Deprecating touchToClose

    When I started to develop this component I had no clue how it should really behave. Eventually, @skevy submited a nice PR to add touchToClose feature. I think it's a too cool functionality to keep it under a flag. As far as I can't imagine any real valuable example of not using it, I decided to put it as a default behavior in this version :dancer: .

    Deprecating defaultOpen

    Well, now we have an isOpen flag, so why should we keep this one? I think it did a trick pretty well, but now it's not even needed, so RIP, defaultOpen :skull:

    Conclusion

    Source code(tar.gz)
    Source code(zip)
  • v0.15.2(Nov 16, 2015)

  • v0.14.0(Sep 17, 2015)

    Last few days I received a lot of issues from users about accessing menuActions from child content view components. I admit, that previous solution had a bunch of edge cases I was supposed to fix and now I'm glad to present you a result of my work trying solving these issues.

    Now you're able to use context (I think it's already well-known feature of React, even besides it's not documented yet), so instead of using props' menuActions property on the first-level component you're able to use context's menuActions property which is available across the all child views. Example is already there, you can check a README for it.

    Related issues: https://github.com/Kureev/react-native-side-menu/issues/101 https://github.com/Kureev/react-native-side-menu/issues/99 https://github.com/Kureev/react-native-side-menu/issues/96

    Hope that will hope you to build even more awesome software!

    Source code(tar.gz)
    Source code(zip)
  • v0.13.0(Sep 4, 2015)

  • v0.12.0(Aug 30, 2015)

    • Replaced LayoutAnimation by Animated and exposed animationFunction to create your own fancy animations for open/close methods and animationStyle function to declare your animation logic;
    • Fixed usage of Dimensions, now you wouldn't receive annoying notifications about it;
    • Updated README.md with new API description
    Source code(tar.gz)
    Source code(zip)
Owner
Alexey Kureev
ಠᴗಠ
Alexey Kureev
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

Provash Shoumma 411 Aug 18, 2022
react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

react-native-select-dropdown react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for and

Adel Reda 171 Dec 4, 2022
React Native: Native Popover Menu

ReactNative: Native Popover Menu (Android/iOS) If this project has helped you out, please support us with a star ?? This library is a React Native br

Pranav Raj Singh Chauhan 467 Nov 16, 2022
Popup menu component for React Native

react-native-popup-menu Extensible popup menu component for React Native for Android, iOS and (unofficially) UWP and react-native-web. Features: Simpl

null 1.4k Dec 6, 2022
Pure JavaScript material menu component for React Native

react-native-material-menu · Pure JavaScript material menu component for React Native with automatic RTL support. Install Using yarn yarn add react-na

Maksim Milyutin 456 Nov 28, 2022
This is simple implementation of drop down menu

React Native Dropdown Simple DropDown menu for React Native App! Introduction React Native Dropdown is simple, customizable and easy to use dropdown i

Ali Najafizadeh 647 Dec 6, 2022
Path-esque circular action menu inspired by CircularFloatingActionMenu.

react-native-circular-action-menu Path-esque circular action menu inspired by CircularFloatingActionMenu. Installation npm i react-native-circular-act

Mihir Rege 459 Nov 1, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Dec 2, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Reid Mayo 285 Sep 26, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 13 Nov 26, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 415 Oct 9, 2022
react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Fixt 90 Oct 7, 2021
react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row.

react-native-photo-grid React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row Ins

Christopher 35 Jul 11, 2022
Arc Slider Component for React Native using React Native SVG

React Native Arc Slider ?? Getting Started Install Install the library and react-native-svg npm i --save rn-arc-slider react-native-svg Link native co

Arpit Bhalla 26 Sep 28, 2022
VideoPlayer for the React Native Video component at react-native-video

?? react-native-media-console VideoPlayer for the React Native Video component at react-native-video. ⭐️ Features This package contains a simple set

Ovidiu Cristescu 53 Nov 12, 2022
TouchBolocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

TouchBlocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

Youssef Eddibili 7 May 27, 2022