Author: saqibkhan

While creating an app containing multiple screens, then sometimes it is required to pass value between one screen to another. This can be achieved by using this.props.navigation.navigate() function.

This function is used to navigate between the different screens.

Before diving into this example, you need to first go through React Native Navigation.

Example

In this example, we will input the value in the first screen and get it into the second screen.

The value (param) is passed as an object in the first screen to the navigation.navigate function as:

1. this.props.navigation.navigate(‘RouteName’, { /* params go here */ })   

The same value (param) is read in the second screen as:

1. this.props.navigation.getParam(paramName, defaultValue)   

Create a HomeScreen.js file and add a TextInput component for input value and a Button to submit. The TextInput component has an onChangeText prop which takes a function which is to be called whenever the text changed.

HomeScreen.js

1. import React from ‘react’;  
2. //import react in our code.  
3. import { StyleSheet, View, Button, TextInput } from ‘react-native’;  
4.   
5. export default class HomeScreen extends React.Component {  
6.   
7.     constructor(props) {  
8.         //constructor to set default state  
9.         super(props);  
10.         this.state = {  
11.             username: ”,  
12.         };  
13.     }  
14.     static navigationOptions = {  
15.         title: ‘Home’,  
16.         headerStyle: {  
17.             backgroundColor: ‘#f4511e’,  
18.         },  
19.         //headerTintColor: ‘#0ff’,  
20.         headerTitleStyle: {  
21.             fontWeight: ‘bold’,  
22.         },  
23.     };  
24.   
25.     render() {  
26.         const { navigate } = this.props.navigation;  
27.         return (  
28.             //View to hold our multiple components  
29.             <View style={styles.container}>  
30.             {/*Input to get the value from the user*/}  
31.             <TextInput  
32.         value={this.state.username}  
33.         onChangeText={username => this.setState({ username })}  
34.         placeholder={‘Enter Any value’}  
35.         style={styles.textInput}  
36.         />  
37.         <View style={styles.buttonStyle}>  
38.             <Button  
39.         title=”Submit”  
40.         // color=”#00B0FF”  
41.         onPress={() =>  
42.         this.props.navigation.navigate(‘Profile’, {  
43.             userName: this.state.username,  
44.             otherParam: ‘101’,  
45.         })  
46.     }  
47.         />  
48.         </View>  
49.         </View>  
50.     );  
51.     }  
52. }  
53. const styles = StyleSheet.create({  
54.     container: {  
55.         flex: 1,  
56.         backgroundColor: ‘#fff’,  
57.         alignItems: ‘center’,  
58.         padding: 16,  
59.     },  
60.     textInput: {  
61.         height: 45,width: “95%”,borderColor: “gray”,borderWidth: 1,fontSize:20,  
62.     },  
63.     buttonStyle:{  
64.         width: “93%”,  
65.         marginTop: 50,  
66.         backgroundColor: “red”,  
67.     }  
68. });  

In the above code userName: this.state.username, store the value input into the TextInput component and otherParam: ‘101’ directly assign a value. On clicking the Button userName and otherParam is passed to Profile screen.

ProfileScreen.js

In this screen, we receive the value of userName and otherParam using navigation.getParam(‘paramValue’, default value) and stored into object user_name and other_param respectively. The value of JavaScript object is converted to string using JSON.stringify(object) function.

1. import React from ‘react’;  
2. import { StyleSheet, View, Text, Button } from ‘react-native’;  
3.   
4. export default class ProfileScreen extends React.Component {  
5.     static navigationOptions = {  
6.         title: ‘Profile’,  
7.         headerStyle: {  
8.             backgroundColor: ‘#f4511e’,  
9.         },  
10.         //headerTintColor: ‘#0ff’,  
11.         headerTitleStyle: {  
12.             fontWeight: ‘bold’,  
13.         },  
14.     };  
15.     render() {  
16.         {/*Using the navigation prop we can get the 
17.               value passed from the previous screen*/}  
18.         const { navigation } = this.props;  
19.         const user_name = navigation.getParam(‘userName’, ‘NO-User’);  
20.         const other_param = navigation.getParam(‘otherParam’, ‘some default value’);  
21.         return (  
22.             <View style={{ flex: 1, alignItems: “center”, justifyContent: “center” }}>  
23.                 <Text style={{ marginTop: 16,fontSize: 20,}}>  
24.                     This is Profile Screen and we receive value from Home Screen  
25.                 </Text>  
26.                 <Text style={styles.textStyle}>User Name: {JSON.stringify(user_name)}</Text>  
27.                 <Text style={styles.textStyle}>Other Param: {JSON.stringify(other_param)}</Text>  
28.                 <View style={styles.buttonStyle}>  
29.                 <Button  
30.                     title=”Go back”  
31.                     onPress={() => this.props.navigation.goBack()}  
32.                 />  
33.                 </View>  
34.             </View>  
35.         );  
36.     }  
37. }  
38. const styles = StyleSheet.create({  
39.     textStyle: {  
40.         fontSize: 23,  
41.         textAlign: ‘center’,  
42.         color: ‘#f00’,  
43.     },  
44.   
45.     buttonStyle:{  
46.         width: “93%”,  
47.         marginTop: 50,  
48.         backgroundColor: “red”,  
49.     }  
50. });  

App.js

Create the App.js file as it is the entry point of the app and imports the HomeScreen and ProfileScreen. The HomeScreen set as the first screen using the initialRouteName.

1. import React from ‘react’;  
2. import {createStackNavigator,createAppContainer} from ‘react-navigation’;  
3. import HomeScreen from ‘./HomeScreen’;  
4. import ProfileScreen from ‘./ProfileScreen’;  
5.   
6. const AppNavigator = createStackNavigator(  
7.     {  
8.         Home: HomeScreen,  
9.         Profile: ProfileScreen  
10.     },  
11.     {  
12.         initialRouteName: “Home”  
13.     }  
14. );  
15. export default createAppContainer(AppNavigator);  

Output:

We also send and receive the parameters into JSON such as:

HomeScreen.js

1. onPress={() =>  
2.     navigate(‘Profile’, {  
3.         JSON_ListView_Clicked_Item: this.state.username,  
4.     })  
5. }  

ProfileScreen.js

This screen read the value in two ways without checking.

1. {this.props.navigation.state.params.JSON_ListView_Clicked_Item}  

Or checking the input value is null or not

1. {this.props.navigation.state.params.JSON_ListView_Clicked_Item  
2.    ? this.props.navigation.state.params.JSON_ListView_Clicked_Item  
3.     : ‘No Value Passed’}  

1. <Text style={styles.textStyle}>  
2.         {this.props.navigation.state.params.JSON_ListView_Clicked_Item}  
3.     </Text>  
4. <Text style={{ marginTop: 16,fontSize: 20, }}>With Check</Text>  
5.     {/*If you want to check the value is passed or not, 
6.             you can use conditional operator.*/}  
7. <Text style={styles.textStyle}>  
8.     {this.props.navigation.state.params.JSON_ListView_Clicked_Item  
9.         ? this.props.navigation.state.params.JSON_ListView_Clicked_Item  
10.         : ‘No Value Passed’}  

Output:

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:

The static property of a screen component is called navaigationOptions. It is either an object or a function. It returns an object containing several configuration options.

Props of the header bar

Props	Description
title	It sets the title of active screen.
headerStyle	It adds style to header bar.
backgroundColor	It sets the background color of the header bar.
headerTintColor	It sets the color to header title.
headerTitleStyle	It adds style to the title of a screen.
fontWeight	It sets the font style of header title.

1. static navigationOptions = {  
2.     title: ‘HeaderTitle’,  
3.     headerStyle: {  
4.         backgroundColor: ‘#f4511e’,  
5.     },  
6.     headerTintColor: ‘#0ff’,  
7.     headerTitleStyle: {  
8.        fontWeight: ‘bold’,  
9.     },  
10. };  

React Native Moving from One Screen to Other Example 1

In this example, we create two screen named as ‘Home’ and ‘Profile’. The Home screen is set as first screen using “initialRouteName” property and Profile screen as second.

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.     static navigationOptions = {  
7.         title: ‘Home’,  
8.         headerStyle: {  
9.             backgroundColor: ‘#f4511e’,  
10.         },  
11.         //headerTintColor: ‘#0ff’,  
12.         headerTitleStyle: {  
13.             fontWeight: ‘bold’,  
14.         },  
15.     };  
16.   
17.     render() {  
18.         return (  
19.             <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>  
20.                 <Text>Home Screen</Text>  
21.                 <Button  
22.                     title=”Go to Profile”  
23.                     onPress={() => this.props.navigation.push(‘Profile’)}  
24.                 />  
25.             </View>  
26.         );  
27.     }  
28. }  
29. class ProfileScreen extends React.Component {  
30.     static navigationOptions = {  
31.         title: ‘Profile’,  
32.         headerStyle: {  
33.             backgroundColor: ‘#f4511e’,  
34.         },  
35.         headerTintColor: ‘#0ff’,  
36.         headerTitleStyle: {  
37.             fontWeight: ‘bold’,  
38.         },  
39.     };  
40.     render() {  
41.         return (  
42.             <View style={{ flex: 1, alignItems: “center”, justifyContent: “center” }}>  
43.                 <Text>Profile Screen</Text>  
44.                 <Button  
45.                     title=”Go to Profile… again”  
46.                     onPress={() => this.props.navigation.push(‘Profile’)}  
47.                 />  
48.                 <Button  
49.                     title=”Go to Home”  
50.                     onPress={() => this.props.navigation.navigate(‘Home’)}  
51.                  />  
52.                 <Button  
53.                     title=”Go back”  
54.                     onPress={() => this.props.navigation.goBack()}  
55.                 />  
56.             </View>  
57.     );  
58.     }  
59. }  
60.   
61. const AppNavigator = createStackNavigator(  
62.     {  
63.         Home: HomeScreen,  
64.         Profile: ProfileScreen  
65.     },  
66.     {  
67.         initialRouteName: “Home”  
68.     }  
69. );  
70.   
71. const AppContainer = createAppContainer(AppNavigator);  
72. export default class App extends React.Component {  
73.     render() {  
74.         return <AppContainer />;  
75.     }  
76. }  

Output:

Using params in the title

To use the params (parameter) as a title, we need to make navigationOptions as a function which returns a configuration object. Use the this.props inside the navigationOptions. As it is the static property of component “this” does not refer to an instance of componen and therefore no props are available.

Making navigationOptions as a function which returns the object containing {navigation, navigationOptions, screenProps }. The navigation is the object which is passed to screen props as this.props.navigation. We can also get the params from navigation using navigation.getParam or navigation.state.params.

1. class ProfileScreen extends React.Component {  
2.     static navigationOptions = ({ navigation }) => {  
3.         return {  
4.             title: navigation.getParam(‘otherParam’, ‘A Param Header’),  
5.         };  
6.     };  
7. }  

The navigationOtions configuration of the active screen which can also be updated from the current screen component itself.

1. //inside render   
2. <Button  
3.     title=”Update the title”  
4.     onPress={() => this.props.navigation.setParams({otherParam: ‘Header Updated!’})}  
5. />  

Complete code

In this example, we create two screen “Home” and “Profile”. The Profile screen set its header title using params as: title: navigation.getParam(‘otherParam’, ‘A Param Header’)

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.     static navigationOptions = {  
7.         title: ‘Home’,  
8.         headerStyle: {  
9.             backgroundColor: ‘#f4511e’,  
10.         },  
11.         //headerTintColor: ‘#0ff’,  
12.         headerTitleStyle: {  
13.             fontWeight: ‘bold’,  
14.         },  
15.     };  
16.   
17.     render() {  
18.         return (  
19.             <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>  
20.                 <Text>Home Screen</Text>  
21.                 <Button  
22.                     title=”Go to Profile”  
23.                     onPress={() => this.props.navigation.push(‘Profile’)}  
24.                 />  
25.             </View>  
26.         );  
27.     }  
28. }  
29. class ProfileScreen extends React.Component {  
30.     static navigationOptions = ({ navigation }) => {  
31.         return {  
32.             title: navigation.getParam(‘otherParam’, ‘A Param Header’),  
33.         };  
34.     };  
35.   
36.     render() {  
37.         return (  
38.             <View style={{ flex: 1, alignItems: “center”, justifyContent: “center” }}>  
39.                 <Text>Profile Screen</Text>  
40.                 <Button  
41.                     title=”Go back”  
42.                     onPress={() => this.props.navigation.goBack()}  
43.                 />  
44.                 <Button  
45.                     title=”Update the title”  
46.                     onPress={() => this.props.navigation.setParams({otherParam: ‘Header Updated!’})}  
47.                 />  
48.             </View>  
49.     );  
50.     }  
51. }  
52.   
53. const AppNavigator = createStackNavigator(  
54.     {  
55.         Home: HomeScreen,  
56.         Profile: ProfileScreen  
57.     },  
58.     {  
59.         initialRouteName: “Home”  
60.     }  
61. );  
62.   
63. const AppContainer = createAppContainer(AppNavigator);  
64. export default class App extends React.Component {  
65.     render() {  
66.         return <AppContainer />;  
67.     }  
68. }  

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.

1. yarn add react-navigation  
2. # or with npm  
3. # npm install –save react-navigation  

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.

1. yarn add react-native-gesture-handler  
2. # or with npm  
3. # npm install –save react-native-gesture-handler  

Now, link all the native dependencies together using command:

1. react-native link react-native-gesture-handler  

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

1. import com.facebook.react.ReactActivityDelegate;  
2. import com.facebook.react.ReactRootView;  
3. import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;  
4.   
5. . . .  
6.   
7. @Override  
8. protected ReactActivityDelegate createReactActivityDelegate() {  
9.     return new ReactActivityDelegate(this, getMainComponentName()) {  
10.         @Override  
11.         protected ReactRootView createRootView() {  
12.             return new RNGestureHandlerEnabledRootView(MainActivity.this);  
13.         }  
14.     };  
15. }  

Creating a stack navigator

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

App.js

1. import React from “react”;  
2. import {Button, View, Text } 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.             </View>  
11.         );  
12.     }  
13. }  
14.   
15. const AppNavigator = createStackNavigator({  
16.     Home: {  
17.         screen: HomeScreen  
18.     }  
19. });  
20. export default createAppContainer(AppNavigator);  

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

MainActivity.java

1. package com.naviexe;  
2.   
3. import com.facebook.react.ReactActivity;  
4. import com.facebook.react.ReactActivityDelegate;  
5. import com.facebook.react.ReactRootView;  
6. import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;  
7.   
8. public class MainActivity extends ReactActivity {  
9.   
10.     @Override  
11.     protected String getMainComponentName() {  
12.         return “naviExe”;  
13.     }  
14.     @Override  
15.     protected ReactActivityDelegate createReactActivityDelegate() {  
16.         return new ReactActivityDelegate(this, getMainComponentName()) {  
17.             @Override  
18.             protected ReactRootView createRootView() {  
19.                 return new RNGestureHandlerEnabledRootView(MainActivity.this);  
20.             }  
21.         };  
22.     }  
23. }  

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

Output:

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.

1. const AppNavigator = createStackNavigator({  
2.     Home: HomeScreen  
3. });  

Adding title and styling navigation

1. static navigationOptions = {  
2.     title: ‘Home’,  
3.     headerStyle: {  
4.         backgroundColor: ‘#f4511e’,  
5.     },  
6.     headerTintColor: ‘#0ff’,  
7.     headerTitleStyle: {  
8.        fontWeight: ‘bold’,  
9.     },  
10. };  

1. import React from ‘react’;  
2. import { View, Text } from ‘react-native’;  
3. import { createStackNavigator, createAppContainer } from ‘react-navigation’;  
4.   
5. class HomeScreen extends React.Component {  
6.     static navigationOptions = {  
7.         title: ‘Home’,  
8.         headerStyle: {  
9.             backgroundColor: ‘#f4511e’,  
10.         },  
11.       //  headerTintColor: ‘#0ff’,  
12.         headerTitleStyle: {  
13.            fontWeight: ‘bold’,  
14.         },  
15.     };  
16.     render() {  
17.         return (  
18.             <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>  
19.                 <Text>Home Screen</Text>  
20.             </View>  
21.         );  
22.     }  
23. }  
24. const AppNavigator = createStackNavigator({  
25.     Home: HomeScreen  
26. });  
27.   
28. export default createAppContainer(AppNavigator);  

Adding a second route screen

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

1. class ProfileScreen extends React.Component {  
2.     render() {  
3.         return (  
4.             <View style={{ flex: 1, alignItems: “center”, justifyContent: “center” }}>  
5.                 <Text>Details Screen</Text>  
6.             </View>  
7.         );  
8.     }  
9. }  
10.   
11. const AppNavigator = createStackNavigator(  
12.     {  
13.         Home: HomeScreen,  
14.         Profile: ProfileScreen  
15.     },  
16.     {  
17.         initialRouteName: “Home”  
18.     }  
19. );  

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

Complete code:

App.js

1. import React from ‘react’;  
2. import { View, Text } 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.             </View>  
11.         );  
12.     }  
13. }  
14. class ProfileScreen extends React.Component {  
15.     render() {  
16.         return (  
17.             <View style={{ flex: 1, alignItems: “center”, justifyContent: “center” }}>  
18.                 <Text>Details Screen</Text>  
19.             </View>  
20.         );  
21.     }  
22. }  
23.   
24. const AppNavigator = createStackNavigator(  
25.     {  
26.         Home: HomeScreen,  
27.         Profile: ProfileScreen  
28.     },  
29.     {  
30.         initialRouteName: “Home”  
31.     }  
32. );  
33.   
34. export default createAppContainer(AppNavigator);  

Output: