Tab Navigator
Learn to implement Tab Navigator for bottom tab navigation, providing easy access to different sections of your app. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples
Tab Navigator Features
Tab Navigator creates a tab bar at the bottom of the screen (or top on Android) that allows users to switch between different screens. It's perfect for main app sections.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Tab Configuration
- tabBarIcon - Icon for each tab — a critical concept in cross-platform mobile development that you will use frequently in real projects
- tabBarLabel - Label for each tab — a critical concept in cross-platform mobile development that you will use frequently in real projects
- tabBarBadge - Badge on tab — a critical concept in cross-platform mobile development that you will use frequently in real projects
- tabBarActiveTintColor - Active tab color — a critical concept in cross-platform mobile development that you will use frequently in real projects
- tabBarInactiveTintColor - Inactive tab color — a critical concept in cross-platform mobile development that you will use frequently in real projects
- tabBarStyle - Custom tab bar styling — a critical concept in cross-platform mobile development that you will use frequently in real projects
Tab Icons
Use icon libraries like react-native-vector-icons or @expo/vector-icons to add icons to your tabs. Icons help users quickly identify different sections of your app.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Tab Navigator Example
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
// Screen components
const HomeScreen = ({ navigation }) => (
<View style={styles.container}>
<Text style={styles.title}>Home</Text>
<Text style={styles.subtitle}>Welcome to the home screen!</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('Profile')}
>
<Text style={styles.buttonText}>Go to Profile</Text>
</TouchableOpacity>
</View>
);
const SearchScreen = () => (
<View style={styles.container}>
<Text style={styles.title}>Search</Text>
<Text style={styles.subtitle}>Search for content here</Text>
</View>
);
const ProfileScreen = () => (
<View style={styles.container}>
<Text style={styles.title}>Profile</Text>
<Text style={styles.subtitle}>User profile information</Text>
</View>
);
const SettingsScreen = () => (
<View style={styles.container}>
<Text style={styles.title}>Settings</Text>
<Text style={styles.subtitle}>App settings and preferences</Text>
</View>
);
// Tab Navigator
const TabNavigator = () => (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'Search') {
iconName = 'search';
} else if (route.name === 'Profile') {
iconName = 'person';
} else if (route.name === 'Settings') {
iconName = 'settings';
}
return <Icon name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#2196F3',
tabBarInactiveTintColor: 'gray',
tabBarStyle: {
backgroundColor: 'white',
borderTopWidth: 1,
borderTopColor: '#e0e0e0',
paddingBottom: 5,
paddingTop: 5,
height: 60,
},
headerStyle: {
backgroundColor: '#2196F3',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
})}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
title: 'Home',
tabBarBadge: 3, // Show badge with number
}}
/>
<Tab.Screen
name="Search"
component={SearchScreen}
options={{ title: 'Search' }}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{ title: 'Profile' }}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{ title: 'Settings' }}
/>
</Tab.Navigator>
);
// Main App
const App = () => {
return (
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
color: '#333',
},
subtitle: {
fontSize: 16,
color: '#666',
textAlign: 'center',
marginBottom: 20,
},
button: {
backgroundColor: '#2196F3',
padding: 15,
borderRadius: 8,
alignItems: 'center',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default App;