Javatpoint Logo
Javatpoint Logo

React Native Moving Between Screens

In this section, we will discuss how to navigate from one route screen to another route screen and come back to the initial route. In the previous part of Navigation, we created the stack navigator with two route screens (Home and Profile).

Moving from one screen to another is performed by using the navigation prop, which passes down our screen components. It is similar to write the below code for a web browser:

The other way to write this would be:

Navigate to the new screen

Navigation from one screen to another screen is performed in different ways:

App.js

Add a Button component in 'HomeScreen' and perform an onPress{} action which calls the this.props.navigation.navigate('Profile') function. Clicking the Button component moves screen to 'ProfileScreen' layout.

Output:

React Native Moving Between Screens React Native Moving Between Screens
  • this.props.navigation: The navigation prop is passed the every screen component in stack navigation.
  • navigate('Profile'): Call the navigate function with the route name where we want to move.

Navigate to a route screen multiple times

Adding navigation from 'ProfileScreen' to 'Profile' URL doesn't make any change because we are already at Profile route.

To call the profiles screen, mainly in the case of passing unique data (params) to each route. To do this, we change navigate to push. The navigate push expresses the intent to add another route disregarding the existing navigation history.

On pressing the button call push method each time and add a new route to the navigation stack.

Going back

The header of stack navigator automatically includes a back button when there is a possibility to go back from the current screen. The single screen stack navigation doesn't provide the back button as there is nothing where we can go back.

Sometimes, we programmatically implement the back behavior, for that we can call this.props.navigation.goBack(); function.

App.js

Output:

React Native Moving Between Screens React Native Moving Between Screens




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA