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:
Hii, sir
How to create excel file from json array data??
hi
in your example (reactReact Navigation 5.x Call External JS Screen Files in App.js File React Native) in secondscreen i need want to a json listview i used code from your tutorial(React Native JSON FlatList with Images and Text) . it is not working . in reactnavigation 4 it was working properly.
kindly provide a solution
thank you
Jithin the URL i was using in previous images tutorial is expired some how. That’s why it is not working.
Hi, I need to develop a library, in which input is received from react-native app and response is return respectively, share any example/tutorial link, Thanks in advanced.
Hi, is it possible to edit route.params and send updated to next screen, eg:
Screen A => Screen B => Screen C
name:”Hi”=> edit-name:”Hello”=> show: “Hello”
like this?
using react-navigation v5
Mayur you want to send the updated text to next screen on and on ? Am I right ?