URNS Fundamentals - 13 : card component : invalid call require(image)

React Native
1

Hello, I am following the class and doing the exercice in order to create the card component.
I struggled and looked for the solution but I might have an issue.

Here you will find my AppCard component :

function AppCard({ title, subTitle, imagePath}) {
return (
    console.log(imagePath),
    <View style={styles.CardStyle}>

        <Image source = {require(imagePath)}></Image>

        <Text style={styles.TitleStyle}>
            {title}
        </Text>
       
        <Text style={styles.SubtitleStyle}>
            {subTitle}
        </Text>
    
    </View>
);

}

But when I want to test it, with the following code in App.js :

   <AppCard
title = "Item1"
subTitle = "100 balles"
imagePath = "../assets/lu.jpg"

I have the following error message :
TransformError app\components\AppCard.js: app\components\AppCard.js:Invalid call at line 9: require(imagePath)

Does anyone see where would be my mistake ? What I should do ?
I debugged with console.log to check the path (and I commented the image part of the card) and the path is good, even if it’s printed two times, and the first time it seems to be undefined (could it come from there ?)

Thank you for reading this and helping me out :slight_smile:

2

Ok so I found the mistake, don’t put hte require statement in your Card component, here’s the fix :

unction AppCard({ title, subTitle, imagePath}) {

return (
console.log(imagePath),

    <Image source = {imagePath}></Image>

    <Text style={styles.TitleStyle}>
        {title}
    </Text>
   
    <Text style={styles.SubtitleStyle}>
        {subTitle}
    </Text>

</View>

);

And when you create your Card :

      <AppCard

title = “Item1”
subTitle = “100 balles”
imagePath = {require("…/assets/lu.jpg")}>

1 Like