require() not working with interpolated string when fetching an image in react native

Question

I am using an Image component as a background in React Native and am currently providing the source prop with an image as follows, which works.

const ImageWrapper = (props) => {
      return (
        <Image source={require('../../../images/testingImages/cells.png')} style={styles.imageView}>
          {props.children}
        </Image>
      );
    };

However, I would like to provide the require with an interpolated string with the name of an image provided by a prop as so:

require(`../../../images/testingImages/${props.imgURL}`)

But whenever I do so (even when I create the string as a seperate variable without using ES6 and pass it into require). I get the error -

"unknown named module '../../../images/testingImages/cells.png'".

Is there away to get the image without using require? As I would love to be able to pass the image url as a prop so that I can reuse the component when I want to change the background.

Any help is much appreciated!

Answer 1

Hopefully somebody else can provide a solution to your exact problem because I was having the same issue, but my workaround was to pass the entire value for source as a prop. I had that as a value to a certain key for each map within a list in my scenario, so that was clean enough for me. But that may be just moving the problem up a level in your case.