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: ‘/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: ‘/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 :
Wish You All a Very Very Happy New Year 2019
Add Show Image Icon Inside Button in React Native Application
React Native Animated Accordion Collapsible Expandable iOS Android Tutorial
React Native Create and Show Array Elements in Text using MAP
React Native Create Custom Sliding Drawer Using Animation iOS Android
