How to Install React Navigation in React Native

To install React Navigation in a React Native app, run npm install @react-navigation/native and then install required dependencies like react-native-screens and react-native-safe-area-context. Finally, install a navigator package such as @react-navigation/native-stack and wrap your app in a NavigationContainer.

Syntax

Installing React Navigation involves these main steps:

• Install core package: npm install @react-navigation/native
• Install dependencies: libraries needed for navigation to work properly on native platforms
• Install navigator: choose a navigator like stack, tab, or drawer
• Wrap app: use NavigationContainer to enable navigation context

bash

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

Example

This example shows how to install and set up a basic stack navigator in React Native using React Navigation.

javascript

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Text, View, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

Output

App shows a Home screen with a button. Pressing the button navigates to a Details screen.

Common Pitfalls

Common mistakes when installing React Navigation include:

• Not installing required dependencies like react-native-screens and react-native-safe-area-context.
• Forgetting to wrap the app in NavigationContainer, which manages navigation state.
• Using incompatible versions of React Navigation packages.
• Not running npx pod-install on iOS after installing native dependencies.

javascript

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

/* Right: Wrap with NavigationContainer */
import { NavigationContainer } from '@react-navigation/native';

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

Quick Reference

Summary of commands to install React Navigation:

bash

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

Step	Command	Purpose
1	npm install @react-navigation/native	Install core navigation library
2	npm install react-native-screens react-native-safe-area-context	Install native dependencies
3	npm install @react-navigation/native-stack	Install stack navigator
4	npx pod-install ios	Install iOS native pods (for Mac users)

Key Takeaways

Always install both the core package and required native dependencies for React Navigation.

Wrap your app in NavigationContainer to enable navigation features.

Choose and install the navigator type that fits your app (stack, tab, drawer).

Run npx pod-install ios after installing native dependencies on iOS.

Check package versions to avoid compatibility issues.