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. Getting Started 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 for this. If you haven’t installed it, type the first line otherwise if you already installed, you can skip the first command. react native CLI tool 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 Stack Navigation is exactly what the word refers to. It is a pile of screens or app pages that can be removed from the top. It follows a simple mechanism, . It stack navigator, it means, adding screens on top of each other. To implement this we will create three screens inside the directory . If the directory name is not available to you, do create one. These three screens are files: , and . stack last in, first out src/ .js ScreenOne ScreenTwo ScreenThree Notice, in all three screens we have access as props and as a static object. The navigationOptions takes header options for the screen title . In the application screen above, you will see the Welcome text in the toolbar. Other header options include , and many more. This is made available to us by dependency. navigation.state navigationOptions Welcome headerTitle headerStyle react-navigation object also different properties that we can directly access in our component. The first, is used to specify screen to navigate. Next, is the method that helps us navigate back to the previous screen, if available. Lastly, the object help us keep track of the previous and the new state. this.props.navigation navigate goBack() state Using handler we can also access the screen directly as we are doing in . Just pass the component and the screen name as an argument. onPress() ScreenOne.js 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 as: App.js We are importing from and all other screens we created inside the source directory. StackNavigator react-navigation Screen One Screen Two Screen Three Tab Navigation 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 . Let us see how it works. This time, we will edit the code. createBottomTabNavigator App.js 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 to modify its look and feel. tabBarOptions Conclusion 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. has a good documentation. [react-navigation](https://reactnavigation.org/docs/en/getting-started.html) 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 amandeepmittal/rnNavApp My name is Aman Mittal. I am a developer who builds and consults on Node.js related apps and ❤️ React Native. This is my website and @amanhimself on Twitter. _In web, Geolocation is provided as an API that has different methods to use in a web application. Similarly, React…_medium.com Accessing Geo-location and App Permissions in React Native and Expo _Redux is an important part of the React Native ecosystem. If your world revolves around JavaScript, you’ve probably…_medium.freecodecamp.org How to integrate Redux into your application with React Native and Expo Originally, this article was first published at . Zeolearn.com

Twitter

Week 3 with React Native: Why use Expo?

Week 2 With React Native: Building a Weather App

Newsletter

How to use React-Navigation in a React Native App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps