Pass the Value from One Screen Component to Another in React Native Expo Apps
How to pass the value using React Navigation in React Native Expo apps

Hello, Native developers!
My name is Rohit Kumar Thakur. I generally write about React Native, Django, Data Science, Machine Learning, and Python.
Let's suppose you have two screens, Screen A and Screen B. In this article, I am going to show you how to pass the value information from one screen component to another using react-navigation. Here we are going to use stack navigation to get our job done. So, without wasting any time let’s start this project.
Here is the step-by-step video tutorial of this article:
Project Setup
Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad
- Choose the directory of your choice
- In the same directory, open the command prompt or terminal.
- Initialize and expo app using the command:
expo init Info
- Select the blank template and continue to dependencies downloading
- Navigate to the newly built directory using the command:
cd Info
- Install the following JavaScript library:
npm install @react-navigation/nativeexpo install react-native-screens react-native-safe-area-contextnpm install @react-navigation/stackexpo install react-native-gesture-handler
Now, open this project in your favorite code editor. Oh! VS Code? Nice.
Code
Make a folder inside the Project folder and name that folder as “Screens”.
Inside the Screens folder, make two JavaScript files, Home.js, and Detail.js
App.js
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from './Screens/Home';
import Detail from './Screens/Detail';const Stack = createStackNavigator();function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name='Detail' component={Detail} />
</Stack.Navigator>
)
}export default () => {
return(
<NavigationContainer>
<App/>
</NavigationContainer>
)
}
In App.js, we are simply adding the stack navigation for both screen components.
Home.js
import { View, Text, TextInput, Button, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'const Home = () => {
const navigation = useNavigation();
const [name, setName] = useState('');
return (
<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
<Text>Please Enter Your Name to Pass it to second screen</Text>
<TextInput
value={name}
onChangeText={(username) => setName(username)}
placeholder={'Enter Your Name'}
style={styles.inputStyle}
/>
<Button
title='Go Next'
mode='contained'
onPress={() => navigation.navigate('Detail', {
paramKey: name
})}
/>
</View>
)
}export default Homeconst styles = StyleSheet.create({
inputStyle: {
width:'80%',
height:44,
padding:10,
marginVertical:10,
backgroundColor:'#DBDBD6',
}
})
In Home.js, We are using React Navigation to pass the value. On pressing the button, we are navigating to the Detail screen and pass the “name” as paramKey.
Detail.js
import { View, Text } from 'react-native'
import React from 'react'const Detail = ({route}) => {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:40}}>{route.params.paramKey}</Text>
</View>
)
}export default Detail
Now, simply display the name on the Detail Screen using the above code.
Run the application and you will get the desired output. In case of any confusion, you can refer to the video.
Now, clap, clap and clap! And do follow for more project-based articles on React Native expo.
Thanks for reading.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.