Tab badge
- React Native course
- Intermediate
- Lesson 51/116
- 5 min
Learn tab badge and notifications.
Tab badge
A tab badge shows a small number or dot at a tab's corner. It signals a notification count or new content. For example unread message count, new activities.
In React Navigation you add tabBarBadge to the options prop of Tab.Screen. Example: options={{ tabBarBadge: 3 }}. This draws a "3" badge at the tab's top right corner. The value can be a number or a string. If you pass null or undefined the badge does not show. This feature is a visual way to direct the user to new content. In real apps the badge value usually comes from state or an API; as the notification count changes the badge updates.
Practice Add a badge to a Tab
Import createBottomTabNavigator as before and assign to Tab. HomeScreen and NotificationsScreen should be simple components. In the App component add options={{ tabBarBadge: 3 }} to the NotificationsScreen tab. The other tab should have no badge.
Starter code
// Import the bottom tab navigator; assign to Tab
// Write HomeScreen and NotificationsScreen
// Write the App component; add a notification badge (value 3) to NotificationsScreenSample solution
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function NotificationsScreen() { return <Text>Notifications</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Notifications" component={NotificationsScreen} options={{ tabBarBadge: 3 }} />
</Tab.Navigator>
);
}Dynamic badge
In real apps the badge value is not fixed; it comes from the notification count. You make the badge dynamic with state. Example: options={{ tabBarBadge: unreadCount }}. Here unreadCount is a state.
As notifications arrive, setUnreadCount is called; the badge updates automatically. This gives the user instant feedback. When the badge value is 0 React Navigation hides the badge. This behavior simplifies the code; you do not need to write unreadCount === 0 ? null : unreadCount. A dynamic badge is a part of the app that makes it feel alive. This pattern is one of the places where state and navigation meet.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Add a notification badge
options={{ tabBarBadge: ____ }}options={{ tabBarBadge: 3 }}Explanation: tabBarBadge: 3 shows the number 3 on the tab.
2 Match the concept to its role
| Term | Meaning |
|---|---|
tabBarBadge |
Notification badge |
options |
Customization |
null |
Hides the badge |
number |
Badge value |
3 When does tabBarBadge not show?
options={{ tabBarBadge: value }}- Always when value is 0
- When value is a string
- When value is null or undefined Correct answer
- When value is a number
Explanation: tabBarBadge does not show when null or undefined.