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

Passing data between screens React Native. Data undefined

What I want is to open a recipe card, and then have the recipe instructions display on a different screen.

However, I keep getting an error which says that the "item" is undefined.

This is the recipe card. When it is clicked it should open up the new screen which displays the recipe instructions.

import {
  FlatList,
  StyleSheet,
  Text,
  View,
  Image,
  Pressable,
} from "react-native";
import React from "react";
import { recipeList } from "../constants/constants";
import { useNavigation } from "@react-navigation/native";

const RecipeCard = () => {
  const navigation = useNavigation();

  return (
    <View>
      <FlatList
        data={recipeList}
        renderItem={({ item }) => (
          <Pressable
            onPress={() =>
              navigation.navigate("RecipeDetails", {
                screen: "RecipeDetails",
                params: { item: item },
              })
            }
            style={{
              backgroundColor: "#FDF7F1",
              marginTop: 25,
              borderRadius: 10,
              color: "white",
              paddingVertical: 20,
              paddingHorizontal: 20,
              borderRadius: 10,
              shadowColor: "black",
              shadowOffset: { width: 1, height: 4 },
              shadowOpacity: 0.1,
              shadowRadius: 4,
              alignItems: "center",
            }}
          >
            <Image
              source={item.image}
              style={{
                resizeMode: "center",
                width: 125,
                height: 150,
              }}
            />
            <Text style={{ bottom: 10 }}>{item.name}</Text>
          </Pressable>
        )}
        numColumns={2}
        columnWrapperStyle={{ justifyContent: "space-between" }}
      />
    </View>
  );
};
export default RecipeCard;

const styles = StyleSheet.create({});

This is the recipe details. It should display the instructions of the recipe which should come from the data of the card that was clicked on. Here is where I am getting my error.

import { Pressable, StyleSheet, Text, View } from "react-native";
import React from "react";
import Header from "../components/Header";
import { SafeAreaView } from "react-native-safe-area-context";

const RecipeDetails = (navigation, route) => {
  const { item } = route.params;

  return (
    <SafeAreaView>
      <Header />
      <Text>Hello I am the details screen</Text>
      <Pressable onPress={() => navigation.goBack()}>
        <Text>the icon</Text>
      </Pressable>
      <View>
        <image source={item.image} />
      </View>
    </SafeAreaView>
  );
};

export default RecipeDetails;

const styles = StyleSheet.create({});
Tags:

2

Answers


  1. 0

    It should be route.params.params because you are sending param as a key. The passed data is stored in route.params so your route.params will be

    {
    screen: "RecipeDetails",
    params: { item: item },
}

    As you can see above, you don’t have any item key here.

    Try with below code

    import { Pressable, StyleSheet, Text, View } from "react-native";
import React from "react";
import Header from "../components/Header";
import { SafeAreaView } from "react-native-safe-area-context";

const RecipeDetails = (navigation, route) => {
  const { item } = route.params.params;//change here

  return (
    <SafeAreaView>
      <Header />
      <Text>Hello I am the details screen</Text>
      <Pressable onPress={() => navigation.goBack()}>
        <Text>the icon</Text>
      </Pressable>
      <View>
        <image source={item.image} />
      </View>
    </SafeAreaView>
  );
};

export default RecipeDetails;

const styles = StyleSheet.create({});
    Login or Signup to reply.
  2. 0

    . You should update it to accept route and navigation as separate arguments as well you are taking image tag wrong , it starts with I (in capital) and you’ve taken it in small.

    import { Pressable, StyleSheet, Text, View } from "react-native";
    import React from "react";
    import Header from "../components/Header";
    import { SafeAreaView } from "react-native-safe-area-context";
    
    const RecipeDetails = ({navigation, route}) => { 
      const { item } = route.params;
    
      return (
        <SafeAreaView>
          <Header />
          <Text>Hello I am the details screen</Text>
          <Pressable onPress={() => navigation.goBack()}>
            <Text>the icon</Text>
          </Pressable>
          <View>
            <Image source={item.image} />
          </View>
        </SafeAreaView>
      );
    };
    
    export default RecipeDetails;
    
    const styles = StyleSheet.create({});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search