Stack Navigator in React Native

Introduction

A Stack Navigator helps you move between screens in an app, like pages in a book. It keeps track of where you are and lets you go back easily.

When you want to open a new screen on top of the current one, like opening a details page.

When you want users to go back to the previous screen with a back button.

When your app has a flow of screens, like login, then home, then profile.

When you want to keep a history of screens visited to navigate back.

When you want simple screen transitions with default animations.

Syntax

React Native

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

const Stack = createNativeStackNavigator();

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

Use NavigationContainer to wrap your navigator. It manages navigation state.

Each Stack.Screen defines a screen with a name and a component to show.

Examples

Example with only one screen. No navigation possible yet.

React Native

const Stack = createNativeStackNavigator();

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

Set initial screen to "Details" instead of "Home".

React Native

const Stack = createNativeStackNavigator();

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

Navigate from Home screen to Details screen when button is pressed.

React Native

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

Sample App

This app has two screens: Home and Details. From Home, you can go to Details. From Details, you can go back to Home.

React Native

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

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

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

Important Notes

The stack navigator keeps screens in a stack, so you can go forward and back easily.

Navigation actions like navigate and goBack control screen changes.

Stack navigation animations and header bars are handled automatically.

Summary

Stack Navigator manages screen navigation like a stack of pages.

Use it to move forward to new screens and back to previous ones.

Wrap your navigator in NavigationContainer and define screens inside Stack.Navigator.