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