Navigation Drawer In React Native

Video Demo:

Basically a navigation drawer is used to show a main menu of application. The user can see the drawer when they swipe their finger from left to right or a vice verse. They can also open the drawer by tapping on hamburger icon. This tutorial will help you to install and understand the flow of react native navigation drawer. You can also download the source code from below.

Step 1->
To create your project run this command:
sudo npm install -g react-native-cli
Step 2-> 
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Step 3->
Install Navigation library in your project:
npm install --save react-navigation
Step 4->
Also need to install the gesture library otherwise you will get an issue
npm install --save react-native-gesture-handler
Step 5->
link your gesture library in your project:
react-native link react-native-gesture-handler
Step 6->
For android you need to change your MainActivity with following functionations. Path: ProjectName->Android-> app->src->java->MainActivity.java

---

MainActivity.Java:

package com.navigationdrawer; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "NavigationDrawer"; }
@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; }
}

Now you can start work on your React native project

---

App.js:

import React, {Component} from 'react'; import {createDrawerNavigator, createAppContainer} from 'react-navigation' import HomeScreen from './Screens/HomeScreen' import SettingScreen from './Screens/SettingScreen' import ProfileScreen from './Screens/ProfileScreen';
export default class App extends Component { render() { return ( <MyAppdrawer></MyAppdrawer> ); } }
const MyDrawerNavigator = createDrawerNavigator({ Home: { screen: HomeScreen, }, Settings: { screen: SettingScreen, }, Profile:{ screen: ProfileScreen } });
const MyAppdrawer = createAppContainer(MyDrawerNavigator);

---

HomeScreen.js:

import React, {Component} from 'react' import {View,Text, Image, StyleSheet,StatusBar, TouchableOpacity} from 'react-native'
export default class HomeScreen extends Component{
menuClick(){ this.props.navigation.openDrawer() }

render(){ return( <View style={styles.container}> <StatusBar backgroundColor='#FF7043'></StatusBar>
<View style={styles.topBar}> <View style={styles.leftHeader}> <TouchableOpacity style={styles.imgClick} onPress={this.menuClick.bind(this)}> <Image style={styles.imgMenu} source={require('../assets/menu.png')}></Image> </TouchableOpacity> </View>
<Text style={styles.txtBar}>Home Screen</Text> <View style={styles.rightHeader}></View></View> <View style={styles.contentBar}>
<Image style={styles.imgHome}source={require('../assets/mansion.png')}></Image> </View>
</View> ) } }
const styles = StyleSheet.create({ container:{ flex:1, flexDirection:'column', }, topBar:{ height:40, flexDirection:'row', alignItems:'center', justifyContent:'space-between', backgroundColor: '#FF5722', },
leftHeader:{ flex:1, marginLeft:10, justifyContent:'flex-start', },
rightHeader:{ flex:1, justifyContent:'flex-end', },
txtBar:{ color: '#ffffff', },
contentBar:{ flex:1, justifyContent:'center', alignItems:'center' },
imgMenu:{ width:20, height:20,
},
imgClick:{ width:40, height:40, justifyContent:'center' },
imgHome:{ width: 200, height: 200 }, })

---

ProfileScreen.js:

import React ,{Component} from 'react' import {View,StyleSheet,StatusBar,Text,Image,TouchableOpacity} from 'react-native'
export default class ProfileScreen extends Component{
menuClick(){ this.props.navigation.openDrawer() }
render(){ return( <View style={styles.container}> <StatusBar backgroundColor='#FF7043'></StatusBar>
<View style={styles.topBar}> <View style={styles.menuView}> <TouchableOpacity style={styles.imgClick} onPress={this.menuClick.bind(this)}> <Image style={styles.imgMenu} source={require('../assets/menu.png')} ></Image> </TouchableOpacity> </View> <Text style={styles.topTxt}>Profile Screen</Text> <View style={styles.menuViewright}></View></View>
<View style={styles.contentBar}> <Image source={require('../assets/boy.png')} style={styles.imgSetting}></Image> </View> </View> ) }
}
const styles = StyleSheet.create({ container:{ flex:1, }, imgClick:{ width:40, height:40, alignItems:'center', justifyContent:'center' },
topBar:{ height: 40, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#FF5722', },
menuView:{ flex:1, flexDirection: 'row', justifyContent: 'flex-start',
}, menuViewright:{ flex:1, flexDirection: 'row', justifyContent: 'flex-end',
},
topTxt:{ color:'white', flex:1, },
contentBar:{ flex:1, justifyContent:'center', alignItems:'center' },
imgMenu:{ height:20, marginLeft:10, width:20, },
imgClick:{ width:40, height:40, justifyContent:'center' },
imgSetting:{ width: 200, height: 200 }, })

---

SettingScreen.js:

import React ,{Component} from 'react' import {View,Text,StyleSheet, StatusBar,Image,TouchableOpacity} from 'react-native'
export default class SettingScreen extends Component{
menuClick(){ this.props.navigation.openDrawer() }
render(){ return(
<View style={styles.container}> <StatusBar backgroundColor='#FF7043'></StatusBar> <View style={styles.topBar}> <View style={styles.headerLeft}> <TouchableOpacity style={styles.imgClick} onPress={this.menuClick.bind(this)}> <Image source={require('../assets/menu.png')} style={styles.imgMenu}></Image> </TouchableOpacity> </View>

<Text style={styles.topTxt}>Setting Screen</Text> <View style={styles.headerRight}></View> </View>
<View style={styles.contentBar}> <Image source={require('../assets/setting2.png')} style={styles.imgSetting}></Image> </View> </View> ) } }
const styles=StyleSheet.create({
container:{ flex:1 },
topBar:{ height: 40, backgroundColor:'#FF5722', flexDirection:'row', alignItems:'center', },
headerLeft:{ flex:1, marginLeft:10, justifyContent:'flex-start', },
headerRight:{ flex:1, justifyContent:'flex-end' },
topTxt:{ color: '#FFFFFF', },
contentBar:{ flex:1, justifyContent:'center', alignItems:'center' },
imgMenu:{ height:20, width:20, },
imgClick:{ width:40, height:40, justifyContent:'center' },
imgSetting:{ width: 200, height: 200 }, })

DOWNLOAD SOURCE CODE FROM HERE