createBottomTabNavigator

Learn tab navigation with createBottomTabNavigator.

Using createBottomTabNavigator

createBottomTabNavigator is the factory function React Navigation provides for Bottom Tabs. When called it returns a Tab object that contains the Tab.Navigator and Tab.Screen components. Import: import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";.

Typical usage: const Tab = createBottomTabNavigator();. Then you write <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /></Tab.Navigator>. This structure is the backbone of bottom tab navigation. Tab.Navigator is a container; the parent component that wraps all tabs. Tab.Screen defines a single tab. This split is the same across all React Navigation navigators: the Navigator + Screen pair. This pattern brings consistency to the code.

Exercise Write a 2-screen Tab navigator

Import createBottomTabNavigator and assign to Tab as in the previous lesson. Then write an App component. Return <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Search" component={SearchScreen} /></Tab.Navigator>. HomeScreen and SearchScreen should be simple components (just return a Text).

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 SearchScreen() { return <Text>Search</Text>; }

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
    </Tab.Navigator>
  );
}

Screen options

Each Tab.Screen is customized with the options prop. This prop takes an object; it lets you set the tab label, icon and color. Example: options={{ title: "Home", tabBarIcon: ... }}.

The most common fields inside the options object are: title (tab label), tabBarIcon (a function that draws the icon), tabBarBadge (notification count). This customization lets the app gain a look that matches the brand identity. In the next lessons we will learn adding icons and badges separately. The options prop can also take a function that returns an object; this is useful for dynamic options. For example showing a different icon when the tab is focused.

Test yourself

Import createBottomTabNavigator

import { ____ } from "@react-navigation/bottom-tabs";

Show answer

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

What is the role of Tab.Navigator?
```
<Tab.Navigator>...</Tab.Navigator>
```
- Defines a single tab
- Adds an icon
- Skoru tutar
- It is the container that wraps all tabs
Show answer

It is the container that wraps all tabs — Tab.Navigator is the container that wraps all tabs.
Match the concept to its role

createBottomTabNavigator

Builds the Tab object
Tab.Navigator

Tab container
Tab.Screen

Single tab
name

Tab name

Next lesson: Tab icons

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies