How to Build a Mobile Navigation System With React Navigation
Mobile apps should have a navigation system that guides users effortlessly through various screens and functionalities.
React Navigation, a powerful and flexible navigation library for React Native, can help you create that experience. By harnessing its capabilities, you can effortlessly construct a great mobile navigation system.
Installing the React Navigation Library
React Navigation offers three main navigation patterns, namely the Stack, Tab, and Drawer navigation for building a navigation system. These navigation patterns provide a framework for organizing and managing navigation between different screens within your app.
To get started using React Navigation, install the library and its necessary dependencies:
Setting Up a Navigator
Each navigator within React Navigation lives in its own separate library. To use any of the navigators, you will have to install them individually.
A well-thought-out project structure is useful when building a navigation system for your mobile app. A good practice is to create ansrcfolder in your project’s root directory. Inside this folder, you should have ascreensfolder. This will serve to separate your screen components from other components.
You will be writing out the code to set up the navigation pattern you are using inside your project’sApp.jsfile.
Creating a Navigator inside theApp.jsfile is a best practice for several reasons:
Stack Navigator
The Stack Navigator is the most popular navigation pattern within the React Navigation library. It uses a stack data structure where each screen is a completely different component and is stacked on top of the previous one.
When a new screen is pushed on top of the stack, it becomes the active screen, and the previous screen is thrown beneath it. This allows users to navigate back and forth through the stack, like a website’s navigation flow. You canset up the stack navigator to transition from one screen to another.
For example:
The above code block creates a Stack Navigator component usingcreateStackNavigator()from the navigation library.
In this example, the Stack Navigator has two screens:HomeandDetails.
Now install the Stack Navigator:
InsideHomeScreen, you can use thenavigationobject to test the Stack Navigator:
Notice how the Stack Navigator automatically creates an arrow button to handle back navigation to the previous screens.
Tab Navigator
In some situations, having a back-and-forth navigation system like the Stack Navigator does not provide a great experience. A Tab Navigator is better suited for these cases. It displays the navigation screens available upfront to the user and can be easier to use,like a web navigation bar.
To get started, install the@react-navigation/bottom-tabslibrary usingthe NPM package manager.
WithcreateBottomNavigator(), you can create an instance of the Tab Navigator as you did with the Stack Navigator:
And then, define the screens you want as tabs within the navigator andNavigationContainer:
When running your app, you should see a Tab Navigator with your defined screens at the bottom.
You could use thetabBarPosition option to position the navigator at thetop,right,left, orbottom(default).
Drawer Navigator
Drawer Navigators, or drawers, are a common navigation pattern in mobile applications. You can open the drawers by swiping or tapping a button. This causes the drawer to slide in from the side of the screen, revealing its contents.
To use the Drawer Navigator, install it along withreact-native-gesture-handlerandreact-native-reanimated:
You will need to also configure reanimated inside yourbabel.config.jsfile:
Here’s an example of how to set up a Drawer Navigator:
In this example, theDrawerContentcomponent is passed as thedrawerContentprop tocreateDrawerNavigator. Inside theDrawerContentcomponent, you’re able to customize the content to display the desired information using text components or any other elements and styling.
Tab navigators are static and always visible. This is not always the best, as the tabs block parts of the screen and can take focus away from the main screen. You could use drawers as a dynamic tab navigator and create a navigation menu within the drawers. Users can then open the drawer to find a navigation menu.
You could also use the drawer to display additional content like a search bar, a user profile, contextual information, or anything that doesn’t require a full-screen view.
Consider these best practices to get the most out of the Drawer Navigator:
Passing Data With Navigation Props
React Navigation provides a powerful mechanism that allows you to pass data through navigation props.
Consider a scenario where you have a list of items on one screen, and when a user selects an item, you want to pass the corresponding data to another screen.
First, you need to define your navigation structure. Now, to pass data from theHomeScreento aDetailScreenwhen an item is selected, insideHomeScreendefine a function that handles the navigation and includes the data you want to pass.
ThehandleItemPressfunction utilizes thenavigation.navigatemethod to navigate to theDetailScreenwhile passing the selected item data as a parameter in the second argument.
To be able to access the passed data inside theDetailScreencomponent, you will need thenavigationprop:
Here, theDetailScreencomponent usesnavigation.getParamto retrieve the passed item from the navigation props. In this example, a default value of an empty string is set in case the data is not available. This way, your app won’t crash on rendering.
Depending on the complexity of your app,you may explore using state management libraries like Reduxor the context API to manage and share data globally.
Organizing Your Navigation Code
Properly organizing your navigation code will help you build a scalable and collaborative React Native app. You can do this by breaking down the navigation logic into manageable modules. This will make it easy to read and understand.
With this, you can be sure to create seamless navigation for your users while enjoying the development experience.
Find out how to get the most out of your React Native app and give your users the very best experience.
Taming data is easier than it looks.
Your phone is a better editor than you give it credit for.
My iPhone does it all, but I still need my dumb phone.
If an AI can roast you, it can also prep you for emergencies.
These films will leave you questioning humanity, but also wanting more.
