cacheImages, how to refer to them and why they throw an error

Hi peps,
first of all, awesome tool to get started with React Native:)

I’m prefetching images the way the docs explanes it, but I get a warning, when caching the image from the example (it’s still https). And when they are prefetch, how do I refer to the when i want to use them in the tag – do I just use the url or …?

_loadResourcesAsync = async() => {
    const imageAssets = cacheImages([

    const fontAssets = cacheFonts([
      {'OrstedRegular': require('./../assets/fonts/OrstedSans-Regular.ttf'),
      'OrstedBold': require('./../assets/fonts/OrstedSans-Bold.ttf'),
      'OrstedLight': require('./../assets/fonts/OrstedSans-Light.ttf')}

    await Promise.all([...imageAssets, ...fontAssets]);

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

Hey @cubanpete,

Can you share what the warning says when you have the url included in the prefetching code? Also, when you prefetch a web image, you’ll just continue to use the url when you use it in an Image component, but rather than make a network request it will fetch it locally.



1 Like

Wow Adam, thanks, that really helped.

If disable the prefetching of the image, then everything works fine. But if I try to prefetch the image (or any other image) I first get an error saying that the font OrstedBold could not be loadAsync … then if I remove all the refrences to the OrstedBold font, I get this error.



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