React Navigation was the result of countless iterations and lessons learned from Navigator, NavigationExperimental, and a few of the community-built React Native navigation libraries. Due to its flexibility and capability to work seamlessly on iOS, web and Android platforms, it gradually becomes one of the most widely used navigation library in React Native Ecosystem. Having based on the concept of Routers that can be nested and composed, React Navigation lets you define an application’s navigational flow with the use of its in-built Navigators.

What precisely are the Navigators in React Navigation?

Rarely, you will find a React Native app which works with a single screen. Transitions between screens are usually handled with React components called as “Navigators”. Navigators are also responsible for managing the presentation of an app’s user interface. In fact, they can also keep a record of their own history. So, anytime when you press back-button, it changes back to the previously viewed screen. Although, it might seem no-brainer for you but you can’t ignore the fact that even history can be changed quicker as you navigate throughout an app.

There are three types of Navigators defined in React Navigation:

StackNavigator:

As the name implies, StackNavigator comprises of screens in the form of a stack i.e a new screen being put on the top of an old screen

TabNavigator:

TabNavigator lets a user to navigates to different screens by tapping on tabs that can be placed on the top or bottom of the screen.

DrawerNavigator:

Widely used in Android, DrawerNavigator is some sort of a slide-out ‘drawer’ that points an user to the different screens.

The beauty of these three Navigators is that as a React Native developer, you can seamlessly integrate them in your mobile app. However, your preferences may differ from single screen app to the multi-screen one. In simpler terms, at the end of the day it all depends on the way you decide what navigator needs to be used in what use-case.

Let’s understand how these Navigators works all-together to make you navigate throughout your app.

How navigators work?

As I have already pointed out, Navigators are react components that are composed of some visible elements such as the tabs, drawer and header. These elements have the sole responsibility of implementing any sort of navigational change within your React Native app. In simpler terms, these elements control and handle the way you navigate from one screen to another thereby managing the animated transitions between screens, if there are any.

However, here’s the most interesting thing about Navigators in React Navigation:

The screen rendered by any navigator might be an entire Navigator in itself.

This is where the concept of nesting the navigators within navigators come into picture.

As your app evolves in terms of complexity so as your Navigation tend to evolve in general.