@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.

Installation instructions and documentation can be found on the React Navigation website.