Bottom Tabs
- React Native course
- Intermediate
- Lesson 47/116
- 5 min
Learn the Bottom Tabs navigator.
What are Bottom Tabs?
Bottom Tabs is a navigation pattern that shows tabs at the bottom of the screen. The user taps a tab to switch to its screen. Apps like Instagram, Twitter and YouTube use this pattern.
The React Navigation library provides Bottom Tabs through createBottomTabNavigator. Inside a Tab.Navigator component you write a Tab.Screen for each tab. The tab order follows the order of the Tab.Screen entries. This pattern fits separating the main app sections: home, search, profile and so on. Each tab can hold its own Stack; when the user switches tabs the previous tab's state is preserved. This gives a smooth user experience.
Practice Call createBottomTabNavigator
Create a Tab object. Call createBottomTabNavigator and assign the result to Tab. This should be imported from React Navigation.
Starter code
// Import the bottom tab navigator from @react-navigation/bottom-tabs
// Assign the navigator factory call to the Tab variableSample solution
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();Tabs and screens
Each tab is defined with a Tab.Screen. It has two required props: name (the tab name, a string) and component (the component to show when that tab is selected). Example: <Tab.Screen name="Home" component={HomeScreen} />.
The name prop is used both for the tab label and for navigation references. The component is the React component rendered for that tab. If you add multiple Tab.Screen entries they all appear in order inside Tab.Navigator. Switching between tabs happens automatically when the user taps from one to another; you do not need to write extra code. This structure is the standard way to separate main sections cleanly. In the next lessons we will add icons, badges and custom styles.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What are Bottom Tabs used for?
<Tab.Navigator>...</Tab.Navigator>- To make an API call
- For styling
- To switch between main sections Correct answer
- To calculate a score
Explanation: Bottom Tabs are used for switching between main sections.
2 Write the Navigator component
<____>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator><Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>Explanation: Tab.Navigator is the Bottom Tabs container.
3 Match the concept to its role
| Term | Meaning |
|---|---|
Bottom Tabs |
Bottom tabs |
Tab.Navigator |
Tab container |
Tab.Screen |
Single tab |
React Navigation |
Navigation library |