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

Rohit Kumar Thakur
JavaScript in Plain English

--

Passing Value Between Two Components

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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

No responses yet

Write a response