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

React Native Boilerplate

Remote File Operations using JSch

Shipping npm modules with SQLite

Why and how we are doing E2E Tests

Each view can generate many different pages depending on how their configuration files are set.

ES6 — Object vs. Map for storing key value pairs

Hello Cypress!!

Anatomy of JavaScript Fetch

How I decide whether to wear a coat every morning

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

Expo CLI vs React Native CLI

Use Codepush for implementing efficient branching strategy for React Native

How to: Social Login (Google/Apple) in your Firebase, React Native (Expo) App

Play Dacast Video on React Native