Summary - Tab navigation
- React Native course
- Intermediate
- Lesson 52/116
- 5 min
Combine Bottom Tabs, icons and badge to write a 4-tab app.
Summary - Tab navigation
In this group you learned Bottom Tabs, createBottomTabNavigator, tab icons, Material Top Tabs and tab badge. Bottom Tabs shows tabs at the bottom; each tab is a Tab.Screen. You add icons with tabBarIcon and a notification badge with tabBarBadge.
Material Top Tabs shows tabs at the top and switches by swiping. Now you will combine all these pieces into a 4-tab app. Each tab will have an icon; one tab will have a notification badge. This builds the navigation backbone of a real app. You will move step by step and bring everything you learned together. The result will be a user-friendly tab structure.
Practice Write a 4-tab app
Write an App component. Import createBottomTabNavigator and assign to Tab. Import Ionicons from @expo/vector-icons. Write four simple components: HomeScreen, SearchScreen, ProfileScreen, NotificationsScreen (each returns a Text). In the App component put four Tab.Screen entries inside <Tab.Navigator>. Add options={{ tabBarIcon: ({ color, size }) => <Ionicons name="..." color={color} size={size} /> }} to each (Home: "home", Search: "search", Profile: "person", Notifications: "notifications"). Also add tabBarBadge: 3 to NotificationsScreen.
Starter code
// Import the bottom tab navigator and the icon set; assign to Tab
// Import Text from react-native
// Write Home, Search, Profile, Notifications screens
// Write the App component; put four Tab.Screen; add an icon to each; add a badge to NotificationsSample solution
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function SearchScreen() { return <Text>Search</Text>; }
function ProfileScreen() { return <Text>Profile</Text>; }
function NotificationsScreen() { return <Text>Notifications</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Tab.Screen name="Search" component={SearchScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="search" color={color} size={size} /> }} />
<Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Tab.Screen name="Notifications" component={NotificationsScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="notifications" color={color} size={size} />, tabBarBadge: 3 }} />
</Tab.Navigator>
);
}Practice Customize tab labels
Extend the 4-tab app from the previous lesson. Add a title to each Tab.Screen's options: "Home" for Home, "Search" for Search, "Profile" for Profile, "Notifications" for Notifications. (Other settings as in the previous solution.)
Starter code
// Write the previous 4-tab app
// Add a title to each Tab.Screen's options
// Home: "Home", Search: "Search", Profile: "Profile", Notifications: "Notifications"Sample solution
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function SearchScreen() { return <Text>Search</Text>; }
function ProfileScreen() { return <Text>Profile</Text>; }
function NotificationsScreen() { return <Text>Notifications</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ title: "Home", tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Tab.Screen name="Search" component={SearchScreen} options={{ title: "Search", tabBarIcon: ({ color, size }) => <Ionicons name="search" color={color} size={size} /> }} />
<Tab.Screen name="Profile" component={ProfileScreen} options={{ title: "Profile", tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Tab.Screen name="Notifications" component={NotificationsScreen} options={{ title: "Notifications", tabBarIcon: ({ color, size }) => <Ionicons name="notifications" color={color} size={size} />, tabBarBadge: 3 }} />
</Tab.Navigator>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do you add both an icon and a badge to a tab?
<Tab.Screen options={{ /* ... */ }} />- Only tabBarIcon is added
- Only tabBarBadge is added
- They can't be added together
- Both tabBarIcon and tabBarBadge go inside options Correct answer
Explanation: You write both tabBarIcon and tabBarBadge inside options.
2 Set the tab label
options={{ title: "____", tabBarIcon: ... }}options={{ title: "Ana Sayfa", tabBarIcon: ... }}Explanation: title: "Home" sets the tab label.
3 Match the concept to its role
| Term | Meaning |
|---|---|
Bottom Tabs |
Bottom tabs |
tabBarIcon |
Draws the icon |
tabBarBadge |
Shows a badge |
title |
Tab label |