Tab badge

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.

Exercise 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.

Show example 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.

Test yourself

Add a notification badge

options={{ tabBarBadge: ____ }}

Show answer

options={{ tabBarBadge: 3 }}

Match the concept to its role

tabBarBadge

Notification badge
options

Customization
null

Hides the badge
number

Badge value
When does tabBarBadge not show?
```
options={{ tabBarBadge: value }}
```
- Always when value is 0
- When value is a string
- When value is null or undefined
- When value is a number
Show answer

When value is null or undefined — tabBarBadge does not show when null or undefined.

Next lesson: Summary - Tab navigation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies