React Native Navigation
On my recent journey to learn React native, one of the biggest changes is the options for navigation within your application. I was used to using react-router, however with react native applications we can take advantage of a much more mobile-friends style of navigation. This blog will not dig too deep into implementation, but more into best-case uses and the key differences in styling.
The most basic and common of the react-navigation-stack options is the switch navigator. This will allow you to “switch” back and forth between screens while utilizing a back button on the header bar. The switch navigator is best used when moving back and forth between two screens, such as an index and show page.
Next up, we have the bottom tab navigator. The bottom tab is ideal for allowing users to have multiple navigation options. While the switch navigator is ideal for moving between two pages, with the bottom tab navigator the user can be presented with more options of end routes. Unlike the switch navigator, the navigation options will appear at the bottom of the device screen when using this.
With the react navigation library, these methods are highly customizable. With just a few prop calls, we can adjust if the header will be visible, the names of the links, the animations when the bar appears, and so much more. It is also important to note, when building out a complete app, you do NOT have to choose just one form of navigation. When mapping out your project, think about the user experience and how it should flow. For instance, I have a current project that utilizes a switch navigator for my log-in / sign-up pages. These two pages are the only options until the user logs in, so it makes perfect sense to use switch navigation here.
Once a user logs in, we navigate them to screen that is the initial tab on another bottom tab navigator. This allows the user to navigate freely in the app on the screens that are now relevant to them. Since they have more than just two options once signed in, the bottom stack navigator allows for easy and clear movement around the app.
