Trying to understand assetBundlePatterns

Expo SDK
1

I’m trying the assetBundlePatterns feature from SDK 24 and I don’t fully understand how it works.

Before SDK 24 I used the following routine:

const cacheImages = (images) => {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
};

This code downloads requested file and caches it so when you do require('./assets/images/logo.png') the file is retrieved from local cache.

Now with SDK 24 you define the resources as assets

"assetBundlePatterns": [
  "assets/**",
  "node_modules/react-navigation/src/**/*.png",
]

which are packaged in the project bundle.

So I asume there is no need to use cacheImages scheme anymore, is this right?

However, I notice images loads are slow, like they are being downloaded instead of being retrieved from project bundle.

I attach a video to show the delay loading back-icon image from react-navigation when assetBundlePatterns is used without cacheImages.

https://my.cl.ly/content/2O0m3e0a1D1u

Also the same happens with my own images, if I have no connectivity they are not loaded in iOS (Android works good).

No image loaded (airplane mode):

IMG_5654
IMG_56541242×2208 62.5 KB

Image loaded (with internet connection):

IMG_5655
IMG_56551242×2208 113 KB

So for now I have implemented both schemes, assetBundlePatterns annotation in app.json, and cacheImages at app startup.

May be this feature is not mature yet and we have to wait for SDK 25?

Thanks !!!

2

@janic is the expert here and can provide more info on how bundled assets work with the download/prefetch APIs.

Also just to set expectations, bundled assets are a very new feature (SDK 24 was our initial release) and I’d expect it to take time for them to become more mature and robust.

3

Great @ide, no updates with this thread … btw here another thread related with this:

thanks !!!

4

Yes the assets specified with assetBundlePatterns should not need to be downloaded with Image.prefetch / Asset.downloadAsync anymore.

Looks like an issue with iOS, could you inspect the .ipa file (it’s a zip file you can use unzip x.ipa) and check if your assets are contained inside it (might be inside a .app file)? The files will have a hash for name, no extension.

The feature is still in early days and we’re working on major improvements for the next sdk release, thanks for trying it out!

5

Hi @janic I checked the .ipa file and my resource files are there (hashed filenames without extension).

How is something like:

<Image source={require('../assets/images/logo.png')} />

resolved to a local asset bundle hash name (since require is from Node)? are you overriding this function?

Thanks !!!

6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.