javascript - ERROR : undefined is not an object (evaluation 'style.width')

Question

Hello everyone I'm having trouble with component and I get an undefined error message.So my app has 2 screen,the first one has a list of imagebackgrounds and when you press on one of the images you get a description of that image on another screen.So on this second screen I get the image that I pressed on in an image component (not background). The problem I'm having is that when I save I get the undefined error.

First screen component :

const MealItems = (props) => {
  return (
    <View style={styles.main}>
      <TouchableOpacity onPress={props.onSelectMeal}>
        <View>
          <View style={{ ...styles.details, ...styles.maintitle }}>
            <ImageBackground
              //resizeMode={"center"}
              source={{ uri: props.image }}
              style={styles.imagebg}
            >
              <View style={styles.textContainer}>
                <Text style={styles.title} numberOfLines={1}>
                  {props.title}
                </Text>
              </View>
            </ImageBackground>
          </View>

          <View style={{ ...styles.details, ...styles.info }}>
            <Text>{props.duration}</Text>
            <Text>{props.complexity.toUpperCase()}</Text>
            <Text>{props.affordability.toUpperCase()}</Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};

styles = StyleSheet.create({
  main: {
    height: 200,
    width: "100%",
    backgroundColor: "#f5f5f5",
    borderRadius: 20,
    overflow: "hidden",
    marginVertical: 10,
  },

  maintitle: {
    height: "85%",
  },
  title: {
    fontSize: 20,
    color: "white",
    textAlign: "center",
  },
  details: {
    flexDirection: "row",
  },
  imagebg: {
    width: "100%",
    height: "100%",
  },
  info: {
    backgroundColor: "gray",
    paddingHorizontal: 10,
    justifyContent: "space-between",
    alignItems: "center",
    height: "15%",
  },
  textContainer: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: "rgba(0,0,0,0.3)",
  },
});

export default MealItems;

***Second screen file:***
const howToCook = (props) => {
  const availableMeals = useSelector((state) => state.Meals.filteredMeals);
  const mealId = props.navigation.getParam("mealId");
  const selectedMeal = availableMeals.find((meal) => mealId === meal.id);

  return (
    <ScrollView>
      <Image source={{ uri: selectedMeal.imageUrl }} style={styles.image} />
      <View style={styles.textDetail}>
        <Text>{selectedMeal.duration}</Text>
        <Text>{selectedMeal.complexity.toUpperCase()}</Text>
        <Text>{selectedMeal.affordability.toUpperCase()}</Text>
      </View>
      <View style={styles.titlePlace}>
        <Text style={styles.textTitle}>Ingredients</Text>
      </View>