React Native – Navigation || How to implement Navigation in React Native App

React Navigation provides a mechanism for your app to transition between components and manage navigation history. the navigation work as stack. in the stack each screen push and pop on back and provide left/right transition with animation of screens. React Navigation’s native stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

For stat a navigation application we have to install  some require packages and dependencies.

Creat New App

$ npm i -g create-react-native-app 
$ create-react-native-app my-project 
$ cd my-project 
$ npm start

Installation:

Bellow React Navigation package is require to create the navigation structure in your app.

npm install @react-navigation/native

We need to install  react-native-screens and react-native-safe-area-context  for configuration .

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

for ios development install pod

npx pod-install ios

Add following code in MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

and add an import statement at the top of MainActivity.java file.

import android.os.Bundle;

Install Package for Stack Navigation
To use the native stack navigator, we need to install @react-navigation/native-stack

npm install @react-navigation/native-stack

Stack Navigation

createNativeStackNavigator  function returns an object with properties: Screen and Navigator. These two properties are React components used for configuring the navigator

Example – 1

Create a Home screen only, In next example we will show How to navigate one screen to another screen.

App.js

// In App.js in a new project

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

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


const Stack = createNativeStackNavigator();

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

export default App;

Output:

If we din’t set any initialRouteName='Home' then first Stack.screen set as default screen.
Generally we pass two props name and component  in Stack.screen  <Stack.Screen name="Home" component={HomeScreen}/>.

Options:

if we did not pass any title then  screen header display title from name prop.  React native provide options prop to pass title and addition data to screen.

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Home screen' }}
/>

Pass Addition Data

we can pass a screenOptions prop to the navigator to pass value for all screen in stack.

<Stack.Screen name="Home">
  {(props) => <HomeScreen {...props} extraData={data} />}
</Stack.Screen>

Example – 2

App.js

// In App.js in a new project

import * as React from 'react';
import { View, Text, SafeAreaView, Pressable, Alert } 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' ,backgroundColor:'yellow'}}>
            <Text>Home Screen</Text>
            <Pressable onPress={()=>{
              navigation.navigate('Details')
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Show Detail Screen</Text>
           </Pressable>
           
           <Pressable onPress={()=>{
              navigation.push('Details')

            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
                <Text >Push to Detail Screen</Text>
           </Pressable>
        </View>
   
  );
}

function DetailsScreen({navigation}) {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'lightgray' }}>
          <Text>Details Screen</Text>
          <Pressable onPress={()=>{
              navigation.goBack('Home')
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Go Back To Home Screen</Text>
           </Pressable>

           <Pressable onPress={()=>{
              navigation.popToTop('Home')
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Pop to root component</Text>
           </Pressable>

        </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

Output:

 ->