In our previous tutorial we have learn about createBottomTabNavigator() component of React Navigation version 5.x which is the latest version of react navigation. But as per user requirement some times developer wants to make their own customized bottom tab bar navigator. Custom tab bar navigator is completely user manageable and designed by application developer but performs like real createBottomTabNavigator() component. So in this tutorial we would design React Native Create Custom Bottom Tab Bar Navigator in Android iOS Example Tutorial.
Contents in this project React Native Create Custom Bottom Tab Bar Navigator in Android iOS Example Tutorial:
1. Before getting started with App coding first step is to install the React Navigation library into our current react native project. You’ll think like the React Navigation is the Root tree of multiple components and createBottomTabNavigator() and other libraries is like fruits on the tree. So it is must to install the React Navigation first. So open your react native project Root directory in Command Prompt in WINDOWS and Terminal in MAC and execute below command.
|
1
|
npm install @react–navigation/native
|
Screenshot:
Screenshot after done installation:
2. On the next step we’ll install 5 libraries together in order to use React Navigation properly in all devices. The library names are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and @react-native-community/masked-view NPM packages.
|
1
|
npm install react–native–reanimated react–native–gesture–handler react–native–screens react–native–safe–area–context @react–native–community/masked–view
|
Screenshot:
Screenshot after done installation:
3. On the next step we’ll install the createBottomTabNavigator() component in our react native project. This step is must to use the Bottom Tab Bar navigation in react native.
|
1
|
npm install @react–navigation/bottom–tabs
|
Screenshot:
Screenshot after done installation:
4. Now your project is successfully configured and linked with all the libraries for Android platform but for iOS users we have execute another Pod command to link all the downloaded libraries to react native iOS project.
Note: This step is only for iOS users, If you’re creating App for only Android then there is no need to execute this step.
|
1
|
npx pod–install ios
|
Screenshot of MAC Terminal :
Screenshot of MAC after executing above command:
Now your project is ready to rock and roll. Its time to start coding for your react native application.
5. Start Coding for Application:
1. Open your project’s main App.js file and import Text, View, StyleSheet, TouchableOpacity, NavigationContainer and createBottomTabNavigator component.
|
1
2
3
4
|
import * as React from ‘react’;
import { Text, View, StyleSheet, TouchableOpacity } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;
|
2. I’m creating 3 different screens in this tutorial, Each screen has their different background color layout. So Creating a functional component named as Screen_1(). This is our First screen for application.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function Screen_1() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FF1744’
}}>
<Text style={styles.TextStyle}> This is Screen 1 ! </Text>
</View>
);
}
|
Screen 1 :
3. Creating functional component named as Screen_2(). This is our Second screen for application.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function Screen_2() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#33691E’
}}>
<Text style={styles.TextStyle}> This is Screen 2 ! </Text>
</View>
);
}
|
Screen 2:
4. Creating function component named as Screen_3(). This is our third screen for application.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function Screen_3() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FF6F00’
}}>
<Text style={styles.TextStyle}> This is Screen 3 ! </Text>
</View>
);
}
|
Screen 3:
5. Creating another functional component named as CustomTabBar() with Props argument inside it. This is our Custom Bottom Tab Navigator Tab Bar for project.
Explanation: I’m creating 3 functions inside the CustomTabBar() named as navigateToFirstScreen, navigateToSecondScreen and navigateToThirdScreen with Screen names along with it. We would call these functions on button Click event and navigate to next activities.
|
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
|
function CustomTabBar(props) {
const navigateToFirstScreen=()=>{
props.navigation.navigate(‘Screen_1’) ;
}
const navigateToSecondScreen=()=>{
props.navigation.navigate(‘Screen_2’) ;
}
const navigateToThirdScreen=()=>{
props.navigation.navigate(‘Screen_3’) ;
}
return (
<View style={styles.TabBarMainContainer} >
<TouchableOpacity onPress={navigateToFirstScreen} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle} > SCREEN 1 </Text>
</TouchableOpacity>
<View style={{height: 50, backgroundColor: ‘#fff’, width: 2}} />
<TouchableOpacity onPress={navigateToSecondScreen} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> SCREEN 2 </Text>
</TouchableOpacity>
<View style={{height: 50, backgroundColor: ‘#fff’, width: 2}} />
<TouchableOpacity onPress={navigateToThirdScreen} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> SCREEN 3 </Text>
</TouchableOpacity>
</View>
);
}
|
Custom Bottom Tab Bar Navigator Screenshot:
6. Creating a createBottomTabNavigator() object named as Tab . We would use this object to define all the Tab Navigator screens.
|
1
|
const Tab = createBottomTabNavigator();
|
7. Creating a function named as AllTabs(). Inside this function we would first call our Custom Tab Bar with Prop and then define Tab.Screen method and call each Screen here.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function AllTabs() {
return (
<Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
<Tab.Screen
name=“Screen_1”
component={Screen_1} />
<Tab.Screen
name=“Screen_2”
component={Screen_2} />
<Tab.Screen
name=“Screen_3”
component={Screen_3} />
</Tab.Navigator>
);
}
|
8. Creating our main Export default function App with NavigationContainer component and inside the NavigationContainer we would call our AllTabs component to complete our Bottom Tab Navigator.
|
1
2
3
4
5
6
7
|
export default function App() {
return (
<NavigationContainer>
<AllTabs />
</NavigationContainer>
);
}
|
9. Creating Style.
|
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
|
const styles = StyleSheet.create({
TabBarMainContainer :{
justifyContent: ‘space-around’,
height: 50,
flexDirection: ‘row’,
width: ‘100%’,
},
button: {
height: 50,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#00BCD4’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexGrow: 1
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 20
}
});
|
10. 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
|
import * as React from ‘react’;
import { Text, View, StyleSheet, TouchableOpacity } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;
function Screen_1() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FF1744’
}}>
<Text style={styles.TextStyle}> This is Screen 1 ! </Text>
</View>
);
}
function Screen_2() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#33691E’
}}>
<Text style={styles.TextStyle}> This is Screen 2 ! </Text>
</View>
);
}
function Screen_3() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FF6F00’
}}>
<Text style={styles.TextStyle}> This is Screen 3 ! </Text>
</View>
);
}
function CustomTabBar(props) {
const navigateToFirstScreen=()=>{
props.navigation.navigate(‘Screen_1’) ;
}
const navigateToSecondScreen=()=>{
props.navigation.navigate(‘Screen_2’) ;
}
const navigateToThirdScreen=()=>{
props.navigation.navigate(‘Screen_3’) ;
}
return (
<View style={styles.TabBarMainContainer} >
<TouchableOpacity onPress={navigateToFirstScreen} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle} > SCREEN 1 </Text>
</TouchableOpacity>
<View style={{height: 50, backgroundColor: ‘#fff’, width: 2}} />
<TouchableOpacity onPress={navigateToSecondScreen} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> SCREEN 2 </Text>
</TouchableOpacity>
<View style={{height: 50, backgroundColor: ‘#fff’, width: 2}} />
<TouchableOpacity onPress={navigateToThirdScreen} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> SCREEN 3 </Text>
</TouchableOpacity>
</View>
);
}
const Tab = createBottomTabNavigator();
function AllTabs() {
return (
<Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
<Tab.Screen
name=“Screen_1”
component={Screen_1} />
<Tab.Screen
name=“Screen_2”
component={Screen_2} />
<Tab.Screen
name=“Screen_3”
component={Screen_3} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<AllTabs />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
TabBarMainContainer :{
justifyContent: ‘space-around’,
height: 50,
flexDirection: ‘row’,
width: ‘100%’,
},
button: {
height: 50,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#00BCD4’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexGrow: 1
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 20
}
});
|
Screenshots in Android Device:
Screenshots in iOS Device:
Also Read :
React Native KeyboardAvoidingView with TextInput Example Tutorial
Where can We Find Bundle Identifier for React Native iOS Project
React Native Application Life Cycle Methods Explained Example Tutorial
React Native Show Image Icon Inside Activity Header Title Bar in React Navigation
React Native Change TextInput PlaceHolder Text Color iOS Android
