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

--

--

--

Founder binge.app. 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

10 Important Topics of JavaScript that you can’t ignore…..

React app without create-react-app

Async loops — and why they fail! Part 2

Adventuring Into React Hooks Performance Practices

Permutations in JavaScript

Unit Testing with NodeJS -Stubbing Methods

https://www.binance.me/en/activity/referral-entry?fromActivityPage=true&ref=LIMIT_VLTCTOK2

Write a program of Revese a Linked List

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 binge.app. Curious dev. Laravel / Angular / VueJs / React Native / Docker. Love stand up shows.

More from Medium

Testing Axios async hook in React native with react-hooks

Disabling Bottom Navigation Tabs in React-Native

Use of Higher Order Component (Hoc) in React

Creating native modules using Java/Swift for React Native projects.