Question 34283 in React native Question posted in
The official React Native documentation can be found here.

Error while passing value while passing from one page to another – React native

I encountered a error. This happens after I press the search button. How do i solve this?

enter image description here

I am referring to https://www.youtube.com/watch?v=C01CJlu7Q-I for passing value but it does not work.

I tried referring to this to solve the issue Moving values from one screen to another ERROR: undefined is not an object (evaluating 'route.params.message') but it doesnt work

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const SubScreen1 = (route) => {
  const { paramKey } = route.params.paramKey
  console.log(paramKey)
  return (
    <View>
      <Text>{paramKey}</Text>
    </View>
  )
}

export default SubScreen1

const styles = StyleSheet.create({})

Here are my dependencies:

"dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/native-stack": "^6.8.0",
    "expo": "~46.0.9",
    "expo-status-bar": "~1.4.0",
    "firebase": "^9.9.4",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-dropdown-picker": "^5.4.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-navigation": "^4.4.4"
  },

Here is my HomeScreen where I am trying to pass the selected value to SubScreen1

const HomeScreen = () => {

  const navigation = useNavigation()

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
             {label: 'Japanese', value: 'J'},                  
             {label: 'Korean', value: 'K'},
             {label: 'Western', value: 'F'},
             {label:'Indonesian', value:'I'},
             {label: 'Taiwan', value: 'T'},
             {label:'Chinese', value:'C'},
            ]);
  const handleSignOut = async () =>{
    try{
      await signOut(auth)
      console.log("Signed out successfully")
      navigation.replace("Login")
    }catch (error) {
      console.log({error});
   }
  }
  
  return (
    <View style = {styles.container}>
      <Text>Welcome {auth.currentUser?.email}</Text>
      <Text></Text>
      <Text>What cusine would you like to eat today?</Text>
      <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
    <TouchableOpacity
        onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Search</Text>
      </TouchableOpacity>

      <TouchableOpacity
      onPress={handleSignOut}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
    
  )
}
Tags:

2

Answers


  1. 0

    You forgot to add the { } where you accept the route in the SubScreen1 component.

    You wrote:

    const SubScreen1 = (route) => {
  ...
}

    Instead of:

    const SubScreen1 = ({route}) => {
...
}

    Also, You also wrote:
    const { param1 } = route.params.paramKey

    How did you call the property you passed in the params object? param1 or paramkey?

    If you called it param1 then it should be:

    const param1  = route.params.param1

    There’s no need to use destructuring for this.

    Login or Signup to reply.
  2. 0

    Deconstruct the route and see if it works.

    const SubScreen1 = ({route}) => {
  const { paramKey } = route.params.paramKey
  console.log(paramKey)
  return (
    <View>
      <Text>{paramKey}</Text>
    </View>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search