Sidebar Drawer menus in React Native

One of my favourite navigation libraries in React Native community is react-native-navigation by Wix. This is a brilliant library that embraces native navigation instead of pure JS based implementations. It is powerful because the app output will be on par in navigation with natively developed application.

The library is very stable & reliable to use in production environments. They also have some nice documentation in the repo covering all major navigation patterns that you see in standard android/iOS apps including Shared Element transitions on android platform. Fantastic, isn’t it? :-)

I was browsing the code to explore the implementation of sidebar drawer menu pattern on both platforms. On Android, library uses android.support.v4.widget.DrawerLayout which is a standard in the native platform. On iOS though, there is no such standard pattern endorsed by Apple. I discovered that under the hood, on iOS platform, the library uses two popular libraries for showing drawer menu, mmdrawer controller and thesidebar controller. So with this library you will be able to achieve all the functionality with drawer as you would normally when you use them in your iOS projects. Much of this is not part of documentation, I am sure they will include in future revisions.

Lets explore different drawer patterns that are supported in this library. First, lets clone the library and run the example project on iOS simulator.

$ git clone https://github.com/wix/react-native-navigation.git
$ git checkout tags/v1.1.88
$ cd example
$ npm install
$ react-native run-ios

open ./node_modules/react-native-navigation/src/deprecated/controllers/index.js in your text editor.

As you can see from this code snippet, drawer supports two types of props, type and animationType, when not specified, they would default to MMDrawer and slide respectively.

Possible values for types can be found in node_modules/react-native-navigation/src/deprecated/controllers/Constants.js

Supported type values are MMDrawer and TheSideBar

For MMDrawer type, supported values for animationType are door, parallax, slide, slide-and-scale

For TheSideBar type, supported values for animationType are airbnb, facebook, luvocracy and wunder-list

To play around with these values, open src/app.js

Replace

drawer: {
  left: {
    screen: 'example.Types.Drawer'
  }
}

with

drawer: {
  left: {
    screen: 'example.Types.Drawer'
  },
  type: 'TheSideBar',
  animationType: 'airbnb'
}

Reload the RN, and now drawer toggle should behave like below

airbnb style

MMDrawer type and the door animation type.

TheSideBar type and facebook animation type.

These are the inbuilt types in the library. If you have not used this library as your navigation solution, I strongly recommend to try it out.