Hello friends in this chapter I am going to learn you with a simple example how to add navigation in react Native. whenever you create any software, you have to create different pages for that pay different information and to access that page, you need to navigation for redirect that page . see both the images below

You can see two images here Image 1. 1 shows the home page and image 1. 2 shows the about page. In the first image there is a button “Click To Go About Page” . After clicking on this button it comes to about page “You have reached inside About Page”.

Getting started

Now let’s understand it with an example.

You create two files in your root directory, inside a new directory called page. The directory structure will be like this_

1. Home.js
2. About.js

Installation

To work on navigating pages we need to install few packages as follows −

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

Once you are done with the above installation next now procced to next step in this step you have to modify you MainActivity.java . file which is located in :-

android/app/src/main/java/<your package name>/MainActivity.java

Add the following code to the body of MainActivity class:

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

Note : Don’t forget to add the following code at the top of this file

import android.os.Bundle;

Full code of MainActivity.js

package com.myawesomeproject;

import com.facebook.react.ReactActivity;
import android.os.Bundle;
public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "MyAwesomeProject";
  }
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

}

In your app project create a folder called pages/ . Create 2 js files Home.js and About.js.

pages/Home.js

import * as React from 'react';
import { Button,StyleSheet, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
   return (
       <View  style={styles.container} >
        <View style={styles.buttonContainer}>
        <Button color="#009933"   title="Go To About Page"
         onPress={() => navigation.navigate('About', { name: 'About' })}/>
       </View>
        </View>
   );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20
    }

})
export default HomeScreen;

This page has a button title “Go To About Page” with some style and onPress Method After clicking on the user will navigate to about page.

The details of About Page is as follows −

pages/AboutPage.js

import * as React from 'react';

import {Button ,View,StyleSheet,Text} from 'react-native';

const AboutPage=()=>{
return(
          <View  style={styles.container} >
              <Text style={styles.aboutText}> You have reached inside About                Page</Text>
         </View>
 )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    aboutText: {
         margin: 20,
         color:'black',
           textAlign: 'center',
           fontWeight: 'bold',
          fontSize: 20
    }

})
export default AboutPage

We are showing only a text on this page.

Now let us call both page in app.js file

import HomePage from './pages/Home';
import AboutPage from './pages/About';

And also we need to import NavigationContainer from @react-navigation/native will act as a navigation container. and Add createStackNavigator from @react-navigation/stack.

Now we can call to createStackNavigator() as shown below −

const Stack = createNativeStackNavigator();

Okey Now we can add the pages to this Stack using <Stack.Navigator> as the parent container. Navigation helps Our app to transition between screens where each new screen is placed on top of a stack.

<Stack.Navigator>
   <Stack.Screen name="Home" component={HomePage} />
   <Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator>

Here is the full code that helps in Navigation Screen in React Native −

app.js

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


import HomePage from './pages/Home';
import AboutPage from './pages/About';

const Stack = createNativeStackNavigator();

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

          </Stack.Navigator>
      </NavigationContainer>
  );
}