Getting "TransformError: Invalid call" when trying to use require with string concatenation

Question

I have data in such format:

const data = [
  {
    id: '0',
    title: 'Some title 1'
  },
  {
    id: '1',
    title: 'Some title 2'
  }
  ...
]

and I have a folder with images where every image is called '0.png', '1.png', etc, the same amount as the data array length. What I'm trying to do is to map through the data array, displaying the title and the image with the same name as the element's id. For example,

<Image source={require('./images/0.png')} />

So I wrote this piece of code:

data.map(item => (
  <View>
    <Image source={require(`./images/${item.id}.png`)} />
    <Text>{item.title}</Text>
  </View>
))

which gives me this error: Error: TransformError: Invalid call at line 36: require("./images/" + item.id + ".png")

I've also tried it this way:

<Image source={require('./images/' + item.id + '.png')} />

When I console.log the path to the image that's created using this concatenation, it looks okay.

By the way, this works just fine:

<Image source={require('./images/' + 10 + '.png')} />

and it displays the image named '10.png'

Am I missing something? Please help!

Use url instead of require. I find it a lot more comfortable. You can also add an onError call so that you handle the case where your image is missing. — Mike, Feb 07 '20 at 14:34
What error do you get with url? Also, could you console.log the item? — Mike, Feb 07 '20 at 14:35
Could you please provide an example with url in source? Maybe I’m doing it wrong — Christine H., Feb 07 '20 at 14:37
My bad it looks like url isnt supported. Have you tried calculating the path and then trying require? — Mike, Feb 07 '20 at 14:43
Yes, I've also tried calculating it and then adding the variable to source (source={imageUrl}), it has the same effect — Christine H., Feb 07 '20 at 14:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207422/discussion-between-mike-and-christine-h). — Mike, Feb 07 '20 at 14:45
Does this answer your question? [React Native - Image Require Module using Dynamic Names](https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names) — Mike, Feb 07 '20 at 14:51

Mike · Accepted Answer · 2020-02-07T15:00:43.700

The names used in require need to be known statically. When you add './images/' + 10 + '.png' this immediately translated to ./images/10.png but when you do it dynamically it won't work.

https://facebook.github.io/react-native/docs/images.html

React Native - Image Require Module using Dynamic Names

A solution that gets around this is to add a uri data field to your data and load from there. You can generate it using an external script (for example in python).

Getting "TransformError: Invalid call" when trying to use require with string concatenation

1 Answers1