Navigation
- React Native course
- Intermediate
- Lesson 115/116
- 6 min
Combine Tab and Stack navigation.
Tab navigation
In this lesson we will add two screens to the app: Tasks and Stats. We set up a bottom tabbed structure with Tab.Navigator; the user taps tabs to switch between screens.
React Navigation's createBottomTabNavigator draws tabs in a bottom bar. <NavigationContainer> is the top component that wraps all navigators. You define each screen with <Tab.Screen name="..." component={...} />. Both screens read tasks from context with useTasks. This shows the power of sharing data from a single source instead of loading it in each screen separately.
Practice Add Tab.Navigator
Write two screen components: TasksScreen and StatsScreen. Both read tasks with useTasks. TasksScreen returns <Text>Tasks: {tasks.length}</Text>, StatsScreen returns <Text>Stats</Text>. Wrap App's return with <NavigationContainer> and <Tab.Navigator>; add two <Tab.Screen>s.
Starter code
import React, { useState, useEffect, createContext, useContext } from 'react';
import { Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const TasksContext = createContext();
export function useTasks() {
return useContext(TasksContext);
}
const Tab = createBottomTabNavigator();
// Write the TasksScreen component
// Write the StatsScreen component
function App() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
fetch('https://api.example.com/tasks')
.then((res) => res.json())
.then((data) => setTasks(data));
}, []);
return (
<TasksContext.Provider value={{ tasks, setTasks }}>
<Text>Tasks</Text>
</TasksContext.Provider>
);
}Sample solution
import React, { useState, useEffect, createContext, useContext } from "react";
import { Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const TasksContext = createContext();
export function useTasks() {
return useContext(TasksContext);
}
const Tab = createBottomTabNavigator();
function TasksScreen() {
const { tasks } = useTasks();
return <Text>Tasks: {tasks.length}</Text>;
}
function StatsScreen() {
const { tasks } = useTasks();
return <Text>Stats</Text>;
}
function App() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
fetch("https://api.example.com/tasks")
.then((res) => res.json())
.then((data) => setTasks(data));
}, []);
return (
<TasksContext.Provider value={{ tasks, setTasks }}>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Tasks" component={TasksScreen} />
<Tab.Screen name="Stats" component={StatsScreen} />
</Tab.Navigator>
</NavigationContainer>
</TasksContext.Provider>
);
}Two screens
We have two screens. TasksScreen shows the task count: <Text>Tasks: {tasks.length}</Text>. StatsScreen shows stats: <Text>Stats</Text>. Both access tasks with useTasks.
Tab navigation lets each screen render independently. Switching tabs keeps screen state; data is not lost. Since tasks state is held in context, both screens see the same data. If data changes in one screen, the other updates instantly. This is the core power of context. The name prop sets the tab label; you can give Turkish or English.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which top component wraps the tab navigator?
<NavigationContainer> ... </NavigationContainer>- View
- ScrollView
- NavigationContainer Correct answer
- SafeAreaView
Explanation: NavigationContainer wraps the navigator.
2 Tab.Screen component
<Tab.Screen name="Görevler" component={____} /><Tab.Screen name="Görevler" component={TasksScreen} />Explanation: TasksScreen is given to the Tab.Screen component prop.
3 Match each piece to its role
| Term | Meaning |
|---|---|
Tab.Navigator |
Tab structure |
Tab.Screen |
Single screen |
NavigationContainer |
Root wrapper |
name |
Tab label |