How to use React Navigation (Stack Navigator) :

Knowing how to create Navigation in Mobile app development is very fundamental knowledge for a Developer. In this blog, I will simplify the process of creating Navigation in React-Native for Android developers :

In this tutorial, I am going to show how to install React-native Navigation and the fundamental packages required to Implement React navigation and in the next tutorial, I will teach how to implement navigation.

There are so many types of navigation available in "React-Navigation" like
Stack, Native Stack, Dewaer, Bottom tabs, Material Bottom tabs, Material Top Tabs.

Before using any type of them we need to install some fundamental packages such as

@react-navigation/native, react-native-screens, react-native-safe-area-context
There are fundamental packages we need to install before we implement any navigation.

In this tutorial, I am using npm to install any Dependencies.

Step 1: Installing React-Navigation and required packages :
@react-nativigation/native :

npm install @react-navigation/native

@react-native-screens, react-native-safe-area-context :

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

Step 2:
Add this code in the import section of MainActivityjava file which is located in android/app/src/main/java/<your package name>/MainActivity.java

import android.os.Bundle;

After adding the code add another block of code inside the MainActivity.java file

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

Example :

Step 4:

This is the most important step to implement the Navigation :

Installing the Native-Stack packages :

Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

npm install @react-navigation/native-stack

These are all the packages that we need to implement navigation in react-native in the next part we are gonna see how to implement navigation with a simple step.

Hitesh Choudhary