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:
|
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:
Bro please help me how to generate ipa in react native in mac please post it