Dynamic imports in React-Native

Have you ever tried to do this in a React-Native app?

<Image source={require("./images/" + this.props.image)} />

If you have, you probably discovered that all the imports are statically analyzed at compile-time, and have to be a simple string, not a dynamic expression.
Nevertheless, in a recent project this was very frustrating; My requirements were to include a folder of images in the app bundle, and render one of them according to a response from the server.
What we can do, is to require all the images in a file:

// assets/images/index.js
const images = {
  dog: require("./dog.png"),
  cat: require("./cat.png")
}
export default images;

Then, we can use it like this:

// app/imageView.js
import images from "../assets/images"
const View = (props) => 
  <Image source={images[this.props.image]} />

The problem is that my images folder had a lot of images I couldn’t possibly manually require them all.
So, I used the power of automation and created a simple script to make the assets/images/index.js file for me:

// prepareImages.js
const fs = require("fs");
const files = fs.readdirSync("./assets/images").filter(x => x.includes("png"));
const ex =
  "{\n" +
  files.map(x => `"${x.split(".png")[0]}": require("./${x}"),`).join("\n") +
  "}";
const res = "export default " + ex;
fs.writeFileSync("./assets/images/index.js", res);

This will produce a nice file exporting every image in a folder.
Thank you for reading!

P.S: I found a babel plugin that does something like this: https://github.com/dushaobindoudou/babel-plugin-require-all but the documentation isn’t very clear (is in Chinese or something) so I tested it, and here is how it works:
given: const imges = requireAll('./assets/imgs')
it will output:

const $assets_images_cat = require('./assets/images/cat.png');

const $assets_images_dog = require('./assets/images/dog.png');

const images = {
  $assets_images_cat: $assets_images_cat,
  $assets_images_dog: $assets_images_dog
};