Tab Navigator inside Drawer Navigator is used by hundreds of mobile applications where developer wants to manage multiple activities(screen) in single mobile app. Tab Navigator show all the screens into a single screen with already implemented animated swipeable feature, Activity names will show at the top of the mobile app. In Drawer Navigator there is a slide menu panel present at the left side of screen which contains all the screen names as menus and when user clicks any of them it will open a new activity. So in this tutorial we would going to implement Tab Navigator Inside Drawer Navigator in react native android iOS mobile app Example Tutorial.
Screenshot : Below is the screenshot of our application.
Contents in this project Show Tab Navigator Inside Drawer Navigator in React Native Android iOS App Example Tutorial :
1. Before getting started we need to install the latest version of React Navigation library in our project to use the activity implementation structure. To install react navigation in your project open your project folder in CMD – Terminal and execute below command.
|
1 |
npm install --save react-navigation |
Screenshot of CMD:
2. Next step is to install the react-native-gesture-handler library in your react native app. So again open your project folder in command prompt or Terminal and execute the below command.
|
1 |
npm install --save react-native-gesture-handler |
Screenshot:
3. Now we need to execute react-native link command in your react native project. This command will re-arranged your complete react native project and index all the newly installed libraries in it.
|
1 |
react-native link |
Screenshot:
4. Now there is no extra steps for iOS configuration.
5. To configure the react-native-gesture-handler library for react native project we need to add some additional libraries in our MainActivity.java file.
So goto YourProject – > android -> app -> src- >main -> java -> com-> YourProject -> MainActivity.java file.Open MainActivity.java file in edit mode in notepad or any text editor and put below files.
|
1 2 3 |
import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; |
You need to also put the return function for ReactActivityDelegate.
|
1 2 3 4 5 6 7 8 9 |
@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } |
Complete source code of MainActivity.java file, It will help you to understand all the changes after adding above code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
package com.newproj; 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 "newproj"; } @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } } |
6. Now your project is good to go, Its time to start coding 🙂 .
7. Open your react native project folder and open App.js file and import StyleSheet, Text, View, Button, TouchableOpacity and Image component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native'; |
8. Import createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator and createStackNavigator component from react navigation library in your project.
createAppContainer : This component is used as main default export parent, Means if you have created any Tab Navigator or Drawer navigator or Stack Navigator in your project. At the final step you have to call them using createAppContainer.
createMaterialTopTabNavigator : Is used to creating material style top level tab navigation in react native for both android and iOS mobile apps.
createDrawerNavigator : Is used to create navigational drawer in both android and iOS mobile applications.
createStackNavigator : Its make the every individual class as an Activity screen.
|
1 |
import { createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator, createStackNavigator } from "react-navigation"; |
9. Creating a class named as HamburgerIcon in your project. This class is used to put a Hamburger Icon at the top left side of Drawer Navigator.
this.props.navigationProps.toggleDrawer() : We would call this function on Hamburger icon click event, This function will open and close the navigational drawer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class HamburgerIcon extends Component { toggleDrawer = () => { this.props.navigationProps.toggleDrawer(); } render() { return ( <View style={{ flexDirection: 'row' }}> <TouchableOpacity onPress={this.toggleDrawer.bind(this)} > <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }} style={{ width: 25, height: 25, marginLeft: 5 }} /> </TouchableOpacity> </View> ); } } |
10. Creating 2 Activity classes named as Home_Screen and Settings_Screen. These 2 classes is will be grouped together and shows inside Tab Navigator.
title : Is used to show the activity title in Title bar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
class Home_Screen extends Component { static navigationOptions = { title: 'Home', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Home Screen Activity.</Text> <Button onPress={this.gotoNextActivity} title='Open Second Activity' /> </View> ); } } class Settings_Screen extends Component { static navigationOptions = { title: 'Settings', }; render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Settings Screen Activity.</Text> </View> ); } } |
Screenshots:
11. Creating another two classes named as Student_Screen and Details_Screen. These classes is also grouped together as Tab Navigator.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
class Student_Screen extends Component { static navigationOptions = { title: 'Student', }; gotoNextActivity = () => { this.props.navigation.navigate('Forth'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Student Screen Activity.</Text> <Button onPress={this.gotoNextActivity} title='Open Details Activity' /> </View> ); } } class Details_Screen extends Component { static navigationOptions = { title: 'Details Screen', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Details Screen Activity.</Text> </View> ); } } |
Screenshots:
12. Creating a constant view named as Tab_1 with createMaterialTopTabNavigator component and pass the two activity classes Home_Screen and Settings_Screen inside it. This will group them together as a Tab Navigator.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
export const Tab_1 = createMaterialTopTabNavigator({ First: { screen: Home_Screen, }, Second: { screen: Settings_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); |
13. Creating another constant view named as Tab_2 and with createMaterialTopTabNavigator component and pass the another two renaming activities Student_Screen, Details_Screen inside it. It will also group them together and make another tab navigator view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
export const Tab_2 = createMaterialTopTabNavigator({ Third: { screen: Student_Screen, }, Forth: { screen: Details_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); |
14. Next step is to pass the both Tab_1 and Tab_2 Views into individual createStackNavigator views. This will make the complete Tab Navigator View into Stack navigator. So create 2 createStackNavigator views named as First_2_Tabs and Second_2_Tabs in your project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
const First_2_Tabs = createStackNavigator({ First: { screen: Tab_1, navigationOptions: ({ navigation }) => ({ title: 'First Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); const Second_2_Tabs = createStackNavigator({ First: { screen: Tab_2, navigationOptions: ({ navigation }) => ({ title: 'Second Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); |
15. Create a constant named as MyDrawerNavigator with createDrawerNavigator component and pass both the First_2_Tabs and Second_2_Tabs inside it as individual screens. Now at the final step we need to pass the complete MyDrawerNavigator into createAppContainer component in order to show on screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const MyDrawerNavigator = createDrawerNavigator({ Home_Menu_Label: { screen: First_2_Tabs, }, Student_Menu_Label: { screen: Second_2_Tabs, } }); export default createAppContainer(MyDrawerNavigator); |
16. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
17. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native'; import { createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator, createStackNavigator } from "react-navigation"; class HamburgerIcon extends Component { toggleDrawer = () => { this.props.navigationProps.toggleDrawer(); } render() { return ( <View style={{ flexDirection: 'row' }}> <TouchableOpacity onPress={this.toggleDrawer.bind(this)} > <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }} style={{ width: 25, height: 25, marginLeft: 5 }} /> </TouchableOpacity> </View> ); } } class Home_Screen extends Component { static navigationOptions = { title: 'Home', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Home Screen Activity.</Text> <Button onPress={this.gotoNextActivity} title='Open Second Activity' /> </View> ); } } class Settings_Screen extends Component { static navigationOptions = { title: 'Settings', }; render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Settings Screen Activity.</Text> </View> ); } } class Student_Screen extends Component { static navigationOptions = { title: 'Student', }; gotoNextActivity = () => { this.props.navigation.navigate('Forth'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Student Screen Activity.</Text> <Button onPress={this.gotoNextActivity} title='Open Details Activity' /> </View> ); } } class Details_Screen extends Component { static navigationOptions = { title: 'Details Screen', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Details Screen Activity.</Text> </View> ); } } export const Tab_1 = createMaterialTopTabNavigator({ First: { screen: Home_Screen, }, Second: { screen: Settings_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); export const Tab_2 = createMaterialTopTabNavigator({ Third: { screen: Student_Screen, }, Forth: { screen: Details_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); const First_2_Tabs = createStackNavigator({ First: { screen: Tab_1, navigationOptions: ({ navigation }) => ({ title: 'First Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); const Second_2_Tabs = createStackNavigator({ First: { screen: Tab_2, navigationOptions: ({ navigation }) => ({ title: 'Second Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); const MyDrawerNavigator = createDrawerNavigator({ Home_Menu_Label: { screen: First_2_Tabs, }, Student_Menu_Label: { screen: Second_2_Tabs, } }); export default createAppContainer(MyDrawerNavigator); const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
Screenshots:
Also Read :
React Native Hide Activity Navigation Bar Make App Full Screen iOS Android Example
React Native Add Border to only Bottom side of View iOS Android
React Native Count TextInput Inside Text Length Automatically
Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/ Solution
Retrieve TextInput entered value on Button Click onPress in React Native
Superb bro.. thank you very much.. i will try and informed you
Welcome bro 🙂 .
stackNavigation in not working pls help.
it show me undefined is not a function (evaluating'(0,_reactNavigation.StackNavigation)({
First:
{
screen:_className.default
}
}) ‘)
Dhillon you should use createStackNavigator at the place of stack navigation because Stack Navigation is deprecated.
working fine…… thanks bro
Welcome 🙂 .
StackNavigation in not working pls help
it show me:
undifined is not a function
Dhillon you need to install the latest version of react navigation and the Stack navigation is now createStackNavigator .
thnaks bro, now its working
Welcome 🙂 .
When i create new project in cmd terminal it gives me too much errors and “Complete log of this error is belongs in Expo/something” please help me to for creating new project with expo…
Keshave post your complete error here and i will check it.
Hi Admin
I am getting undefined is not a function (evaluating ‘(0,_reactNavigation.createMaterialTopTabNavigator)’) error.
Please help me.
Resolved that by upgrading react navigation version. Thanks for the blog
Welcome Priya 🙂 and thanks for helping us growing 🙂 .
Hi Admin, my scenerio is – I have 2 tabs in Profile.js, in 2nd tab I am showing profile data and have 2 buttons, Edit and delete. On clicking Edit button, goes to edit detail page and after updating am redirecting it back to Profile.js, but my updated data is not visible unless am refreshing the page. (My assumption is, after redirecting 2nd tab’s class is not calling up)How to resolve it?
Its something urgent, please reply ASAP.
Prity simply call the updated data function in componentdidmount() function so when you come back on profile.js page it will call the new data from server.
Hai bro,How to add tab with listview ?
Raja please elaborate you want to add ListView inside Tab view ?
halo bro, How to use a Custom top tab bar and Custom bottom tab bar in 1 page for React Native
Hamms could you please explain your question more briefly .
Hi Admin. Thanks for posting.
I am new to React Native and I am learning myself.
Your post is helpful for me. Then I have a question.
You put First_2_Tabs and Second_2_Tabs inside DrawerNavigator and they included Tab_1 and Tab_2 with stackNavigators separately.
I am not sure why you put stack navigators at this point.
Is it possible to put Tab_1 and Tab_2 inside DrawerNavigator directly?
I am really looking forward to hearing from you.
Thanks.
Thanks for comment Jordan. To make the tab navigator fully compatible with low memory devices its important to use this type of structure 🙂 .
Thanks for your reply.
Is it possible to give a example so that I can get clear idea?
I think it’s important to understand navigation clearly since it’s basic structure of app.
Actually I have developed native mobile apps so far.
Also in all case, should I wrap tab navigator with stack navigator?
Sure Jordan, I will make a example explaining everything 🙂 .
Cool! Thanks.
I really want to hear from you.
Thanks for your support.
Welcome Jordan 🙂 .
Sorry, when can you share your examples with me?
Jordon currently i am working on another project, It will take a few days to upload the example.
No problem. 🙂
I will wait for your response.
Thanks for support.
Welcome Jordan 🙂
showing some blank screen with warning like viewer page android has be extracted from react native core and will be reamoved
in future realease
Thanks for notifying us Rakshith, i will check its documentation again .
how to add profileicons to this code
Rakshith where you want to show the profile icon in the title bar ?
In the sidebar where home menu bar and student menu bar are there in the code
Thanks! How to wrap a tab navigator and add a floating button?
Hello, I am facing some error in React navigation 5.x version. I have tried all scenario but no luck 🙁
Tell me Darshan what problem you are facing ?