Stack Navigation in React Native

Stack navigation manages screens in a stack-like structure. When a new screen is opened, it is placed on top of the previous screen.

Home
  ↓
Details
  ↓
Profile

The Profile screen is currently at the top of the stack.

A stack follows a Last In, First Out concept.

Open Home

Home
────

Open Details

Details
Home
────

Open Profile

Profile
Details
Home
────

When the user goes back, the top screen is removed from the stack.

The native stack navigator can be installed using:

npm install @react-navigation/native-stack

The core React Navigation package should also be installed in the project.

npm install @react-navigation/native

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

The NavigationContainer contains the navigation tree of the application.

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

This function is used to create a native stack navigator.

const Stack =
    createNativeStackNavigator();

The Stack object provides components such as Stack.Navigator and Stack.Screen.

<Stack.Navigator>

    {/* Screens */}

</Stack.Navigator>

The Stack.Navigator contains all screens that belong to the stack.

<Stack.Screen
    name="Home"
    component={HomeScreen}
/>

Stack.Screen registers a React component as a route in the stack.

<Stack.Navigator>

    <Stack.Screen
        name="Home"
        component={HomeScreen}
    />

    <Stack.Screen
        name="Details"
        component={DetailsScreen}
    />

    <Stack.Screen
        name="Profile"
        component={ProfileScreen}
    />

</Stack.Navigator>

Three screens are now registered in the stack.

The first registered screen is normally displayed when the navigation stack starts.

<Stack.Screen
    name="Home"
    component={HomeScreen}
/>

The Home screen can therefore act as the initial screen of the application.

The navigate() method is used to move to another registered screen.

navigation.navigate(
    'Details'
);

The route name must match a registered Stack.Screen name.

<Button
    title="Open Details"
    onPress={() =>
        navigation.navigate(
            'Details'
        )
    }
/>

Pressing the button pushes the Details screen into the navigation flow.

<Pressable
    onPress={() =>
        navigation.navigate(
            'Details'
        )
    }
>

    <Text>
        Open Details
    </Text>

</Pressable>

Pressable can be used to create a custom navigation button.

The goBack() method returns the user to the previous screen.

navigation.goBack();

For example, if the current screen is Details and the previous screen is Home, calling goBack() returns to Home.

Native stack screens can display a header at the top of the screen.

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
        title: 'Home'
    }}
/>

The title can be customized using the options property.

<Stack.Screen
    name="Profile"
    component={ProfileScreen}
    options={{
        title: 'My Profile'
    }}
/>

The navigation header will display the specified title.

<Stack.Screen
    name="Login"
    component={LoginScreen}
    options={{
        headerShown: false
    }}
/>

The header can be hidden for screens such as login or splash screens.

Data can be passed to another screen while navigating.

navigation.navigate(
    'Profile',
    {
        userId: 101,
        name: 'Rahul'
    }
);

The Profile screen can read these values using the route object.

function ProfileScreen({
    route
}) {

    const {
        userId,
        name
    } = route.params;

    return (

        <View>

            <Text>
                ID: {userId}
            </Text>

            <Text>
                Name: {name}
            </Text>

        </View>

    );

}

navigation.navigate(
    'Product',
    {
        product: {
            id: 10,
            name: 'Laptop',
            price: 50000
        }
    }
);

The destination screen can access the object through route.params.

The initialRouteName option can be used to specify the initial route.

<Stack.Navigator
    initialRouteName="Home"
>

    <Stack.Screen
        name="Home"
        component={HomeScreen}
    />

    <Stack.Screen
        name="Profile"
        component={ProfileScreen}
    />

</Stack.Navigator>

This makes the initial screen explicit.

In some application flows, you may want to replace the current route instead of simply navigating forward.

navigation.replace(
    'Home'
);

For example, after a successful login, an application may replace the login screen with the main application screen.

Navigation state can also be reset when an application needs to create a new navigation history.

navigation.reset({
    index: 0,
    routes: [
        {
            name: 'Home'
        }
    ]
});

This can be useful for flows where previous screens should no longer be available through normal back navigation.

A common application flow is:

Login
  ↓
Home
  ↓
Profile
  ↓
Settings

After successful authentication, the application can move the user to the main application screens.

A shopping application can use stack navigation like this:

Products
   ↓
Product Details
   ↓
Cart
   ↓
Checkout

Product information can be passed as navigation parameters when opening the Product Details screen.

• Forgetting to install the required navigation packages.
• Forgetting NavigationContainer.
• Using an unregistered route name.
• Using incorrect screen component imports.
• Passing incorrect parameter names.
• Using too many unnecessary nested navigators.
• Forgetting to handle loading or authentication flows properly.
• Not testing back navigation.

import React from 'react';

import {
    View,
    Text,
    Button
} from 'react-native';

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

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

const Stack =
    createNativeStackNavigator();

function HomeScreen({
    navigation
}) {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

            <Button
                title="Open Details"
                onPress={() =>
                    navigation.navigate(
                        'Details',
                        {
                            productId: 101
                        }
                    )
                }
            />

        </View>

    );

}

function DetailsScreen({
    navigation,
    route
}) {

    return (

        <View>

            <Text>
                Product Details
            </Text>

            <Text>
                Product ID:
                {route.params.productId}
            </Text>

            <Button
                title="Go Back"
                onPress={() =>
                    navigation.goBack()
                }
            />

        </View>

    );

}

export default function App() {

    return (

        <NavigationContainer>

            <Stack.Navigator
                initialRouteName="Home"
            >

                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                    options={{
                        title: 'Home'
                    }}
                />

                <Stack.Screen
                    name="Details"
                    component={DetailsScreen}
                    options={{
                        title: 'Product Details'
                    }}
                />

            </Stack.Navigator>

        </NavigationContainer>

    );

}

• Use meaningful screen names.
• Keep screen components separate.
• Use a clear navigation hierarchy.
• Pass only required parameters.
• Use goBack() when appropriate.
• Use replace() for flows where the previous screen should not remain in history.
• Use initialRouteName when the starting route needs to be explicit.
• Keep navigation configuration organized.
• Test navigation and back behavior on real devices or emulators.

Create React Native Project
          ↓
Install React Navigation
          ↓
Install Native Stack
          ↓
Create NavigationContainer
          ↓
Create Stack Navigator
          ↓
Create Screens
          ↓
Register Screens
          ↓
Set Initial Route
          ↓
Navigate to Another Screen
          ↓
Pass Parameters
          ↓
Use goBack()
          ↓
Use replace() When Required
          ↓
Test Navigation Flow

Stack navigation provides a simple and powerful way to manage screen-to-screen workflows in React Native applications. It is especially useful for login flows, product details, forms, profile pages and other sequential screen flows.