React Native
Navigation
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.
Exercise 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.
Show example 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.
Test yourself
-
Which top component wraps the tab navigator?
<NavigationContainer> ... </NavigationContainer>
- View
- ScrollView
- NavigationContainer
- SafeAreaView
Show answer
NavigationContainer — NavigationContainer wraps the navigator.
-
Tab.Screen component
<Tab.Screen name="Görevler" component={____} />
Show answer
<Tab.Screen name="Görevler" component={TasksScreen} />
-
Match each piece to its role
- Tab.Navigator
- Tab structure
- Tab.Screen
- Single screen
- NavigationContainer
- Root wrapper
- name
- Tab label
Next lesson: Putting it together
