In react navigation data transfer format is a bit changed then older version. In React Navigation 5.x we would use navigation.navigate() method to navigate to next activity screen. We would also send multiple type of data along with this method. In this tutorial we would send multiple type of data integer and string to next activity screen and receive the data on next screen using route.params(). After receive data we would extract data and show all the data in Text component. So in this tutorial we would React Navigation 5.x Send Data From One Screen To Another React Native Example Tutorial.
Contents in this project React Navigation 5.x Send Data From One Screen To Another React Native Example Tutorial:
1. Before getting started with coding we have to manually install the latest version of React Navigation 5.x in our current react native project. I have also make a tutorial about installing react navigation in react native. So read my tutorial about Installing React Navigation 5.x in React Native Here.
2. After done installation react navigation 5.x, Open your project’s main App.js file and import react-native-gesture-handler, StyleSheet, Text, View, NavigationContainer and createStackNavigator components.
|
1
2
3
4
5
6
7
8
9
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
|
3. Create a function named as HomeScreen with navigation prop. This is our main First activity screen class.
|
1
2
3
4
5
|
function HomeScreen({ navigation }) {
}
|
4. Creating a function named as navigateToScreen() in HomeScreen. Here we would make our navigation.navigate() method and call the Second class and pass 3 different values along with it. We are sending studentId, studentName, studentClass to next screen.
|
1
2
3
4
5
6
7
8
|
navigateToScreen=()=>{
navigation.navigate(‘Second’, {
studentID: 11,
studentName: ‘Pankaj’,
studentClass: ‘M.C.A’
});
}
|
5. Creating render’s return block in Home Screen. Now we would make a Button with Text component here and call navigateToScreen method on button click event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function HomeScreen({ navigation }) {
navigateToScreen=()=>{
navigation.navigate(‘Second’, {
studentID: 11,
studentName: ‘Pankaj’,
studentClass: ‘M.C.A’
});
}
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> Home Screen </Text>
<Button onPress={this.navigateToScreen} title=“Send Value To Another Screen” />
</View>
);
}
|
6. Creating another function named as SecondScreen(). This is our Second screen with route and navigation prop. Here first we would receive the send items from home screen in constant variables and then show them in Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function SecondScreen({route, navigation}) {
const { studentID } = route.params;
const { studentName } = route.params;
const { studentClass } = route.params;
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> ID = {studentID} </Text>
<Text style={styles.text}> Name = {studentName} </Text>
<Text style={styles.text}> Class = {studentClass} </Text>
<Text style={styles.text}> This is Second Screen </Text>
</View>
);
}
|
7. Creating a createStackNavigator() named as Stack.
|
1
|
const Stack = createStackNavigator();
|
8. Creating another function named as App. Here we would pass our both screens and set their Screen name.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home” component={HomeScreen} />
<Stack.Screen name=“Second” component={SecondScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
|
10. Call our main export default class named as App.
|
1
|
export default App;
|
11. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
function HomeScreen({ navigation }) {
navigateToScreen=()=>{
navigation.navigate(‘Second’, {
studentID: 11,
studentName: ‘Pankaj’,
studentClass: ‘M.C.A’
});
}
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> Home Screen </Text>
<Button onPress={this.navigateToScreen} title=“Send Value To Another Screen” />
</View>
);
}
function SecondScreen({route, navigation}) {
const { studentID } = route.params;
const { studentName } = route.params;
const { studentClass } = route.params;
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> ID = {studentID} </Text>
<Text style={styles.text}> Name = {studentName} </Text>
<Text style={styles.text}> Class = {studentClass} </Text>
<Text style={styles.text}> This is Second Screen </Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home” component={HomeScreen} />
<Stack.Screen name=“Second” component={SecondScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
export default App;
|
Screenshots:
Also Read :
How React Native 0.49 Version is Different from Older 0.48 Version
Example of React Native Community Clipboard NPM Package
Use useEffect as componentdidmount behavior in React Native Hooks Example
Upgrade Current React Native Project Version to 0.66 Latest Version
React Native Call useEffect Only Once in Functional Component Example
