@react-navigation/stack

What is @react-navigation/stack?

@react-navigation/stack is a library for React Native that provides a way to create stack-based navigation in your application. It allows you to navigate between different screens in a stack-like manner, where each new screen is pushed onto the stack and you can go back to the previous screen by popping the stack.

What are @react-navigation/stack's main functionalities?

Basic Stack Navigator

This code sets up a basic stack navigator with two screens: HomeScreen and DetailsScreen. The NavigationContainer is the top-level component that manages the navigation tree.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

Custom Header

This code demonstrates how to customize the header for all screens in the stack navigator. The headerStyle, headerTintColor, and headerTitleStyle options are used to style the header.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: '#f4511e' },
          headerTintColor: '#fff',
          headerTitleStyle: { fontWeight: 'bold' },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Passing Parameters

This code shows how to pass parameters to a screen. The HomeScreen navigates to the DetailsScreen and passes parameters itemId and otherParam. The DetailsScreen then retrieves and displays these parameters.

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
}

const Stack = createStackNavigator();

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

export default App;

Other packages similar to @react-navigation/stack

react-navigation

react-navigation is a popular library for routing and navigation in React Native applications. It provides a variety of navigators including stack, tab, and drawer navigators. Compared to @react-navigation/stack, it offers a more comprehensive set of navigation solutions.

react-native-navigation

react-native-navigation is a navigation library created by Wix. It provides a native navigation experience and is known for its performance and smooth animations. Unlike @react-navigation/stack, which is JavaScript-based, react-native-navigation uses native components for navigation.

react-router-native

react-router-native is a routing library for React Native that is based on React Router. It allows you to use the same declarative routing approach as React Router in web applications. While @react-navigation/stack is specifically designed for stack navigation, react-router-native provides a more general routing solution.

README

@react-navigation/stack

Stack navigator for React Navigation.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/native @react-navigation/stack @react-native-community/masked-view

Now we need to install react-native-gesture-handler, react-native-screens and react-native-safe-area-context.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-gesture-handler react-native-screens react-native-safe-area-context

If you are not using Expo, run the following:

yarn add react-native-gesture-handler react-native-screens react-native-safe-area-context

If you are using Expo, you are done. Otherwise, continue to the next steps.

To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios
pod install
cd ..

To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

IMPORTANT: There are additional steps required for react-native-gesture-handler on Android after linking (for all React Native versions). Check the this guide to complete the installation.

Usage

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

const Stack = createStackNavigator();

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={Home} options={{ title: 'Home' }} />
      <Stack.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
      <Stack.Screen
        name="profile"
        component={Profile}
        options={{ title: 'Profile' }}
      />
    </Stack.Navigator>
  );
}