Tab & Drawer Navigation

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Tab & Drawer Navigation without the intimidation factor
Write the code yourself and run it on Expo Go
Apply this concept immediately in a real app project

Let's think about it this way for a second

The Bottom Tab Navigator shows an app's major sections (Home, Search, Profile) as tab icons at the bottom of the screen, and each tab can carry its own Stack Navigator (the nested navigator pattern). The Drawer Navigator implements a side menu (the one that slides out from the side when you tap the hamburger icon) — it's typically used for settings and secondary features.

Let's connect this to a real-world scenario

Instagram/Twitter-type apps most commonly use a Bottom Tab (Home, Search, Notifications, Profile) — it's a standard mobile UX pattern because it's easy to reach with your thumb at the bottom of the phone. With nested navigation (nesting a Stack inside a Tab), tapping a post in the Home tab pushes a Detail screen from the Home tab's own stack, while the Tab bar stays put.

Bottom Tab Navigator = shows major sections as tab icons
Drawer Navigator = side menu (hamburger icon)
Nested navigator = you can nest a Stack inside a Tab

Code Example

javascript

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

You should see

Two tab icons — Home and Profile — appear at the bottom of the app, and tapping one switches the screen.

Try it in 5 minutes

Install createBottomTabNavigator and build two tabs — Home and Profile — yourself.

A quick word of caution

When building a Bottom Tab Navigator, watch out for the package name difference — @react-navigation/native-stack (Stack) vs @react-navigation/bottom-tabs (Tab) — get the install command wrong and you'll hit an import error.

Easy traps

Cramming too many screens into the Bottom Tab (more than 5) and overloading the UX — keep it under 5 tab items
Not thinking through the architecture before setting up a nested navigator (a Stack inside a Tab)

Now try it yourself

Install createBottomTabNavigator and build two tabs — Home and Profile — yourself.

You'll know it worked when: Two tab icons — Home and Profile — appear at the bottom of the app, and tapping one switches the screen.