A Simple Guide To React Native Navigation

A Simple Guide To React Native Navigation

A Simple Guide To React Native Navigation

What is navigation in react native?

As we are all aware, React Native is a popular JavaScript-based mobile app framework released by Facebook in 2015 that allows you to build natively-rendered mobile apps for iOS and Android. This framework helps you to show your creativity by creating an application for various platforms which are composed of multiple functionalities.

And a mobile application is made up of various screens; for example, a simple app may have a Login Screen, SignUp screen, and a Home Screen. And navigation helps us to navigate or, in simpler words, move from one screen to another.

For this purpose, React Navigation library is used. React Navigation is one of the most well-known navigation libraries available for React.

Installing React Navigation

Here we will be talking about the latest erosion of React Navigation, i.e., 6.x, However, even now, the 5.x version is still the most stable version of React Navigation.

The first step of the installation can be done with the help of a node or yarn. But first, you must run the command below in your command line prompt.

The second step is to install some dependencies into our React Native application, like native screens and safe area context. Without these dependencies, you might get an error in running your application.

Now, we have to wrap the entire content in our app.js, which we are assuming to be the parent container of our application, in NavigationContainer. Then, you can write the code you want for your application’s navigation.

 

Native Stack Navigator

In react native, the most important thing is the stack navigator. To describe it transparently, one has to understand that this navigation helps your React Native app to switch between screens where each new screen is placed on top of a stack. Furthermore, it supports IOS and Android as it uses specific APIs.

To implement the stack navigation, you will first need to install @react-navigation/native-stack, given that you have already installed the dependencies shown above.

Here is an example of using the Native Stack Navigator to navigate between three screens. Firstly you will have to import createNativeStackNavigator on the page where you are creating your screens’ stack. 

After that, the user will first wrap the whole component in <Stack.Navigator> tag, and then for adding each screen, they will have to add the <Stack.Screen> tag, which accepts two parameters, i.e., name (name of the screen) and component (the screen’s component). Then a user will have to export the MyStack function.

Types Of Navigation in React Native:

Frontend developers can always be creative with what they do to their applications to make them more user-friendly, attractive, and simple to use. And therefore, they can use more than one type of navigation in a react native app. Below are the two most common navigation types of React Native.

Bottom Tab Navigator

A bottom tab bar navigation can be described as a normal tab bar on the bottom of your app’s screen that lets you transition between screens. This type of navigation is widespread in applications that you might use from day to day. Here is a simple example of using a minimally designed Tab bar navigation:

First, you must install the tab bar dependency, i.e., @react-navigation/bottom-tabs. Then you will have to import createBottomTabNaigator in your screen where you are creating the Tab bar. The third step is to wrap the whole component with <Tab.Navigator> Tag, and for each screen, use the <Tab.Screen> tag.

Drawer Navigation

This type of navigation can be defined as a panel that displays the navigation menu of your application. By default, this panel is not visible; however, when a user swipes the screen from the edge, this panel is usually opened from the left side of your application screen.

React Native Drawer Navigation is a handy and creative way for users to transition between various screens in their application. Below, we will see an elementary example of making drawer navigation of two screens:

Conclusion

It is necessary to have some background knowledge and expertise with React Native because React Native Navigation is a module that depends on and is designed to be used in collaboration with React Native.

Summary
Article Name
A Simple Guide To React Native Navigation
Description
This blog describes installing React Navigation using React Native, a popular JavaScript-based mobile app framework.
Author
Publisher Name
BugendaiTech Pvt Ltd
Publisher Logo
Spread the updates

Leave a reply



Notice: Undefined index: position_on_screen in /home/tl2jq5v7asif/public_html/wp-content/plugins/mystickyelements/mystickyelements-front.php on line 203