You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →

@react-navigation/stack

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-navigation/stack

Stack navigator component for iOS and Android with animated transitions and gestures

7.2.3

Source

npm

Version published: 3 weeks ago

Weekly downloads: 637K

Maintainers: 7

Weekly downloads

Created: 7 years ago

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