Drawer Navigation with Custom Side Menu — React Native

Learning new things in React Native

Mehul Mistri
Apr 17, 2018 · 2 min read

One of the most important part in app development is Side menu.

Here I will show you how to implement Side Menu with Stack Navigator and Drawer Navigator.

First of all, let’s create new project, I named it “Demo”.

react-native init Demo

Installation

npm install -save react-navigation
npm install -save react-native-vector-icons

Once the module is installed we can proceed.

Drawer Navigator (index.js)

React Navigation Drawer Navigator

Side Menu (SideMenu.js)

React Navigation Custom Side Menu

Side Menu Style (SideMenu.style.js)

Side Menu Custom Style

Stack Navigator (stacknav.js)

React Navigator Stack Navigation

Main Screen (MainScreen.js)

Main Screen

Detail Screen (DetailScreen.js)

Detail Screen

This is the desired output in iOS,

iOS App

and for Android,

Android App

Hope you find this article helpful. Follow me on Twitter, Instagram, LinkedIn.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade