How does navigation work in React Native?

Unlike the web, there is no browser history or URL bar. A navigation library owns the navigation state, renders the active screen, and handles gestures, headers and the Android back button. React Navigation is the most common choice; Expo Router adds file-based routing on top of it.

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

type RootStackParamList = {
  Home: undefined;
  Detail: { id: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

Structure that scales

• A root stack for modals and authentication gates
• Tab navigators for top-level destinations
• Nested stacks per tab so each keeps its own history
• A typed param list shared across the app
• A linking configuration so every screen has a URL

Avoid passing non-serialisable values such as functions or large objects in params. Pass identifiers and read the data from a store or query cache. That keeps navigation state serialisable for state persistence and deep linking.