Wednesday , June 23 2021

How to use React-Navigation in a React Native – Hacker Noon application

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.

To start

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.

Navigation stack

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 js File: ScreenOne, ScreenTwo is ScreenThree.

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 headerTitle, HeaderStyle and many others. This is made available to us by react-navigation addiction.

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.

using 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 App.js as:

We are importing StackNavigator from react-navigation and all the other screens we've created in the source directory.

Screen one

Screen two

Screenshot three

Tabbed browsing

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 App.js code.

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

Source link

Leave a Reply

Your email address will not be published.