Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Monday, January 28, 2019

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.

create navigation drawer in react native navigation drawer in react native example


navigation drawer react native tutorial navigation drawer using react native

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

2 comments:

  1. Replies
    1. Hello,

      Did you add and link this library "npm install --save react-native-gesture-handler".

      Thanks!
      Deepshikha Puri

      Delete