React Navigation — Stack

React Navigation is the standard routing library for React Native. Stack Navigator pushes screens like a deck of cards — with back gestures on iOS and hardware back on Android.

Screen navigation fundamentals

React Navigation is the standard routing library for React Native. Stack Navigator pushes screens like a deck of cards — with back gestures on iOS and hardware back on Android.

Stack navigation flow

Setup and basic stack

Install React Navigation

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
# iOS: cd ios && pod install

Stack navigator

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

export type RootStackParamList = {
  Home: undefined;
  Details: { itemId: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

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

// Navigate with typed params:
// navigation.navigate("Details", { itemId: "42" });