@react-navigation/native-stack

What is @react-navigation/native-stack?

@react-navigation/native-stack is a library for React Native that provides a stack navigator for managing navigation and screen transitions in a mobile application. It is part of the React Navigation library and is designed to offer a more native-like experience with smooth transitions and customizable options.

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

Basic Stack Navigation

This code demonstrates how to set up a basic stack navigator with two screens: HomeScreen and DetailsScreen. The NavigationContainer wraps the navigator, and the Stack.Navigator component manages the stack of screens.

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

const Stack = createNativeStackNavigator();

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

export default App;

Customizing Screen Options

This code shows how to customize the screen options for the HomeScreen. You can set the title, header style, header tint color, and header title style to match your app's design.

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

const Stack = createNativeStackNavigator();

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

export default App;

Passing Parameters to Routes

This code demonstrates how to pass initial parameters to a route. The DetailsScreen receives an initial parameter itemId with a value of 42.

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

const Stack = createNativeStackNavigator();

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

export default App;

Other packages similar to @react-navigation/native-stack

react-navigation-stack

react-navigation-stack is another package from the React Navigation library that provides stack navigation. It is similar to @react-navigation/native-stack but is implemented in JavaScript rather than using native modules, which can result in less smooth transitions compared to @react-navigation/native-stack.

react-native-router-flux

react-native-router-flux is a popular navigation library for React Native that focuses on providing a simple API for defining routes and handling navigation. It offers similar functionality to @react-navigation/native-stack but with a different approach to defining and managing routes.

react-native-navigation

react-native-navigation is a navigation library developed by Wix that provides a native navigation experience for React Native apps. It offers a more native feel compared to @react-navigation/native-stack and is highly customizable, but it can be more complex to set up and use.

README

@react-navigation/native-stack

Stack navigator for React Native using native primitives for navigation. Uses react-native-screens under the hood.

Documentation can be found on the React Navigation website.

Expo SDK 35 and lower is not supported as it includes an older version of react-native-screens.

Installation

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

yarn add @react-navigation/native @react-navigation/native-stack

Or with npm

npm install --save @react-navigation/native @react-navigation/native-stack

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

expo install react-native-screens

If you are not using Expo, run the following:

yarn add react-native-screens

Or with npm

npm install --save react-native-screens

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'

Make sure to enable react-native-screens. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. App.js):

import { enableScreens } from 'react-native-screens';

enableScreens();

Usage

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

const Stack = createNativeStackNavigator();

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>
  );
}