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:

1. <a href="profiles.html">Go to Profile</a>  

The other way to write this would be:

1. 
   <a onClick={() => { document.location.href = "profile.html"; }}>Go to Profile</a>  

Navigate to the new screen

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

1. <Button  
2.           title="Go to URL"  
3.           onPress={() => this.props.navigation.navigate('url')}  
4.         />  

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.

1. import React from 'react';  
2. import { View, Text, Button } from 'react-native';  
3. import { createStackNavigator, createAppContainer } from 'react-navigation';  
4.   
5. class HomeScreen extends React.Component {  
6.     render() {  
7.         return (  
8.             <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
9.                 <Text>Home Screen</Text>  
10.                 <Button  
11.                     title="Go to Profile"  
12.                     onPress={() => this.props.navigation.navigate('Profile')}  
13.                 />  
14.             </View>  
15.         );  
16.     }  
17. }  
18. class ProfileScreen extends React.Component {  
19.     render() {  
20.         return (  
21.             <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>  
22.                 <Text>Profile Screen</Text>  
23.             </View>  
24.     );  
25.     }  
26. }  
27.   
28. const AppNavigator = createStackNavigator(  
29.     {  
30.         Home: HomeScreen,  
31.         Profile: ProfileScreen  
32.     },  
33.     {  
34.         initialRouteName: "Home"  
35.     }  
36. );  
37.   
38. const AppContainer = createAppContainer(AppNavigator);  
39. export default class App extends React.Component {  
40.     render() {  
41.         return <AppContainer />;  
42.     }  
43. }  

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.

1. class ProfileScreen extends React.Component {  
2.     render() {  
3.         return (  
4.             <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>  
5.                 <Text>Profile Screen</Text>  
6.                    <Button  
7.                      title="Go to Profile"  
8.                      onPress={() => this.props.navigation.navigate('Profile')}  
9.                    />  
10.              </View>  
11.     );  
12.     }  
13. }  

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.

1. <Button  
2.         title="Go to Profile"  
3.          onPress={() => this.props.navigation.push('Profile')}  
4. />  

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

1. import React from 'react';  
2. import { View, Text, Button } from 'react-native';  
3. import { createStackNavigator, createAppContainer } from 'react-navigation';  
4.   
5. class HomeScreen extends React.Component {  
6.     render() {  
7.         return (  
8.             <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
9.                 <Text>Home Screen</Text>  
10.                 <Button  
11.                     title="Go to Profile"  
12.                     onPress={() => this.props.navigation.push('Profile')}  
13.                 />  
14.             </View>  
15.         );  
16.     }  
17. }  
18. class ProfileScreen extends React.Component {  
19.     render() {  
20.         return (  
21.             <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>  
22.                 <Text>Profile Screen</Text>  
23.                 <Button  
24.                     title="Go to Profile... again"  
25.                     onPress={() => this.props.navigation.push('Profile')}  
26.                 />  
27.                 <Button  
28.                     title="Go to Home"  
29.                     onPress={() => this.props.navigation.navigate('Home')}  
30.                  />  
31.                 <Button  
32.                     title="Go back"  
33.                     onPress={() => this.props.navigation.goBack()}  
34.                 />  
35.             </View>  
36.     );  
37.     }  
38. }  
39.   
40. const AppNavigator = createStackNavigator(  
41.     {  
42.         Home: HomeScreen,  
43.         Profile: ProfileScreen  
44.     },  
45.     {  
46.         initialRouteName: "Home"  
47.     }  
48. );  
49.   
50. const AppContainer = createAppContainer(AppNavigator);  
51. export default class App extends React.Component {  
52.     render() {  
53.         return <AppContainer />;  
54.     }  
55. }  

Output: