×

Things You need to know about Navigation in React

Amit Kumar  Print   5 min read  
03 Sep 2021
 
Intermediate
339 Views

There are hardly any mobile apps which are made up of a single screen. A navigator handles the presentation and transition between multiple screens. The following article discusses React navigation and the different navigation types available in React Native. If you are starting with navigation then you will perhaps use React Navigation. 

In simple terms, React Navigation presents an easy navigation solution along with the capability to present common stack navigation as well as tabbed navigation patterns on iOS and Android. Alternatively, you can understand it as a solution backed by the React Native community which works with the native navigation components of Android and iOS.

Features of React Navigation:

  1. It is a library comprising of components that simplify building and connecting the screens in React Native.
  2. Provides a native look and feel on iOS and Android.
  3. Its working mechanism is consistent with the ‘learn once, write anywhere’ approach. 
  4. The anchor tag <a> makes it easy to navigate between different web pages, and inside the same web page.
  5. Diverse attributes in the anchor tag enable developers to control navigation in web pages.
  6. Developers need not explicitly describe the behavior of the pages. This is because it can be managed by the browser. 
  7. Right from defining navigation type to nesting the navigation, React Navigation simplifies all the tasks to save you time and effort.

Navigation types in React Navigation:

The 3 key navigation types are as follows:

  1. Drawer navigation
  2. Tab navigation
  3. Stack navigation

Now let’s briefly understand each of these types:

Drawer navigation:

It comprises patterns in navigation that let you use a drawer from the left side for smooth navigating between and across screens. Most commonly, it comprises links that offer access to moving amongst screens. It is identical to sidebars found in web-based applications. Twitter uses drawer navigation. The react learning path discusses in detail how drawer navigation works.

The following diagram shows how you get smooth access to various options just like a sidebar.

Fragment Navigation Drawer | CodePath Android Cliffnotes

Tab navigation:

In most mobile applications, this navigation type is the most common one. It accomplishes navigation via tab-based components. Moreover, it comes with top and bottom tabs. You can use the profile screen for the top tab navigation and the home screen for the bottom navigation. One of the famous applications which use tab navigation is Instagram. 

The following diagram shows the smooth navigation and access to bottom tabs.

Bottom tab navigation in React native | by Shivam Bhasin | Noteworthy - The Journal Blog

Stack navigation:

The smooth transition amongst screens is possible if navigation is performed in form of stacks. In this navigation type, multiple screens are stacked on top of one another. The transition between screens includes substituting one screen with another. One of the well-known applications that utilize stack navigation is the WhatsApp chat screen. When you go through React tutorial, you will be familiar with this navigation type in depth.

From the following diagram, it can be understood that you can switch from stack screen 1 to stack screen 2. Choosing any one screen will replace another.

Navigators:

A React Navigation app can be considered a chain of navigators. They define the proper screen flow of your app. Every React navigator contains different configuration options which can be defined in plain Javascript. For example, it is possible to define the header behavior of a stack or the style and icons of your tabs. Depending on which one you choose, the behavior of your navigators will be different.

It is allowed to embed navigators within other navigators to enlarge the app content as you like. You can embed a stack navigator within a tab navigator to make sure each tab comprises a hierarchy of views. At this point, React Navigation proves to be a useful tool. It enables you to sculpt your navigation as you want,

One example of a custom navigator is the FluidNavigator. It is a community created navigator which offers Shared Element Transitions when carrying out navigation between screens. It means that you can maintain the elements and modify them after a transition to another screen.

Now let’s know how to install React Navigation:

Installation:

If you intend to go for Reactjs certification, it is better if you already know installation of React Navigation.

The following command helps you to directly install React Navigation in your React Native project with npm or yarn:

yarn add react-navigation 

or

npm install --save react-navigation

Also Read -

- Everything you need to know about create react app

- React vs React native: Key features,Pros & Cons

- Top 20 React Interview Questions and Answers

Share Article

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Training Schedules
+91 9999123502
Accept cookies & close this