React Native
Summary - Tab navigation
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.
Exercise 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.
Show example 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>
);
}
Exercise 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.)
Show example 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>
);
}
Test yourself
-
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
Show answer
Both tabBarIcon and tabBarBadge go inside options — You write both tabBarIcon and tabBarBadge inside options.
-
Set the tab label
options={{ title: "____", tabBarIcon: ... }}
Show answer
options={{ title: "Ana Sayfa", tabBarIcon: ... }}
-
Match the concept to its role
- Bottom Tabs
- Bottom tabs
- tabBarIcon
- Draws the icon
- tabBarBadge
- Shows a badge
- title
- Tab label
Next lesson: Drawer navigator
