Navigation

Apps need many screens

Real apps have multiple screens — a list, a detail page, a settings page. React Native itself doesn’t include navigation; the standard library is React Navigation, which manages screens, transitions, the back button and the header bar.

Installing it

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

A stack navigator

A stack works like a pile of cards: you push a screen to go deeper, and pop (or tap Back) to return.

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

const Stack = createNativeStackNavigator();

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

The whole app is wrapped once in NavigationContainer. Each Stack.Screen registers a screen by name.

Moving between screens

Every registered screen receives a navigation prop:

function HomeScreen({ navigation }) {
  return (
    <Button title="Open profile"
      onPress={() => navigation.navigate('Profile', { userId: 42 })} />
  );
}

Receiving the data

function ProfileScreen({ route, navigation }) {
  const { userId } = route.params;          // read passed data
  return <Text>User #{userId}</Text>;
}
// go back:  navigation.goBack();

Tab navigation

For the common bottom-tab layout, add @react-navigation/bottom-tabs and wrap your stacks in a tab navigator — each tab keeps its own navigation state.

const Tab = createBottomTabNavigator();
<Tab.Navigator>
  <Tab.Screen name="Feed" component={FeedStack} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

Expo Router (file-based) — an alternative

Newer Expo apps can use Expo Router, where each file in the app/ folder automatically becomes a route (similar to web frameworks). It’s built on React Navigation under the hood.

Common mistakes

• Forgetting to wrap the app in NavigationContainer.
• Mistyping a screen name in navigate() (nothing happens).
• Passing large objects in params — pass an id and load the data on the next screen.

Summary: Use React Navigation: wrap the app in NavigationContainer, register screens in a stack, move with navigation.navigate('Name', params), read route.params, and add bottom tabs for the standard layout.