Navigation in React Native

While working with React Native I realized that the most important and one of the hardest concepts to grasp was React Navigation. React Navigation is an npm module that provides routing and navigation for React Native apps. I think this is one of the most important aspects of developing in React Native just because how dependant mobile apps are on navigation. All apps that we use have some kind of a menu that may be a sidebar or a menu along the bottom. These in React Navigation is called the Drawer Navigator and Tab Navigator respectively.

Two common type of navigation; the drawer navigator and the tab navigator

Using React Navigation makes it very easy to implement these menu systems in our React Native applications. The documentation for React Navigation outlines how to get started in with the coding aspect so I won’t dive too deep into it.

React Navigation also gives us a couple of different ways to have routes for our screens set up.

Stack Navigation

The Stack Navigator helps us get to screens with the ability to go back either using a back button or a swipe gesture back. This is a very common navigation and should be familiar to anyone who used an app in the last 10 years. React Navigation helps us implement this

An example of a Switch Navigator

Auth Navigation or Switch Navigation

When Navigating through auth screens such as a login, create an account, or forgot password page we do not want the user to go back to the login screen unless they logout. This is why we need to implement a Switch Navigator instead of a stack in these cases. React Navigation again makes this a pre-built navigator that is extremely easy to implement using boilerplate code found in their documentation.