How I can pass data between screens in React Native

Question

I'm trying to passing data between screen and failed with undefined is not an object (evaluating 'props.navigation.getParams') My code: First screen: const ForgotPasswordScreen = ({ navigation, }) => { const [text, setText] = useState(''); return ( { setText(text) }}> { navigation.navigate('VerificationScreen', { phoneNumber: text }) }}> Continue ) And i'm try to receive data at second screen: const VerificationScreen = ({ navigation, }, props) => { const phoneNumber = props.navigation.getParams('phoneNumber'); return ( {phoneNumber} ) Thanks so much !!

Ketan Ramteke · Accepted Answer

Output:

This full example should work:


import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const Stack = createStackNavigator();

const App = ({ navigation }) => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="Verification" component={VerificationScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const VerificationScreen = ({ navigation, route }) => {
  const { phoneNumber } = route.params;
  return (
    <View>
      <Text>{phoneNumber}</Text>
    </View>
  );
};

const ForgotPasswordScreen = ({ navigation }) => {
  const [text, setText] = useState('');
  const handleInput = (event) => {
    let temp = event.nativeEvent.text;
    setText(temp);
    console.log(temp)
  };
  return (
    <View style={styles.container}>
      <TextInput
        placeholder={'Input Text'}
        value={text}
        onChange={handleInput}
        style={styles.input}
      />
      <TouchableOpacity
        onPress={() =>
          text
            ? navigation.navigate('Verification', { phoneNumber: text })
            : alert('Please Input the text')
        }>
        <View style={styles.btn}>
          <Text style={styles.text}>NEXT</Text>
        </View>
        <Text>{text}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    marginTop: 100,
  },
  btn: {
    width: 100,
    height: 50,
    backgroundColor: 'white',
    borderRadius: 10,
    border: '2px solid black',
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderRadius: 10,
    color: 'black',
    width: 300,
    padding: 10,
    border: '2px solid green',
    marginVertical: 5,
  },
  text: {
    fontWeight: 'bold',
  },
});

You can find a full live example here: Live Demo

ksav · Answer

In react, props is the first argument of a function component. In your example above, you attempt to access props in the second argument of the VerificationScreen function component (which would be undefined). Furthermore, you attempt to access props.navigation which would give you an error: Uncaught TypeError: Cannot read property 'navigation' of undefined Instead, because you are already de-structuring navigation from props in the first argument of the VerificationScreen function component, you should use it to access the navigate method. const ForgotPasswordScreen = ({ navigation }) => { const [text, setText] = useState(''); return ( { setText(text) }}> { navigation.navigate('VerificationScreen', { phoneNumber: text }) }}> Continue ) const VerificationScreen = ({ navigation }) => { const phoneNumber = navigation.getParams('phoneNumber'); return ( {phoneNumber} ) } I highly recommend that you take some time to read the react docs.

How I can pass data between screens in React Native

2 Answers

Add your own answers!

Ask a Question