React Navigation installation in React Native

Introduction

React Navigation helps you move between different screens in your app easily. Installing it sets up the tools you need to create smooth navigation.

You want to switch between a home screen and a settings screen.

You need a menu to jump to different parts of your app.

You want to go back to the previous screen with a button.

You want to organize your app into tabs or stacks.

You want to add animations when moving between screens.

Syntax

React Native

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

# For Expo managed projects
expo install react-native-screens react-native-safe-area-context

# For bare React Native projects
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-masked-view/masked-view

# Then run pod install in ios folder if using iOS
cd ios && pod install

Use npm install or expo install depending on your project type.

After installing, you may need to restart your development server.

Examples

This installs the core React Navigation library.

React Native

npm install @react-navigation/native

These libraries improve performance and handle safe areas on devices.

React Native

npm install react-native-screens react-native-safe-area-context

This installs the stack navigator for screen transitions.

React Native

npm install @react-navigation/native-stack

For iOS projects, this links native code after installing packages.

React Native

cd ios && pod install

Sample App

This simple app shows two screens: Home and Details. You can press a button on Home to go to Details. This works after installing React Navigation and its dependencies.

React Native

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 initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Important Notes

Always install all required dependencies for React Navigation to work properly.

For iOS, remember to run pod install inside the ios folder after installing packages.

Restart your development server after installation to avoid errors.

Summary

React Navigation lets you move between screens in your app.

Install the core library and required dependencies using npm or expo.

For iOS, run pod install after installing packages.