How can I show dynamic images with require() in React Native?

I’m fetching data from api and then i want to show images based on the symbol coming from the api data

{apiData ? (
    apiData.data.map((item, key) => (
      <Listing symbol={item.symbol} path={`../images/${item.symbol}.png`} />
    ))
  ) : (
    <></>
  )}

sending the path and the symbol to another component VVVV

const Listing = ({ symbol, path }) => {
  return (
    <View style={tw`flex-row justify-between p-10`}>
      <View style={tw`flex-row items-center`}>
        <Text style={tw`mr-2`}>{symbol}</Text>
        <Image source={require(path)} style={{ width: 50, height: 50 }} />
        <Text>{path}</Text>
      </View>
    </View>
  );
};

Is there a way to do it like that or i have to use something else ?

Answer

“In order for this to work, the image name in require has to be known statically”, that’s what React Native’s doc says. In others words, you cannot require an image in React Native with a dynamic path.

The workaround in your case is to import them statically in an object, where each key is a symbol and its value the path of its related image. Don’t forget to use the correct path:

const images = {
  one: require("../images/imageOne.png"),
  two: require("../images/imageTwo.png"),
};

This way you give Listing only the symbol, and it will fetch the image from the above object:

const Listing = ({ symbol }) => {
  return (
    <View style={tw`flex-row justify-between p-10`}>
      <View style={tw`flex-row items-center`}>
        <Text style={tw`mr-2`}>{symbol}</Text>
        <Image source={images[symbol]} style={{ width: 50, height: 50 }} />
        <Text>{path}</Text>
      </View>
    </View>
  );
};