React Native Navigation Setup

Navigation lets users move between screens in your app. React Native does not include navigation built-in — you add a library called React Navigation. This topic covers installation, configuration, and the core concepts that all navigation patterns share.

What Navigation Does

Without Navigation                With Navigation
──────────────────────────────────────────────────────
App is stuck on one screen.       Users move freely between screens.

┌───────────┐                     ┌──────────┐    ┌──────────┐
│           │                     │  Home    │───►│ Details  │
│ One Screen│                     │  Screen  │    │  Screen  │
│  Forever  │                     └──────────┘    └──────────┘
└───────────┘                           │              │
                                        ▼              ▼
                                  ┌──────────┐    ┌──────────┐
                                  │ Profile  │    │ Settings │
                                  │  Screen  │    │  Screen  │
                                  └──────────┘    └──────────┘

Installing React Navigation

Run these commands in your project folder. Each command installs a specific part of the navigation system.

# Core library
npm install @react-navigation/native

# Required dependencies
npx expo install react-native-screens react-native-safe-area-context

# Stack navigator (for screen-by-screen navigation)
npm install @react-navigation/native-stack

# Tab navigator (for bottom tab bar)
npm install @react-navigation/bottom-tabs

The NavigationContainer

Every React Navigation setup wraps the entire app in a NavigationContainer. Think of it as the root container that holds your entire navigation system. You add it once at the very top level of your app.

// app/_layout.tsx (or App.js for bare React Native)

import { NavigationContainer } from '@react-navigation/native';

export default function RootLayout() {
  return (
    <NavigationContainer>
      {/* All your navigators and screens go inside here */}
    </NavigationContainer>
  );
}

App Structure:
┌───────────────────────────────────┐
│  NavigationContainer              │
│  ┌─────────────────────────────┐  │
│  │  Stack Navigator            │  │
│  │  ┌──────────┐ ┌──────────┐  │  │
│  │  │  Home    │ │ Details  │  │  │
│  │  │  Screen  │ │  Screen  │  │  │
│  │  └──────────┘ └──────────┘  │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

Core Navigation Concepts

Screen

A screen is one full view the user sees at a time. Each screen is a React Native component. The navigator manages which screen is currently shown.

Navigator

A navigator holds a set of screens and defines how the user moves between them. React Navigation has several navigator types — stack, tab, drawer, and more. Each type gives a different movement pattern.

Route

A route is the entry for one screen inside a navigator. It has a name (like "Home" or "Details") that you use when navigating to it.

Navigation Prop

Every screen component automatically receives a navigation prop. You call methods on this prop to move between screens.

function HomeScreen({ navigation }) {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Details')}>
      <Text>Go to Details</Text>
    </TouchableOpacity>
  );
}

Route Prop

The route prop carries data passed to the current screen from the previous screen.

// Sending data when navigating
navigation.navigate('Details', { itemId: 42, title: 'Blue Sneakers' });

// Receiving data on the next screen
function DetailsScreen({ route }) {
  const { itemId, title } = route.params;
  return <Text>{title} (ID: {itemId})</Text>;
}

Navigation Methods

Method                     What it does
────────────────────────────────────────────────────────────
navigation.navigate('X')   Go to screen X
navigation.push('X')       Go to X even if already there
navigation.goBack()        Go back to previous screen
navigation.replace('X')    Replace current screen with X
navigation.reset(...)      Clear history and start fresh
navigation.popToTop()      Go back to the very first screen

Passing Data Between Screens

Screen A                               Screen B
──────────────────────────────────────────────────────
navigation.navigate('ProductDetail',   route.params.productId
  { productId: 'SKU-123' })            → 'SKU-123'

┌─────────────────────┐   tap   ┌──────────────────────┐
│  Product List       │ ──────► │  Product Detail      │
│  [Blue Sneakers]    │         │  ID: SKU-123         │
└─────────────────────┘         └──────────────────────┘

Safe Area — Avoiding Notches and Home Bars

Modern phones have notches at the top and home bars at the bottom. Content behind these areas is hidden or cut off. The SafeAreaView component adds automatic padding to keep your content visible.

import { SafeAreaView } from 'react-native-safe-area-context';

export default function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Your content stays visible on all devices */}
    </SafeAreaView>
  );
}

Without SafeAreaView:        With SafeAreaView:
┌─────────────────┐          ┌─────────────────┐
│████ NOTCH ████  │          │████ NOTCH ████  │
│ Title hidden!   │          │                 │
│                 │          │  Title visible  │
│                 │          │                 │
│                 │          │                 │
│ █ HOME BAR █    │          │ █ HOME BAR █    │
└─────────────────┘          └─────────────────┘

Configuring Screen Options

Each screen can configure its header text, style, and buttons.

function HomeScreen({ navigation }) {
  return (
    <View>
      <Stack.Screen
        options={{
          title: 'My App',
          headerStyle: { backgroundColor: '#007AFF' },
          headerTintColor: '#ffffff',
          headerTitleStyle: { fontWeight: 'bold' },
        }}
      />
      <Text>Home Screen Content</Text>
    </View>
  );
}

Summary

React Navigation is the standard library for moving between screens. Wrap your app in NavigationContainer once. Each screen receives a navigation prop with methods like navigate and goBack. Pass data between screens through navigation.navigate and read it in the destination via route.params. The next topic builds on this foundation with stack and tab navigators.