CODEWITHSUNDEEP
reactjsreact-native
Tuan Nguyen
Tuan Nguyen

Reputation: 31

How I can pass data between screens in React Native

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 (
    <View>
      <TextInput onChangeText={(text) => { setText(text) }}></TextInput>
      <TouchableOpacity onPress={() => { navigation.navigate('VerificationScreen', { phoneNumber: text }) }}>
         <Text style={{ color: COLORS.WHITE, fontSize: 16, fontWeight: 'bold' }}>Continue</Text>
      </TouchableOpacity>
    </View>
  )

And i'm try to receive data at second screen:

const VerificationScreen = ({ navigation, }, props) => {
  const phoneNumber = props.navigation.getParams('phoneNumber');
  return (
    <View>
       <Text>{phoneNumber}</Text>
    </View>
  )

Thanks so much !!

Upvotes: 0

Views: 5024

Answers (3)

ksav
ksav

Reputation: 20840

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).

Also, 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 (
    <View>
      <TextInput onChangeText={(text) => { setText(text) }}></TextInput>
      <TouchableOpacity onPress={() => { navigation.navigate('VerificationScreen', { phoneNumber: text }) }}>
         <Text>Continue</Text>
      </TouchableOpacity>
    </View>
  )



const VerificationScreen = ({ navigation }) => {
  const phoneNumber = navigation.getParams('phoneNumber');
  return (
    <View>
       <Text>{phoneNumber}</Text>
    </View>
   )
}

I highly recommend that you take some time to read the react docs.

Upvotes: 3

Dicka Reynaldi
Dicka Reynaldi

Reputation: 339

in second screen you can change

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

Upvotes: 1

Ketan Ramteke
Ketan Ramteke

Reputation: 10675

Output:

enter image description here

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

Upvotes: 3

Related Questions