React Navigation
Routing and navigation for your React Native apps
React Native is similar to React, however, it is sometimes good to remember that you are building an application and not a web page. So when it comes to navigation things work differently as well. Normally, you would use something like an <a> tag to link to a different page or even the same page by pushing the URL onto the browser history stack. Since React Native doesn’t have that we need to use something else.
Enter… React Navigation
An easy to use library with built-in components that are completely customizable.
Let us start from the beginning.
Stack Navigation
The Stack navigation is exactly that, a stack of screens, one on top of another. Conceptually, it works similarly to how a web browser handles the navigation state. As users interact with the screen they push and pop items from the navigation stack. But it has something really important. It uses animations and gestures one would expect from an app.
When the user goes to another screen (pushing an item onto the top of the stack) if they want they can swipe back to the original screen. It comes with a built-in header as well, so the user will see the name of the screen. Take a look at the options prop to see how you can take full advantage of the stack navigator. Also you are able to disable the header or animations if that isn’t something you want to use in your application.
Then there are the other type of ways to navigate in an app.
Tab Navigation
Probably the most popular type of navigation in apps is the tab navigation. Take a look at some of the apps you might have on your phone. Instagram, Cash app, Whatsapp and more all make use of the tab navigation. The key idea behind UX design is simplicity. Ensuring that the user doesn’t have to ‘find’ what your app does by having it all accessible and organized is really important to that goal. React Navigation understands this and that is why they made certain features like tabBarIcon with easier access to make the icon configuration more convenient.
Drawer Navigation
Another common type of navigation is the Drawer type navigation. It looks exactly how it sounds. Like a drawer opening either from the left side of the screen or the right. The drawer holds a list of route options for the user to choose from. Most commonly it is seen in apps with a hamburger icon (☰) which symbolizes a menu. This type of navigation, from all the ones I mention, I suggest you spend the most time customizing. There isn’t anything as bland as a Drawer Navigator without any styling. On the other hand a well styled custom drawer could be that extra thing that will make your app stand out. I suggest taking a look at this youtube video if you are interested.
Conclusion
If you are making an app and want to add navigation. I suggest you use React Navigation. It is simple to use and will make your app interactive. I hope this was insightful and as always happy coding!
