Android – react native: how to import local images using dynamic names

I have about 100 local hero images that need to be imported into the list view. This is my hero.js

renderRow(hero) {
return (
          <View>
              <View style={styles.container}>
                  <Image
                      source={require('./img/hero/'+hero.img+'.jpg')}
                      style={styles.thumbnail} />
                  <View style={styles.rightContainer}>
                      <Text style={styles.title}>{hero.name}</Text>
                  </View>
              </View>
              <View style={styles.separator} />
          </View>
);

After some research, I know that dynamic names are not allowed. I have also tried URI without error, but there are no images

{{uri: './img/hero/'+hero.img+'.jpg'}}

My folder structure is as follows:

Project
  index.ios.js
  hero.js
  img
    hero

What is the best way to deal with this problem? I don't want to put the image on the network

resolvent:

Sarence said the following on this forum

It seems that it can be done through URI, but it needs some work. You need to add your image to the Xcode asset and add your Android under RES / drawable

You can then use < image source = {{URI: "image" "name"} / > to get your picture