React native drawer — custom one

Teaser — cause every story needs one

What we will build:

The final custom side menu with header toggle

We had a need for a drawer menu on our Binge app. React navigation supports this, but changes how the screens are structured and we didn’t want the change — just a simple drawer menu on one of our screens.

So, let’s build one. What’s used in this tutorial:

• react-navigation — Optional, but we use it our app. We will add the menu button on a screen header in navigationOptions
• react-native-modal (for the animation/modal effect). Optional, if you don’t want to use this library, you’ll need to build the slide-in animation

The listed packages are JS based (no native linking required). I’ll assume you already use react-navigation as it’s or you have another solution. Works either way.

In your app root, install the packages:

npm i react-native-modal --save
yarn add react-native-modal

The modal that shows up, will be part of the screen we want it to be available on. Let’s create the drawer screen first.

The screen will have some styling, a custom title, description, and toggle (Switch) button components. On the footer, we will render a “Link” that calls a parent function — in case you want to do an action on your parent screen that holds the drawer when it’s pressed (if you use Redux, a good place to call an action).

The drawer screen content — we will show it when the menu button is pressed

Let’s work on the screen where we want the drawer shown.

This will be our parent screen. This is the screen code with the modal included.

The screen where we want to call our side menu from

How it works:

• When the screen mounts, in componentDidMount we register the navigation button (named “Toggle”) press event. When pressed, react-navigation will call toggleSideMenu in our SideMenuParentScreen component.
• The toggleSideMenu function set’s the isModalVisible prop in our state, and it triggers the SideMenu slide in from left animation.
• The SideMenu component can be hooked with Redux, or we can pass callback function — in our case we do that with passing callParentScreenFunction={this.callParentScreenFunction} in the parent screen, and calling it through this.props in the SideMenucomponent.

You will probably want to use an icon instead of text for the button, for that you might want to take a look at react-native-vector-icons and react-native-header-buttons.

—

On an unrelated note, are your Macbook Pro animations lagging? You should try switching to the dedicated (more powerful) graphic card when on power — automate it with this app https://gum.co/mac-auto-gpu