createBottomTabNavigator
- React Native course
- Intermediate
- Lesson 48/116
- 5 min
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.
Practice 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).
Starter code
// Import the bottom tab navigator; assign to Tab
// Import Text from react-native
// Write HomeScreen and SearchScreen components (each returns a Text)
// Write the App component; return Tab.Navigator with two Tab.Screen insideSample 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.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Import createBottomTabNavigator
import { ____ } from "@react-navigation/bottom-tabs";import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";Explanation: createBottomTabNavigator is imported from @react-navigation/bottom-tabs.
2 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 Correct answer
Explanation: Tab.Navigator is the container that wraps all tabs.
3 Match the concept to its role
| Term | Meaning |
|---|---|
createBottomTabNavigator |
Builds the Tab object |
Tab.Navigator |
Tab container |
Tab.Screen |
Single tab |
name |
Tab name |