Routing with React Navigation in React Native

Tram Ho

In this article, we will learn how to navigate the mobile application screen using react-navigation in React Native.

Why React Navigation?

React Navigation is a popular library for routing and navigation in the React Native application.

React Navigation is a JavaScript-based library for screen navigation. It was officially introduced by both Facebook and the React Native Document as the optimal solution for screen navigation.

Getting Set Up

We are going to create an application called MyAlligatorFace.

First, create a new React Native application:

The idea is that when you open the application, the names of our friends will be displayed on the screen:

Home Screen

Our application will need two screens: HomeScreen and FriendScreen. In HomeScreen, we will see our friends and in the FriendScreen screen we will be able to add new friends.

To get started, grab the code from App.js and add it to a new file called Home.js:

To navigate to HomeScreen, we will create a StackNavigator.

StackNavigator with React Navigation

StackNavigator works exactly like a stack. Each screen we navigate to is pushed to the top of the stack and each time the back button is pressed, this screen is pushed off the top of the stack.

First, install react-navigation:

Next, create a file named AppNavigator.js:

This creates a small stack in Navigator, only one screen: HomeScreen.

The display content of the application starts from App.js. If we include our StackNavigator in App.js, our application will be much more modular and clean.

Edit App.js file as follows:

After saving changes and running the application, everything is still running and nothing has changed. But the truth is we still do not have friends. Let’s do FriendScreen to change that!

Friends Page

First create a file similar to Home.js called Friends.js:

Next, add it to the Navigator:

Finally, add navigation buttons between the two screens.

In Home.js, correct the code like the following:

In Friends.js:

Let’s talk about this.props.navigation :

With react-navigation: as long as our screen is included in StackNavigator, it automatically inherits many props from the navigation object. We only use one of them: navigate , to navigate to another page, but we can do more than that. For example, we can view the navigation history and retrieve parameters from other pages.

Run the application and we can back and forth between the two screens:

Adding Friends

In App.js, add a possibleFriends array and an existingFriends array to the state:

And add a function to move a friend in possibleFriends to currentFriends:

Passing Logic to Other Screens

It is now possible to add friends in App.js, but we need to add in Friends.js and let them show in Home.js using props.

Add the App.js file as follows:

We can then access them in the screens in the Navigator. For example, displaying the current friends list in HomeScreen, Edit Home.js file as follows:

Now we need to add our friends to Friends.js to complete the application

Please run the application again, we can see our friends to add:

Accomplished 😄


The article was translated from Routing with React Navigation in React Native

Share the news now

Source : Viblo