Navigation Basics (Stack Navigator)

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

What you'll walk away with

Understand Navigation Basics (Stack Navigator), no need to be intimidated
Write code yourself and run it on Expo Go
Apply this concept immediately in a real app project

Let's think about this for a moment

React Navigation is the de facto standard navigation library for React Native apps — Stack Navigator manages screens as a 'stack' (piled one on top of another): navigating from screen A to B pushes B onto the stack, and the back button pops it off again (a familiar mobile navigation pattern). You move between screens with navigation.navigate('ScreenName') and go back with navigation.goBack().

Let's connect this to a real scenario

After installing npm install @react-navigation/native @react-navigation/native-stack, you wrap Stack.Navigator inside NavigationContainer — each screen gets registered as a Stack.Screen component (with a name prop + component prop). Calling navigation.navigate('ScreenB') from a button press on Screen A will transition to Screen B with an animation.

Stack Navigator = manages screens using a stack pattern
navigation.navigate('Name') = moving from one screen to another
navigation.goBack() = going back to the previous screen

Code Example

javascript

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Inside HomeScreen:
// <Button title="View Detail" onPress={() => navigation.navigate('Detail')} />

You should see

Pressing a button on the Home screen navigates to the Detail screen with a transition animation.

5-Minute Try-It

Create 2 screens (Home, Detail) and try connecting them with React Navigation's Stack Navigator.

A Quick Heads-Up

Writing navigation.navigate('WrongScreenName') won't cause a compile error but can crash at runtime — make sure the string inside navigate() exactly matches the Stack.Screen name prop.

Easy traps

Forgetting to wrap NavigationContainer at the root of App — navigation.navigate won't work
Trying to manually pass the navigation prop into a screen component without understanding how it gets there automatically (React Navigation provides it automatically)

Now Try It Yourself

Create 2 screens (Home, Detail) and try connecting them with React Navigation's Stack Navigator.

You'll know it worked when: Pressing a button on the Home screen navigates to the Detail screen with a transition animation.