How to pass value between Screens in React Native ?
With 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 pass values from one screen to another. Let’s watch a short video to see what we are going to create.
Demo Video
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
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.
Step 2: Install the requirements
Now, to implement any type of navigation, we first need to install the React Navigation package in our React Native Project. Run the command below.
npm install @react-navigation/native // OR
yarn add @react-navigation/native
Step 3: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app.
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 4: Start Coding
Passing values between screens is common in multi-page apps. React Native allows this through navigation props or context providers.
-HomeScreen.js:
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.
// Import necessary components from React Native
import {
Button, // For creating buttons
StyleSheet, // For creating styles
Text, // For displaying text
TextInput, // For creating input fields
View // For creating container views
} from 'react-native';
// Import React and useState hook for state management
import React, { useState } from 'react';
// Import useNavigation hook for navigation between screens
import { useNavigation } from '@react-navigation/native';
// Define the HomeScreen functional component
const HomeScreen = () => {
// Declare a state variable 'message' with an initial value of an empty string
const [message, setMessage] = useState('');
// Get the navigation object using the useNavigation hook
const navigation = useNavigation();
// Function to navigate to the 'Message' screen and pass the 'message' as a parameter
const goToMessageScreen = () => {
navigation.navigate('Message', {
message, // Pass the current value of 'message' to the 'Message' screen
});
};
// Render the UI of the HomeScreen
return (
<View style={styles.container}>
{/* Display the title */}
<Text style={styles.title}>GeeksforGeeks</Text>
{/* Input field for entering a message */}
<TextInput
placeholder="Enter your message here" // Placeholder text for the input
value={message} // Bind the input value to the 'message' state
onChangeText={(text) => setMessage(text)} // Update the 'message' state on text change
style={styles.input} // Apply styles to the input field
/>
{/* Button to submit the message and navigate to the 'Message' screen */}
<Button
title="Submit" // Button label
onPress={goToMessageScreen} // Call the goToMessageScreen function on press
color="green" // Button color
/>
</View>
);
};
// Export the HomeScreen component as the default export
export default HomeScreen;
// Define styles for the HomeScreen component
const styles = StyleSheet.create({
container: {
flex: 1, // Take up the full height of the screen
backgroundColor: '#fff', // Set the background color to white
alignItems: 'center', // Center align items horizontally
},
title: {
fontSize: 40, // Set font size for the title
fontWeight: 'bold', // Make the title bold
color: 'green', // Set the title color to green
marginTop: 50, // Add margin to the top
},
input: {
width: '75%', // Set the width of the input field to 75% of the container
padding: 10, // Add padding inside the input field
marginTop: 20, // Add margin to the top
color: '#000', // Set the text color to black
},
});
- MessageScreen.js:
In this file, we will receive the value from HomeScreen through route. Later on, we will display that value in a Text component on the screen.
// Import necessary components and modules from 'react-native' and 'react'
import {
StyleSheet, // For creating styles
Text, // For displaying text
View // For creating container views
} from 'react-native';
import React from 'react'; // Import React library
import { useRoute } from '@react-navigation/native'; // Import useRoute hook for accessing route parameters
// Define the MessageScreen functional component
const MessageScreen = () => {
// Get the current route object using the useRoute hook
const route = useRoute();
// Render the UI
return (
<View style={styles.container}>
{/* Display the message passed via route parameters */}
<Text style={styles.title}>{route.params.message}</Text>
</View>
);
};
// Export the MessageScreen component as the default export
export default MessageScreen;
// Define styles for the component
const styles = StyleSheet.create({
container: {
flex: 1, // Take up the full screen
backgroundColor: '#fff', // Set background color to white
alignItems: 'center', // Center items horizontally
justifyContent: 'center', // Center items vertically
},
title: {
fontSize: 25, // Set font size
fontWeight: 'bold', // Make the text bold
color: 'green', // Set text color to green
marginTop: 50, // Add margin at the top
},
});
- App.js:
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.
// Import the NavigationContainer component from the React Navigation library
import { NavigationContainer } from '@react-navigation/native';
// Import the createNativeStackNavigator function to create a stack navigator
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// Import the HomeScreen component
import HomeScreen from './HomeScreen';
// Import the MessageScreen component
import MessageScreen from './MessageScreen';
// Create a stack navigator instance
const Stack = createNativeStackNavigator();
// Define the main App component
export default function App() {
return (
// Wrap the entire navigation structure in a NavigationContainer
<NavigationContainer>
{/* Define the stack navigator */}
<Stack.Navigator
// Set default screen options for all screens in the stack
screenOptions={{
// Customize the header background color
headerStyle: {
backgroundColor: 'green',
},
// Set the header text color
headerTintColor: '#fff',
}}>
{/* Define the Home screen in the stack */}
<Stack.Screen name="Home" component={HomeScreen} />
{/* Define the Message screen in the stack */}
<Stack.Screen name="Message" component={MessageScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Output:
