Tab Navigation
A single stack navigator might suffice for a small mobile app with just two or three screens. However, most applications have more than a few screens and only using stack navigation may not be the most efficient way to navigate the entire app. so we use Tab navigation in mobile application. there are 2 types of tabs: bottom of the screen & top below the header. It is used to switch between different route screens.We can use tab navigation to allow the user to navigate to a number of different screens at the root level. Tabs are suitable when a number of screens carry roughly equal importance.
React Navigation allows us to pass entire navigators as a tab screen and the first screen of the stack will be the default screen for that tab.
Some configurations for our tabs:
1. tabBarPosition allows us to have our tabs at the top or bottom of our screen.
For iOS, this defaults to bottom and Android defaults to top. Specifying bottom means the tabs will render at the bottom for both platforms.
2. tabBarOptions allow us to modify styling for our tabs.first define the tab background color using the style object. Since we only want icons to show, also specified showLabel to be false and showIcon to true. set our icon colors for both active and inactive tabs.
3. renderIndicator allows us to pass in a function to modify how tab indicators are rendered. A default tab indicator shows for Android and we pass null to remove it entirely.
Example:
Bottom Tab Navigator:
____________________________________________________________________
import React,{Component} from 'react';
import {StyleSheet, Text, View,Button} from 'react-native';
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
);
}
}
class Profile extends Component {
render() {
return (
<View style={styles.container}>
<Text>Profile Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
});
const TabNavigator = createMaterialBottomTabNavigator(
{
Home: { screen: Home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>
</View>),
}
},
Profile: { screen: Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>
</View>),
activeColor: '#f60c0d',
inactiveColor: '#f65a22',
barStyle: { backgroundColor: '#f69b31' },
}
},
},
{
initialRouteName: "Home",
activeColor: '#f0edf6',
inactiveColor: '#226557',
barStyle: { backgroundColor: '#3BAD87' },
},
);
export default createAppContainer(TabNavigator);
____________________________________________________________________________________
Output:
____________________________________________________________________________________
App.js
import * as React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();
function TabStack() {
return (
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#FFFFFF',
inactiveTintColor: '#F8F8F8',
style: {
backgroundColor: '#633689',
},
labelStyle: {
textAlign: 'center',
},
indicatorStyle: {
borderBottomColor: '#87B56A',
borderBottomWidth: 2,
},
}}>
<Tab.Screen
name="FirstPage"
component={FirstPage}
options={{
tabBarLabel: 'Home',
// tabBarIcon: ({ color, size }) => (
// <MaterialCommunityIcons name="home" color={color} size={size} />
// ),
}} />
<Tab.Screen
name="SecondPage"
component={SecondPage}
options={{
tabBarLabel: 'Setting',
// tabBarIcon: ({ color, size }) => (
// <MaterialCommunityIcons name="settings" color={color} size={size} />
// ),
}} />
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Settings"
screenOptions={{
headerStyle: { backgroundColor: '#633689' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' }
}}>
<Stack.Screen name="Top_Tab" component={TabStack} options={{ title: 'Top_Tab' }}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Then we can create folder name as pages & then create 2 pages.
FirstPage.js
import * as React from 'react';
import { TouchableOpacity, StyleSheet, View, Text, SafeAreaView } from 'react-native';
const FirstPage = ({ navigation }) => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, padding: 16 }}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 16
}}>
HomeScreen
</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('SecondPage')}>
<Text>Go to settng Tab</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});
export default FirstPage;
SecondPage.js
import * as React from 'react';
import { TouchableOpacity, StyleSheet, View, Text, SafeAreaView } from 'react-native';
const SecondPage = ({ navigation }) => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 , padding: 16}}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 16
}}>
SettingScreen
</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('FirstPage')}>
<Text>Go to Home Tab</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});
export default SecondPage;
Output:
