Navigation plays an important role in mobile applications. Without navigation, there will be little use of an application. In this tutorial, we will learn how to implement navigation in a React Native application from scratch. If you're familiar with the web, or Reactjs as a library, the general navigation concept is the same. It is used to navigate in different pages or screens (in our case). However, the implementation of a navigation library here is different from the web.
Before creating a mobile application, it is advisable to dedicate a quantity of time to strategies on how the application will handle navigation and routing. In this module, we will cover different navigation techniques at our disposal. First of all, let's set up our project. We will use react to the native CLI tool for this. If you do not have it installed, type the first line otherwise, if you already have it installed, you can skip the first command.
Next, we will navigate to the new project directory and run the project to see if everything is working correctly by running the following command.
Next, we will install the dependency we need to implement navigation in our application.
Now that we have created our minimum application and installed the required dependencies, we can start by creating our components and observing the different navigation techniques.
Stack Navigation is exactly what the word stack refers to. It's a stack of screens or app pages that can be removed from the top. A simple mechanism follows last to enter, first to exit. Stack the navigator, it means, adding screens one above the other. To implement it we will create three screens inside the directory
src /. If the directory name is not available, create one. These three screens are
Note, in all three screens we have access
navigation.state as props and
navigationOptions like a static object. NavigationOptions accepts header options for the screen title welcome. In the application screen above, you will see the welcome text in the toolbar. Other header options include
HeaderStyle and many others. This is made available to us by
this.props.navigation object also different properties to which we can directly access in our component. The first,
navigate It is used to specify the screen to navigate. The next,
come back() it is the method that helps us to return to the previous screen, if available. Finally, the
state The object helps us to keep track of the previous and the new state.
onPress () manager we can also access the screen directly as we are doing
ScreenOne.js. Just pass the component and the screen name as an argument.
All of these methods and objects are made available to our components due to the underlying configuration. To use these three screens and see how Stack Navigation works, we will modify ours
We are importing
react-navigation and all the other screens we've created in the source directory.
Tabbed Browsing is different from Stack Navigator. The different screens will be available for the user interface at one point and there is no first or subsequent screen. The user can access each tab from the tab menu. To create a tabbed browsing menu, we need to import it
createBottomTabNavigator. Let's see how it works. This time, we will modify the
Naturally, it is possible to modulate it a bit by separating the Home screen and the Setting screen into different components. For our demo application, the example above serves the purpose. you can add
tabBarOptions to change its appearance.
It might take a while to grab them and use them for your application, but once you've got all the basic concept, you can work wonders with it. It is also possible to integrate stack and card navigators for complex scenarios.
react-navigation has good documentation
The complete code is available in this Github Repo 👇
My name is Aman Mittal. I am a developer who creates and consults the apps related to Node.js and ❤️ React Native. This is mine website is @amanhimself on Twitter.
Originally, this article was published for the first time on Zeolearn.com.