Javatpoint Logo
Javatpoint Logo

React Native Navigation

React Native Navigation is used for managing the presentation, and transition between multiple screens. There are two types of navigation built in mobile applications. These are stack navigation and tabbed navigation patterns.

React Navigation Installation

React Navigation is generated from React Native community that provides the navigation solution written in JavaScript.

Create the React Native project and install the required packages and dependencies.

Install the react-navigation package in React Native project using any one of the below command.

After successful execution of the above command, it adds the "react-navigation": "^3.3.0" (3.3.0 is version) in package.json file.

After that, install react-native-gesture-handler package.

Now, link all the native dependencies together using command:

To complete the installation of 'react-native-gesture-handler' for Android, make the following modification in MainActivity.java.

projectDirectory/android/app/src/main/java/com/project/MainActivity.java

Creating a stack navigator

To create a stack navigation, we import createStackNavigator and createAppContainer functions of react-navigation library.

App.js

The createStackNavigator is a function which takes a route configuration object and options object. It returns the React component.

MainActivity.java

When we run the above code, we see an empty navigation bar containing the HomeScreen component.

Output:

React Native Navigation

Shorthand route configuration

When we have only a single screen as route that is Home screen component, we do not need to use the {screen: HomeScreen} , we can directly use the home component.

Adding title and styling navigation

Adding a second route screen

Create another class (ProfileScreen) in App.js file to add the second route screen to the stack navigator.

The initialRouteName options object specifies the initial route in the stack navigation.

Complete code:

App.js

Output:

React Native Navigation

In the next section, we will learn how to go from Home route to Profile route (one screen to another).






Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA