Native React Images not displaying after mapping over and being placed in image tag-CodePudding

Hi I have the following code which I just currently want to print the images out and will style later. It should be printing a picture as it comes across them in the list and printing them alongside its facedown side.

I have changed the way 'cardImages = []' is used from...

const CardImages = [
  {
    image: require("../assets/images/Matching_Cards/Level_One/BLUE_CARD.png"),
  },

To which I realize is not the proper way but I had to try...

const CardImages = [
  {
    image: "../assets/images/Matching_Cards/Level_One/BLUE_CARD.png",
  },

this appeared to make no difference. There are no errors that I can see in the console log, my list is shuffled and filled with images which I can see from the console.log().

Below is my return method attached to my CardDisplay function which should be iterating through them and displaying them in the elements.

return (
    <View>
      <Text style={{ textAlign: "center" }}>CARD DISPLAY: {difficulty}</Text>
      <View>
        {cards.map((card) => (
          <View key={card.id}>
            <Image
              style={GlobalStyles.faceDownCard}
              source={require("../assets/images/Matching_Cards/BACKGROUND_CARD.png")}
            />
            <Image style={GlobalStyles.faceDownCard} source={card} />
          </View>
        ))}
      </View>
    </View>
  );

Below is the complete structure of my component

import React, { useEffect, useState } from "react";
import { Text, View, Image } from "react-native";
import { GlobalStyles } from "../Styles/GlobalStyles";

const CardImages = [
  {
    image: require("../assets/images/Matching_Cards/Level_One/BLUE_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/ORANGE_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/PINK_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/RED_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/WHITE_CARD.png"),
  },
  {
    image: require("../assets/images/Matching_Cards/Level_One/YELLOW_CARD.png"),
  },
];

// shuffle cards

const CardDisplay = ({ difficulty }) => {
  const [cards, setCards] = useState([]);

  useEffect(() => {
    shuffleCards();
  }, []);

  const shuffleCards = () => {
    const shuffleCards = [...CardImages, ...CardImages]
      .sort(() => Math.random() - 0.5)
      .map((card) => ({ ...card, id: Math.random() }));

    setCards(shuffleCards);
  };

  console.log(cards);

  return (
    <View>
      <Text style={{ textAlign: "center" }}>CARD DISPLAY: {difficulty}</Text>
      <View>
        {cards.map((card) => (
          <View key={card.id}>
            <Image
              style={GlobalStyles.faceDownCard}
              source={require("../assets/images/Matching_Cards/BACKGROUND_CARD.png")}
            />
            <Image style={GlobalStyles.faceUpCard} source={card} />
          </View>
        ))}
      </View>
    </View>
  );
};

export default CardDisplay;

Appreciate all and any help ! :)

CodePudding user response：

Your Images need height / width props to be defined. It's not enough to have then defined in the StyleSheet (if you are, I'm not sure); you have to give them to the Image in those props.

CodePudding user response：

try giving your image component some styling of height and width