Navigation plays an important role in mobile applications. Without navigation, there will be little use of an application. In this tutorial, we are going to learn how to implement Navigation in a React Native application from scratch. If you are familiar with web, or Reactjs as library, overall concept of navigation is same. It is used to navigate to different pages or screens (in our case). However, the implementation of a navigation library here is different from the web.
Before building a mobile application it is recommended that one spends an amount of time strategising how the application will handle navigation and routing. In this module, we will be covering different navigation techniques available to us. First, let us setup our project. We will use react native CLI tool for this. If you haven’t installed it, type the first line otherwise if you already installed, you can skip the first command.
Next, we will navigate into the new project directory and will run the project to see if everything is working fine by running the following command.
After that, we will install the dependency we need to implement navigation in our application.
Now that we have created our bare minimum application and have the required dependencies installed, we can start by creating our components and look at different navigation techniques.
Stack Navigation is exactly what the word stack refers to. It is a pile of screens or app pages that can be removed from the top. It follows a simple mechanism, last in, first out. It stack navigator, it means, adding screens on top of each other. To implement this we will create three screens inside the directory
src/. If the directory name is not available to you, do create one. These three screens are
Notice, in all three screens we have access
navigation.state as props and
navigationOptions as a static object. The navigationOptions takes 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 more. This is made available to us by
this.props.navigation object also different properties that we can directly access in our component. The first,
navigate is used to specify screen to navigate. Next,
goBack() is the method that helps us navigate back to the previous screen, if available. Lastly, the
state object help us keep track of the previous and the new state.
onPress() handler we can also access the screen directly as we are doing in
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 because of below configuration. To make use of these three screens, and see how Stack Navigation works in action, we will modify our
We are importing
react-navigation and all other screens we created inside the source directory.
The way Tab Navigation work is different from Stack Navigator. The different screens will be available to the UI at one point and there is no first or next screen. The user can access each tab from the Tab Menu. To create a Tab Navigation menu, we need to import
createBottomTabNavigator. Let us see how it works. This time, we will edit the
Of course, you can modularize it a bit by separating Home and Setting screen in different components of their own. For our demo application, the above example serves the purpose. You can add
tabBarOptions to modify its look and feel.
It might take a while to grasp them and use them for your application but once you get the whole of the basic concept, you can do wonders with it. You can even integrate Stack and Tab Navigators for complex scenarios.
react-navigation has a good documentation.
The complete code is available at this Github Repo 👇
⚛️ + 📱 react-navigation Example . Contribute to amandeepmittal/rnNavApp development by creating an account on GitHub.github.com
In web, Geolocation is provided as an API that has different methods to use in a web application. Similarly, React…medium.com
Originally, this article was first published at Zeolearn.com.