How To Use React Navigation In Your React Native Project

In this article, we will learn how to use React Navigation in React-Native.

• First of all, we have to create a react-native application.

npx create-expo-app AwesomeProject

Installation and setup :

• First, you need to install them in your project:

npm install @react-navigation/native

Installing dependencies into an Expo managed project.

• In your project directory, run:

npx expo install react-native-screens react-native-safe-area-context

Installing dependencies into a bare React Native project.

• In your project directory, run:

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

Wrapping your app in NavigationContainer.

• Now we must wrap NavigationContainer across the entire app. This is often done in your entry file, such as index.js or App.js

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

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.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

• You already have a navigation container. This element controls the navigation state and the navigation tree. It should therefore wrap Stack navigators.
• Stack.Navigator is included in NavigationContainer. CreateNativeStackNavigator is used to build the stack.
• This function returns an object containing 2 properties: Screen and Navigator.
• The Navigator property is a React element and it should be used to wrap the Screen elements to manage routing configurations.
• Thus, one or more Stack.Screen components will be present inside Stack.Navigator. A Stack.Screen component will be present for each route.
• A Screen component accepts two properties: the component property, which specifies the component to render for this route, and the name prop, which is the route name and will be accessed later when going to this route.
• As you can see, you’re passing HomeScreen component to the Home route, so you need to create it now.

Now, Open the App.js file. Change the code in the App function.

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

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

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: '30px', fontWeight: 'bold', padding: '20px' }}>Details Screen</Text>
      <View>
        <Button
          title="Go to Home... again"
          onPress={() => navigation.navigate('Home')}
        />
        <Button
          title="Go to About... again"
          onPress={() => navigation.navigate('About')}
        />
      </View>
    </View>
  );
}

function AboutScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: '30px', fontWeight: 'bold', padding: '20px' }}>About Screen</Text>
      <View>
        <Button
          title="Go to Home... again"
          onPress={() => navigation.navigate('Home')}
        />
        <Button
          title="Go to Details... again"
          onPress={() => navigation.navigate('Details')}
        />
      </View>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

Output :