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 strategizing 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.
https://gist.github.com/93ba79bdbe41ae015be6f6a0fd663f8f
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.
https://gist.github.com/20267ee1937c9e2f26079617d7157cd1
After that, we will install the dependency we need to implement navigation in our application.
https://gist.github.com/63d73fd9ad42498f48c6eee6cb115c88
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 .js files: ScreenOne, ScreenTwo and ScreenThree.
https://gist.github.com/cf65178d8a13b4a2e169ce49c6fd2ecc
https://gist.github.com/d9ca037150c94a53e675d135d5a895b4
https://gist.github.com/04828abfa4bd12ceff146ee7b74528a5
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 headerTitle, headerStyle and many more. This is made available to us by react-navigation dependency.
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.
Using 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.
https://gist.github.com/69b8e639ec54c383a38ab751d0691d8c
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 App.js as:
https://gist.github.com/11ef8958a02e1d47db606e747e1db7b1
We are importing StackNavigator from react-navigation and all other screens we created inside the source directory.
Screen One
Screen Two
Screen Three
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 App.js code.
https://gist.github.com/1c08f087ec3de1546c22715cbe92d09a
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.
https://gist.github.com/23f746b9a84f90d0a0b532653eceaef9
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.