Can someone explain this behavior of require() in react-native with react-native-elements?

Question

While utilizing the <ListItem /> and <Avatar /> component I've been attempting to use some test data to fill in information dynamically.

I am able to provide <Avatar /> with source={require('./images/coffee.jpg') for example and that works fine. I don't want to have to hard code all the images though, so in the test data (an array of objects) I simply want to call the path for each respective image.

However, I've come to find writing <Avatar source={require(item.img)} /> (where item.img is './images/coffee.jpg') errors and states that there's an invalid call on line 18 "require(item.img)"

I read from one post answer that stated "the image name in require has to be known statically."

Is this simply something that cannot be done through the require statement? I feel like dynamically rendering this kind of data would be desired or important, so if not, what would be the method of accomplishing something like this?

Answer 1

For anyone else curious, I ended up creating a solution for this.

There seems to be something with <FlatList /> and how it renders the ListItems... Instead of destructuring the {item} out of the data passed in by FlatList, I provided it directly to the RenderItems component I made to utilize .map() instead.

Creating a new array of content with .map() and returning the result directly from the RenderItems function allows for you to successfully call the test data and the img keys. The paths to the images need to use require() statements in the test data, but then it will render them successfully in the .map() loops.