Cache full images folder on apploading (React Native Expo) - react-native

Question

I want to cache hundreds of images while the splash-screen is displayed.
Following the guide from : https://docs.expo.io/versions/latest/sdk/app-loading#__next
I dont want to type one by one like :
async _cacheResourcesAsync() {
const images = [
require('./assets/images/image1.png'),
require('./assets/images/image2.png'),
require('./assets/images/image3.png'),
require('./assets/images/image4.png'),
require('./assets/images/image5.png'),
require('./assets/images/image6.png'),
...
];
const cacheImages = images.map((image) => {
return Asset.fromModule(image).downloadAsync();
});
return Promise.all(cacheImages)
}
I'v noticed that I cannot do something like (./assets/images/*) :
async _cacheResourcesAsync() {
const images = [
require('./assets/images/*')
...
];
}
Is there a way to reference the full folder on _cacheResourcesAsync() ?

Answer 1

What you're looking for is called dynamic imports (eg: in webpack), and it's not available in React Native. Here is a description of how you can do that in React Native, both through automation and through a Babel plugin. Given that individual-maintainer Babel plugins don't seem to survive very well between even minor upgrades of Babel, I'd highly suggest the automation approach, akin to what is laid out in the article linked to above.
For my part, though, I'd probably do it in bash and tie it into my build process (through package.json's "scripts"). It'd be something like this:
#!/bin/bash -exu
# The paths are relative to the script's parent directory.
DIRS_TO_BUILD=( ./src/res ./images ./assets );
cd `dirname $0`
HEREDIR=`pwd`
for DIR in "${DIRS_TO_BUILD[#]}"
do
cd "$HEREDIR/$DIR"
rm index.js
FILES=`ls -1QBb | grep -E '.js($|x|on)' | sort -u`
for FILE in $FILES
do
if [ -f "$FILE" ]
then
BASENAME=`basename "$FILE" .js`
BASENAME=`basename "$BASENAME" .jsx`
BASENAME=`basename "$BASENAME" .json`
echo "export const $BASENAME = require(\"./$FILE\");" >> index.js
fi
done
done
Resist the urge to call this script like import * as MyAssets from "./assets", because that'll kill tree shaking when it arrives.
You can modify that script to instead/also generate a call to loadAsync in order to prefetch all the assets. Such a modification is left as an exercise for the reader.

Answer 2

Hack instead for cache
A simple and effective way would be to bundle your assets in the app.JSON file. So when you will make a build those images will also come in the build and the app wouldn't have to search for those images in amazon CDN. This will increase your file size for sure but will make the assets offline and reloading faster.