DEV Community

Cover image for React Native Services: React Native Navigation v5 With Illustration
Juan Mark
Juan Mark

Posted on

React Native Services: React Native Navigation v5 With Illustration

In this blog, we will discuss react native services that will be about thorough step-by-step react native navigation v5 with an illustration. We will see how to apply stack navigation in react native app development by utilizing a stack navigator. Navigation in react native is simple to apply; all credit belongs to the navigation library that provides a full solution for iOS and Android.

We will not just set up navigation and routing in react native app development but also consider how to custom-make the header bar, style it, center the title header, and set up the introductory route in react native development.

Read More: Why You Should Hire React Native Developers?

React Native Navigation: Explanation

React native navigation is a famous substitute for react navigation. It is a module that relies on and is designed to be utilized with react native services. React native navigation contradicts marginally in that it directly utilizes native navigation APIs on Android and iOS, which permits an extra native feel and appearance.

Illustration of React Native Navigation

In a browser, it can be linked to multiple pages by applying an anchor tag. The URL is accelerated to the web browser history stack when a user taps a link.

When the user press the back button, the web browser will show the options from the top of the history so that the present page will be shown as the last visited page.

The built-in concept of a global history stack in a browser is not available in react native services, so this is the point where react native navigation arrives to rescue the problem.

The react-navigation applies a stack navigator in your application to easily transit among the screens and administer navigation history.

A compelling alteration between how it operates in a browser and the react native services; react navigations stack navigator generate the animations and gestures that will be needed on iOS and Android gadgets when navigating among screens and routes in the stack.

Install the React Native Application

First, we must install the tool: create-react-native-app by entering this command in the computer system.

Image description

After this step, you must build a react native application by entering the command mentioned.

Image description

When you start and run the command as mentioned earlier in the system, then the CLI will ask you for the permit or authority to install Expo (Y/N); you can write “Y.” Download the Expo application to check the performance of the navigation application locally. Now let’s go to the project folder.

Image description

Installment of Navigation Packages in React Native App Development

There are some navigation packages that are needed to be installed in our project of react native app development. These navigation packages will authorize the user to navigate among the different screens in Android and iOS applications.

Image description
Source: positronx

The react-navigation is a part of react native services that are built by some core utilities, and then it will be utilized by the navigators to establish the structure of navigation in your application. Now, you need to download the below-mentioned dependencies used and managed by the many navigators.

Image description

Installation of Stack Navigator Library

All the libraries that have been installed till now are the shared foundations and fundamental blocks for the navigators. Every navigator resides in its personal library in react-navigation.

To apply the stack navigator in react native app development, you must install react-navigation/stack.

Image description
Source: positronx

Set Up Screens in React Native Development

The next step is to set up three screens that will aid us in react native app development to specify the routes. Now we need to move to the terminal and start running the program by entering the below-mentioned command.

Image description
Source: positronx

Now, you need to open the file named screen/Home.js and then enter the mentioned code:

Image description

After the completion of the step mentioned earlier, click the screen/Blog.js file and enter the mentioned code:

Image description

Click the file named screen/BlogDetails.js and enter the mentioned code:

Image description

Hitch on Stack Navigator in React Native App Development

Open the file named App.js and then, import the NavigationContainer, then createStackNavigator libraries:

Image description

Now, you need to import the Blog, Blog Details, and Home screens on the application at the top.

Image description

Now you have to specify the const stack and accredit the createStackNavigator() method.

Image description

Image description

Image description

The header bar can be set up separately for each route. Despite this, we will configure a normal header bar for each screen. Establish the default route in react native development by utilizing the “initialRouteName: screen name” property, then you have to pass the tag of Stack.Navigator.

The header bar can be styled by our choice by entering the headerStyle, center the title, and background color for the react-navigation header.

We can define the route within the Stack.Screen tag for allowing the routing in react native app development. If you are confused in any step, then it is recommended for you to hire react native developer or go for the react native consulting company so they will clear the issue and make the development easy for you.

Lastly, we will cover the NavStack withal NavigationContainer to navigate among the screens.

Read more: Excellent React Native App Development Tools in 2022

The final product or outcome of the App.js file is as follows:

Image description

Image description
Source: positronx

Depending on the package manager, you can run or initiate any of the given commands.

Image description

Image description

Final Words on the Topic

Certainly, this react native navigation v5 illustration has come to an end. Hopefully, you have understood how you can configure stack navigation in the procedure of react native app development and the customization of the header bar from the beginning.

However, if you find any difficulty regarding the establishment of the program, then you can hire react native developer and go for react native consulting as well.

REQUEST A CONSULTATION

Top comments (0)