React Native Navigators
A Look at Different Navigators for Development
If you’re learning about React Native, then here is an article you dont want to skip! Navigators are used on every React Native app to navigate from one screen to another.
This posting will discuss some of the most used Navigators, as well as link to the proper docs for developers and students to use !
Topics in this article
- Minimum Requirments
- Tab Navigation
- Drawer Navigation
- Stack Navigation
- Material Top Tabs Navigation
- Material Bottom Tabs Navigation
Minimum Requirments
react-native>= 0.63.0expo>= 41 (if you use Expo)typescript>= 4.1.0 (if you use TypeScript)
Tab Navigator
First is Tab Navigation, this is where there are bottom tabs. Developers can add as many bottom tabs as they want, but usually put 2–5 tabs are used based on the complexity of the app.
Tab Navigation is perfect for seperating screens like a ‘Home’ and ‘Settings’ screen shown in the image above. The doc link shows code examples of how to get started using the Tab Navigator.
Keep in mind that for Tab Navigator, you must import icons or use Text as a label. You can use React Icons or custom Icons.
Drawer Navigator
Drawer navigator shows an easy to access menu once the user clicks on the drawer icon, or pulls the Drawer as shown below.
Drawer Navigator is great for apps that only have 1 screen, and the app developers would like to add a quick-to-access menu with things like Logout, Login, Settings, About, Privacy Policy etc. It’s also good for apps that you want to navigate on with only one hand.
Stack Navigator
Stack Navigator is the classic navigation system in this article. Its called a Stack because the screens begin to stack on top of each other when a user begins to press a button and it takes them 1 layer deeper.
Once you begin to do down a level on a Stack Navigator, there will be a back arrow button to go back to the previous Stack. Aside from the back arrow, you can also implement a slide to ‘slide-back’ to the previous screen.
Material Top Tabs Navigator
The most common use for Material Top Tabs is that users can slide from one screen to another. The current screen is usually colored different, or will have a slider to indicate to the user which screen they are currently looking at.
Material Top Tabs Navigator is commonly found in Music Apps, but there is no limitation of where you can and cannot use this Navigator.
Material Bottom Tabs Navigator
I’ve never actually used this type of navigation, however it is very similar to the first Tab Navigation. Material Bottom Tabs gives the developer more control over colors and sizes with the navigation.
If you want to make a custom looking bottom tab navigation, this is the way to go.
Want to learn about React Native Components next? Check out the article below.
Final Words
As someone learning React Native also, these articles are to help people break down the concepts and aid in understanding. I know programming documentation can be a bit complex, so please share, repost, tag or send these url’s to your friends!
I dont collect emails as I dont like to spam, so the only way other coders can read these articles is if YOU help share them !
. . .
If you enjoyed this content, make sure you follow, clap or comment
because that encourages me to write more. Cheers !
