How to pass value between Screens in React Native ?
React Native is use to create cross-platform applications. One of the biggest drawbacks of React Native is that it doesn’t come with any built-in navigation system. We have to use other libraries to implement navigation in React Native. React Navigation library is widely used with React Native to implement various types of navigation systems.
With the React Navigation, we can also pass values or parameters between screens in React Native. We will create a simple stack navigator with 2 screens and will pass values from one screen to another screen.
Creating Application:
Step 1: Open your Terminal and run below command. It will install Expo CLI globally in your system.
npm install -g expo-cli
Step 2: Now, create a new React Native Project by running below command.
expo init "Your_Project_Name"
Step 3: You’ll be asked to choose a template. Select blank template.
Step 4: Now go to the project folder
cd "Your_Project_Name"
Step 5: Now, to implement any type of navigation, we first need to install React Navigation package in our React Native Project. Run below command.
npm install @react-navigation/native // OR yarn add @react-navigation/native
Step 6: Install required dependencies into an Expo managed project.
expo install react-native-screens react-native-safe-area-context
Step 7: The libraries we’ve installed so far are the required packages for navigators. But each navigator in React Navigation has its own library that we need to add.
npm install @react-navigation/native-stack // OR yarn add @react-navigation/native-stack
Step 8: Now run below command to start the server.
npm start
Project Structure: It will look like the following.
In the following example, we will create 2 screens called HomeScreen and MessageScreen. We will also create a stack navigator and pass values from HomeScreen to MessageScreen. So create 2 files called HomeScreen.js and MessageScreen.js.
Example: Follow these steps in order to pass value between screens in React Native.
Step 1: Open the HomeScreen.js file and write below code in that file.
In this file, we will create a TextInput and a Button component. Users can add messages in this TextInput and press the button. The user will be redirected to MessageScreen. We will pass whatever value the user has entered from HomeScreen to MessageScreen and that message will be displayed on the MessageScreen.
HomeScreen.js
import { Button, StyleSheet, Text, TextInput, View } from 'react-native' ; import React, { useState } from 'react' ; import { useNavigation } from '@react-navigation/native' ; const HomeScreen = () => { const [message, setMessage] = useState( '' ); const navigation = useNavigation(); const goToMessageScreen = () => { navigation.navigate( 'Message' , { message, }); }; return ( <View style={styles.container}> <Text style={styles.title}>w3wiki</Text> <TextInput placeholder= "Enter your message here" value={message} onChangeText={(text) => setMessage(text)} style={styles.input} /> <Button title= "Submit" onPress={goToMessageScreen} color= "green" /> </View> ); }; export default HomeScreen; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff' , alignItems: 'center' , }, title: { fontSize: 40, fontWeight: 'bold' , color: 'green' , marginTop: 50, }, input: { width: '75%' , padding: 10, marginTop: 20, color: '#000' , }, }); |
Step 2: Open the MessageScreen.js file and write below code in that file.
In this file, we will receive value from HomeScreen through route. Later on, we will display that value in a Text component on the screen.
MessageScreen.js
import { StyleSheet, Text, View } from 'react-native' ; import React from 'react' ; import { useRoute } from '@react-navigation/native' ; const MessageScreen = () => { const route = useRoute(); return ( <View style={styles.container}> <Text style={styles.title}>{route.params.message}</Text> </View> ); }; export default MessageScreen; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff' , alignItems: 'center' , justifyContent: 'center' , }, title: { fontSize: 25, fontWeight: 'bold' , color: 'green' , marginTop: 50, }, }); |
Step 3: Open the App.js file and write below code in that file.
App.js is the main file that renders first when you run your app. In this file, we will create a stack navigator. NavigationContainer will contain HomeScreen and MessageScreen so that we can navigate between them.
App.js
import { useState } from 'react' ; import { NavigationContainer } from '@react-navigation/native' ; import { createNativeStackNavigator } from '@react-navigation/native-stack' ; import HomeScreen from './HomeScreen' ; import MessageScreen from './MessageScreen' ; const Stack = createNativeStackNavigator(); export default function App() { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: 'green' , }, headerTintColor: '#fff' , }}> <Stack.Screen name= "Home" component={HomeScreen} /> <Stack.Screen name= "Message" component={MessageScreen} /> </Stack.Navigator> </NavigationContainer> ); } |
Output:
Contact Us