createBottomTabNavigator() component has its own State, Props and navigation methods which is used to make the Bottom Tab Navigator completely dynamic. In Today’s tutorial we would learn about How to highlight selected createBottomTabNavigator() Tab in React Navigation in React Native. As we all know when a tab is highlight on selection it looks much good in user’s eye, because when we change Background Color of Selected Tab it will let the user know which Screen on you are. So in this tutorial we would learn about React Native Highlight Bottom Tab Bar Selected Tab Android iOS Example.
Contents in this project React Native Highlight Bottom Tab Bar Selected Tab Android iOS Example:
1. Before getting started we have to install all the Essential NPM package libraries. I have already make tutorial regarding to this, So Here is the link of my previous Bottom Tab Bar Navigator post. Open the tutorial and follow Step 1, 2, 3 & 4.
2. Open your project’s main App.js file and import Text, View, StyleSheet, TouchableOpacity, NavigationContainer, 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’;
|
3. Creating a function named as Screen_1. We are using functional component structure in this tutorial. This is our First screen of Tab navigator.
|
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: ‘#00B8D4’
}}>
<Text style={{color: ‘#FFFFFF’, fontSize: 30, textAlign:‘center’}}> This is Screen 1 ! </Text>
</View>
);
}
|
Screenshot:
4. Creating another functional component named as Screen_2. This is our Second screen for Tab Navigator.
|
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: ‘#EA80FC’
}}>
<Text style={{color: ‘#FFFFFF’, fontSize: 30, textAlign:‘center’}}> This is Screen 2 ! </Text>
</View>
);
}
|
Screenshot:
5. Creating another functional component named as Screen_3. This is our Third screen for app.
|
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: ‘#00C853’
}}>
<Text style={{color: ‘#FFFFFF’, fontSize: 30, textAlign:‘center’}}> This is Screen 3 ! </Text>
</View>
);
}
|
Screenshot:
6. Creating a function component named as CustomTabBar with state, descriptors and navigation argument. This is our Custom Tab Bar for project in which we would Highlight the Selected Bottom Tab.
- isFocused : The isFocused is used to manage a State value which would returns us True or False and according to given value we would change the Style of selected TouchableOpacity button and make the button Highlight on selection.
|
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
|
function CustomTabBar({ state, descriptors, navigation }) {
return (
<View style={styles.TabBarMainContainer} >
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: ‘tabPress’,
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
return (
<TouchableOpacity
key={index}
accessibilityRole=“button”
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
style={isFocused ? styles.focus_button : styles.button} >
<Text style={isFocused ? styles.focus_textStyle : styles.TextStyle}> {label} </Text>
</TouchableOpacity>
);
})}
</View>
);
}
|
Screenshot of Bottom Tab Bar :
7. Creating createBottomTabNavigator() object named as Tab. We would use this object to define all the Screens of Tab Navigator.
|
1
|
const Tab = createBottomTabNavigator();
|
8. Creating a functional component named as AllTabs(). Inside this function we would first call our Custom Tab bar component using Tab.Navigator method. We would also define our already created 3 Screens using Tab.Screen method.
|
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>
);
}
|
9. Creating export default main function named as App(). In this function we would call the All_Tabs component wrapped in NavigationContainer component.
|
1
2
3
4
5
6
7
|
export default function App() {
return (
<NavigationContainer>
<AllTabs />
</NavigationContainer>
);
}
|
10. 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
const styles = StyleSheet.create({
TabBarMainContainer :{
justifyContent: ‘space-around’,
height: 50,
flexDirection: ‘row’,
width: ‘100%’,
},
button: {
height: 50,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#B0BEC5’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexGrow: 1
},
focus_button: {
height: 50,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#E040FB’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexGrow: 1
},
TextStyle:{
color:‘#FFFFFF’,
textAlign:‘center’,
fontSize: 20
},
focus_textStyle:{
color:‘#000’,
textAlign:‘center’,
fontSize: 20
}
});
|
11. 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
|
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: ‘#00B8D4’
}}>
<Text style={{color: ‘#FFFFFF’, fontSize: 30, textAlign:‘center’}}> This is Screen 1 ! </Text>
</View>
);
}
function Screen_2() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#EA80FC’
}}>
<Text style={{color: ‘#FFFFFF’, fontSize: 30, textAlign:‘center’}}> This is Screen 2 ! </Text>
</View>
);
}
function Screen_3() {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#00C853’
}}>
<Text style={{color: ‘#FFFFFF’, fontSize: 30, textAlign:‘center’}}> This is Screen 3 ! </Text>
</View>
);
}
function CustomTabBar({ state, descriptors, navigation }) {
return (
<View style={styles.TabBarMainContainer} >
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: ‘tabPress’,
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
return (
<TouchableOpacity
key={index}
accessibilityRole=“button”
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
style={isFocused ? styles.focus_button : styles.button} >
<Text style={isFocused ? styles.focus_textStyle : styles.TextStyle}> {label} </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: ‘#B0BEC5’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexGrow: 1
},
focus_button: {
height: 50,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#E040FB’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexGrow: 1
},
TextStyle:{
color:‘#FFFFFF’,
textAlign:‘center’,
fontSize: 20
},
focus_textStyle:{
color:‘#000’,
textAlign:‘center’,
fontSize: 20
}
});
|
Screenshots:
Also Read :
Wish You All a Very Very Happy New Year 2018
React Native Disable Remove All Yellow Warning Messages Box
Add Set Rounded Corners Radius Border on Image in React Native
React Native Set onPress onClick on View Component Android iOS Example Tutorial
React Native Rotate Text View Elements to Specific Degree using Transform
