Navigation & Data›Core· 40 min read

Moving Between Screens (Stack)

A stack navigator lets you push to a new screen and tap back — like a pile of cards.

What you will learn

Set up a stack navigator
Move to another screen with navigation.navigate
Pass data between screens with route params

Screens, like a stack of cards

Real apps have many screens. React Navigation is the standard library for moving between them. The most common kind is a stack: opening a new screen pushes it on top, and the back button pops it off — exactly like a pile of cards.

First install it (one-time):

Install React Navigation and the stack navigator

npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

Note: Output: (These commands add the navigation packages to your project. There is nothing to see yet — we wire them up next.)

Two screens with a button to navigate

You create a stack, list your screens, and call navigation.navigate to move:

A two-screen stack; navigate carries data in params

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

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home</Text>
      <Button title="Go to Details"
        onPress={() => navigation.navigate('Details', { item: 'Milk' })} />
    </View>
  );
}

function DetailsScreen({ route }) {
  return <Text>You picked: {route.params.item}</Text>;
}

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

Note: Output: The Home screen shows a "Go to Details" button. Tap it and the Details screen slides in showing: You picked: Milk Tap the back arrow (added for free) to return to Home.

navigation.navigate('Details', { item: 'Milk' }) opens Details and sends data.
The target screen reads it from route.params (here route.params.item).
The back button appears automatically at the top.

The whole navigation flow, step by step

Putting it together, here is the full journey from setup to tapping back, in order:

You wrap the whole app once in <NavigationContainer> — the box that holds all your screens and tracks where the user is.
Inside it, <Stack.Navigator> lists your screens. Each <Stack.Screen> gives a name ("Home", "Details") and the component to show.
The app opens on the first screen, Home, which appears at the bottom of the stack.
The user taps "Go to Details". Its onPress runs navigation.navigate('Details', { item: 'Milk' }) — go to the screen named "Details" and carry along the data { item: 'Milk' }.
React Navigation pushes the Details screen on top of Home (it slides in) and adds a back arrow at the top for free.
Details reads the data it was sent from its route prop: route.params.item is 'Milk', so it shows "You picked: Milk".
The user taps the back arrow. Details is popped off the stack, revealing Home again underneath — just like lifting the top card off a pile.

Tip: Every screen you register gets a navigation prop (to move around) and a route prop (to read params). That pair is how screens talk to each other.

Q. How does a screen read the data sent to it during navigation?

Answer: Data passed in navigate('Screen', {...}) arrives on the target screen as route.params.

✍️ Practice

Add a third screen and a button on Details that navigates to it.
Pass a second value in params (e.g. a price) and show it on Details.

🏠 Homework

Build a two-screen app: a list of three items, where tapping one opens a Details screen showing that item’s name.