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:
- 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:
