0

I am trying to cache profile pictures that are being fetched from an s3 bucket. On my backend I am able to fetch the url of each image. I then can loop through an array of profiles (which have the pictures' urls) and display the correct images, as used below.

{profiles && profiles.map((profile) => {
   <FastImage 
      source={{ 
         uri: profile.picture, // this is a URL string
         cache: FastImage.cacheControl.immutable // Default cache
      }}
   />
})}

When I change cache from 'immutable' to 'cacheOnly' the pictures are no longer rendered.

{profiles && profiles.map((profile) => {
   <FastImage 
      source={{ 
         uri: profile.picture, // this is a URL
         cache: FastImage.cacheControl.cacheOnly // picture only renders if in cache
      }}
   />
})}

But, if I substitute the picture variable with the actual URL string, the picture will render.

{profiles && profiles.map((profile) => {
   <FastImage 
      source={{ 
         uri: 'https://s3.aws.examplePictureKey' 
         cache: FastImage.cacheControl.immutable // Default cache
      }}
   />
})}

Then if I change cache from 'immutable' to 'cacheOnly' the picture persists, telling me it has been cached. What I am wondering is:

  1. Am I making a mistake here? All the documentation/resources I have read through do not have examples when looping through an array, but I am not sure why this would be the problem.
  2. My understanding is that the image cached is based on the url string, if the url does not change FastImage just gets the image in the cache. But the url is not changing, so why wouldn't the image be saved in the cache?
  3. The example above is slimmed down from what I am actually doing, the only difference though is that I am passing each profile element from a parent component before trying to render the image. Would this somehow prevent the image from being cached?

Documentation: https://www.npmjs.com/package/react-native-fast-image

Thanks!

jasontulloch
  • 31
  • 1
  • 6

1 Answers1

0

The cache: FastImage.cacheControl.cacheOnly from FastImage means it wont do any network request, it will just try to find from the cache. Default(immutable) means it will only change when the url changes so on any subsequent re-render, if the url changes to anything by chance, it will do network request again. And you need to return the component from map as well and provide the width and height properties to FastImage style as well.

{Array.isArray(profiles) && profiles.map((profile) => {
   return <FastImage 
      source={{ 
         uri: profile.picture, // this is a URL string
         // cache: FastImage.cacheControl.immutable // Default cache
      }}
    style={{width: 200, height: 200}}
   />
})}

Hope it helps.

Niraj
  • 134
  • 11