Navigation & Data›Extra· 30 min read

Tab Navigation

Bottom tabs let users jump between main sections with one tap — like Home, Search and Profile.

What you will learn

Add a bottom tab navigator
Give each tab its own screen
Know when tabs beat a stack

Tabs for the main sections

Many apps have a bottom tab bar — think Home, Search, Profile. Each tab is a top-level section the user can reach instantly. React Navigation has a bottom tab navigator for exactly this.

A handy way to picture the difference from the last lesson: a stack is a pile of cards you keep putting on top of each other (and a back button takes the top one off). Tabs are like the buttons on a TV remote — each one jumps you straight to a channel, and there is no “back” because you never stacked anything.

Install it (one-time):

Install the bottom tabs navigator

npx expo install @react-navigation/bottom-tabs

Note: Output: (Adds the bottom-tabs package. Nothing visible yet — we use it next.)

A two-tab app

It looks a lot like the stack, but you build it with createBottomTabNavigator. You still wrap everything in NavigationContainer, and each tab is a Tab.Screen pointing at a component:

A bottom tab navigator with two tabs

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text } from 'react-native';

const Tab = createBottomTabNavigator();

function Home() { return <Text>Home screen</Text>; }
function Profile() { return <Text>Profile screen</Text>; }

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Note: Output: A bar at the bottom with two tabs: Home and Profile. Tapping a tab instantly swaps the screen above it. Unlike a stack, there is no back button — tabs are siblings you switch between, not a pile.

Labels, titles and a starting tab

You will quickly want to control how each tab looks: a different label under the icon, the title shown at the top of the screen, and which tab opens first. You set these with options on each screen and initialRouteName on the navigator:

options sets the per-tab title and label; initialRouteName picks the first tab

<Tab.Navigator initialRouteName="Profile">
  <Tab.Screen
    name="Home"
    component={Home}
    options={{ title: 'Welcome', tabBarLabel: 'Home' }}
  />
  <Tab.Screen
    name="Profile"
    component={Profile}
    options={{ tabBarLabel: 'Me' }}
  />
</Tab.Navigator>

Note: Output: The app now opens on the Profile tab. The bottom bar shows two tabs labelled "Home" and "Me", and the Home screen’s header reads "Welcome". tabBarLabel changes only the word under the tab; title changes the header at the top of the screen — they are separate on purpose.

Use a stack when	Use tabs when
Screens go deeper (list -> details)	Sections sit side by side (Home, Search)
You want a back button	You want instant switching
Flow has a clear order	No order — pick any section anytime

Tip: Real apps often combine them: a tab navigator at the bottom, with a stack inside one tab so that section can drill down into detail screens. For example, a “Home” tab whose stack goes Home → Details → Comments, while the tab bar stays put at the bottom.

Watch out: There can be only one NavigationContainer in your whole app. When you nest a stack inside a tab, the container stays at the very top — you do not add a second one around the inner stack.

Q. When are bottom tabs a better fit than a stack?

Answer: Tabs suit equal, top-level sections (Home, Search, Profile) you jump between. Stacks suit drilling deeper with a back button.

✍️ Practice

Add a third tab called Settings with its own screen.
Write one sentence each for when you would choose tabs vs a stack.

🏠 Homework

Build a three-tab app (Home, Search, Profile), each tab showing a different Text title.