Require with prop doesn't work. "Invalid call at.."

Question

I don't understand why this code doesn't work.

const UserCard = props => {
    return (
      <View style={styles.card}>
          <View style={{flex: 0.33}}>
            <Image source={require(props.user.image)} style={{width: 100, height: 100}}/>
          </View>
          <View style={{flex: 0.66}}>
            <Text>bb</Text>
          </View>
      </View>
    );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    backgroundColor: 'green'
  },
});


export default UserCard;

props.user.image = 'Assets/test/joan.jpg'

If I put in an image:

<Image source={require('Assets/test/joan.jpg')} style={{width: 100, height: 100}}/>

It's works.

In assets I have package.json with name Assets so I can use absolute paths.

I have test various options and none of them.

For example:

return (
   const user_image = require(props.user.image);
   ... 
      <Image source={user_image} style={{width: 100, height: 100}}/>
   ...

Other:

return (
   const user_image = props.user.image;
   ... 
      <Image source={require(user_image)} style={{width: 100, height: 100}}/>
   ...

Or with src instead of source, but it doesn't work...

Also I test it changing const UserCard = props => {

For class UserCard extends React.Component {

And still the same...

Please help.

EDIT:

HomeScreen with object users

const users = [
      {
        "image" : "Assets/test/fernando.jpg",
        "name" : "Fernando",
        "description" : "General Manager",
      },
      {
        "image" : "Assets/test/daniel.jpg",
        "name" : "Daniel",
        "description" : "CEO",
      },
      {
        "image" : "Assets/test/joan.jpg",
        "name" : "Joan",
        "description" : "Manager",
      },
    ];

class HomeScreen extends React.Component {
   ...
   render() {
       return (
         <SafeAreaView style={styles.container}>
           <ScrollView
             style={styles.container}
             contentContainerStyle={styles.contentContainer}>
             { typeof users === 'object' && users.length > 0 && (users.map((user, index) => {
              return (
                  <View key={index} style={{flex: 1, backgroundColor: 'red'}}>
                    <UserCard user={user} />
                  </View>
              )})
            ) }  
           </ScrollView>
         </SafeAreaView>
       );
     }

Can you tell us how you passing `user` in your `UserCard` component? — Kishan Bharda, Sep 17 '19 at 17:27
@Cookie for static image I don't know about it. But one more question is `UserCard` component is in another file ? — Kishan Bharda, Sep 20 '19 at 08:26
No, because the other params show well. For example: {props.user.name} @KishanBharda — Cookie, Sep 20 '19 at 11:05
I will look at it but I think I made a console.warn of props.image and it was the same as I put static "Assets/test/joan.jpg" @KishanBharda — Cookie, Sep 20 '19 at 11:50

score 0 · Answer 1 · answered Dec 09 '22 at 10:22

So today I ran into this problem My solution was instead of passing the path to the require like this

<Image source={require(props.user.image)} />

I passed it like this

<Image source={props.user.image} />

And I sent require with the Data like this

const users = [
      {
        "image" : require("Assets/test/fernando.jpg"),
        "name" : "Fernando",
        "description" : "General Manager",
      },

Works like a charm.

score 0 · Answer 2 · answered Aug 27 '23 at 11:26

This can be other solution. Don't send image path from parent component to child component . Send image itself like that :

<UserCard user={user} image={require('Assets/test/daniel.jpg')} />

And Use it with directly in child component:

<Image source={props.image} style={{width: 100, height: 100}}/>

Require with prop doesn't work. "Invalid call at.."

2 Answers2