19
DecThings You need to know about Navigation in React
29 Aug 2022
Intermediate
10.5K Views
6 min read
There are hardly any mobile apps that 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.
React Navigation is amongst the popular navigation library consisting of various components that make building and connecting screens in React Native much easy. It is important to understand how navigation in mobile applications works internally, and what are major differences exist between mobile-based navigation and web-based navigation.
Features of React Navigation:
- It is a library comprising of components that simplify building and connecting the screens in React Native.
- Provides a native look and feel on iOS and Android.
- Its working mechanism is consistent with the ‘learn once, write anywhere’ approach.
- The anchor tag <a> makes it easy to navigate between different web pages, and inside the same web page.
- Diverse attributes in the anchor tag enable developers to control navigation in web pages.
- Developers need not explicitly describe the behavior of the pages. This is because it can be managed by the browser.
- 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:
- Drawer navigation
- Tab navigation
- 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.
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.
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 the 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
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.
