Introduction to Navigation

Why Navigation Matters

Most mobile apps have multiple screens — a login screen, home screen, profile screen, settings, and more. Navigation is how users move between these screens. Without navigation, your app would be a single screen with everything crammed in. That's not a good user experience.

React Native doesn't have built-in navigation. Instead, you use a library called React Navigation, which is the standard for navigation in React Native apps. It's powerful, flexible, and handles all the complex navigation patterns you see in modern apps.

Installing React Navigation

To get started, you need to install React Navigation and its dependencies. The installation varies slightly between Expo and bare React Native projects.

# Install core navigation
npm install @react-navigation/native

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

# Install stack navigator (most common)
npm install @react-navigation/native-stack

The @react-navigation/native package is the core library. react-native-screens and react-native-safe-area-context are required dependencies. The @react-navigation/native-stack gives you the stack navigator, which is the most common navigation pattern.

Setting Up Navigation

Here's the basic setup for React Navigation in your app:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Your entire app must be wrapped in NavigationContainer. Inside that, you define your navigators. Each screen gets a name and a component. When you call navigation.navigate('Details'), React Navigation pushes the Details screen onto the stack.

How Navigation Works

Think of stack navigation like a deck of cards. Each new screen is placed on top of the previous one. When you go back, the top card is removed and you see the one underneath. This is the standard navigation pattern on iOS and Android.

The navigation object is automatically passed as a prop to every screen component. You use it to navigate forward (navigation.navigate), go back (navigation.goBack), or jump to a specific screen (navigation.popToTop). We'll explore all these patterns in the next lessons.