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




Founder Curious dev. Laravel / Angular / VueJs / React Native / Docker. Love stand up shows.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

LeetCode 921. Minimum Add to Make Parentheses Valid — JavaScript Basics

Mini-Project: Deploying JavaScript Application with Nginx

JavaScript Closure

rgbCTF2020 [Writeup]

Javascript’s magical words: this, new, call, apply, and bind

Creating Routes with React Router

Webix JavaScript Chat and Messenger widget review

Webix JavaScript Chat

Which Editor to use for MERN Stack Development

Visual Studio Code Editoe

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dejan Blazeski

Dejan Blazeski

Founder Curious dev. Laravel / Angular / VueJs / React Native / Docker. Love stand up shows.

More from Medium

A beginners guide to setting up redux-saga with Typescript using reduxsauce

React Native App Development: 4 Promising Local Databases That You Must Try

Smart pipelines for React Native

How to upload multiple images to AWS S3 in react-native App