How to pre-cache images used by react-navigation

Expo SDK
5

Hi again @notbrent,

I’m using SDK 24, previoulsy I was using Asset.downloadAsync() to cache images, now I implemented assetBundlePatterns to include them in the bundle.

So I removed downloadAsync(), but things are not working as expected since there is a delay displaying the back-icon from react-navigation image.

Please see the following examples:

without Asset.downloadAsync()

https://cl.ly/2O0m3e0a1D1u/ScreenRecording_12-15-2017%2011-00-31.gif(image larger than 4 MB)

with Asset.downloadAsync()

https://cl.ly/2C022q2M0H0t/ScreenRecording_12-15-2017%2011-01-15.gif(image larger than 4 MB)

This is my app.json:

{
  "expo": {
    "name": "SkyApp",
    "description": "An empty new project",
    "slug": "skyapp",
    "privacy": "unlisted",
    "sdkVersion": "24.0.0",
    "version": "0.4.0",
    "orientation": "portrait",
    "primaryColor": "#cccccc",
    "icon": "./assets/icons/app-icon.png",
    "splash": {
      "image": "./assets/images/splash.png"
    },
    "packagerOpts": {
      "assetExts": ["ttf", "mp4"]
    },
    "ios": {
      "bundleIdentifier": "py.com.skycop.skyapp"
    },
    "android": {
      "package": "py.com.skycop.skyapp",
      "permissions": [ "ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION" ]
    },
    "assetBundlePatterns": [  
      "assets/**",
      "node_modules/react-navigation/src/**/*.png",
    ]
  }
}

Also I’m loading Expo with this command:

$ exp start --clear --tunnel --dev

BTW, Its not clear how assetBundlePatterns works internally, the cache routines should work together with this new flag? or i could remove this piece of code?

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

async _initAsync() {
  const imageAssets = cacheImages([
    require('./assets/images/logo.png'),
    require('./assets/icons/loading-icon.png'),
    require('react-navigation/src/views/assets/back-icon.png'),
  ]);
  const fontAssets = cacheFonts([MaterialIcons.font]);
  await Promise.all([ ...imageAssets, ...fontAssets ]).then(() => {
    if (__DEV__) {
      console.log('Application initialized');
    }
  });
}

Thanks !!!