Question 33099 in React native Question posted in
The official React Native documentation can be found here.

How to refresh cached images if the image is updated but the URL doesn't change – React native

I want to cache images using the react-native-fast-image library. Image URLs will not be changed over time. But the images can be changed. So the Image change will not change the image on the app. Images are stored in S3. For a solution what I thought was to keep a last image updated timestamp on the Firebase side. So when I’m updating the images I can change the timestamp and place it at the end of the image URLs.

So the image URLs will look like this

http://localhost/chair.jpg?${last_updated_timestamp}
http://localhost/chair.jpg?${last_updated_timestamp}

I’m thinking of saving the last_updated_timestamp in Async Storage, So I can sync the timestamp from Firebase to Async Storage and use it directly for the images.

Is there any other better way I can achieve the same result?

Tags:

5

Answers


  1. 0

    This library provides a different types of caching control.

    source.cache?: enum
FastImage.cacheControl.immutable - (Default) - Only updates if url changes.
FastImage.cacheControl.web - Use headers and follow normal caching procedures.
FastImage.cacheControl.cacheOnly - Only show images from cache, do not make any network requests.

    react-native-fast-image

    In your cache url will not change so you can use simple caching for that component as below

     <FastImage
    source={{
      uri: item.image_url,
      headers: { Accept: "*/*" },
      priority: FastImage.priority.high,
      cache: FastImage.cacheControl.web
    }}/>
    Login or Signup to reply.
  2. 0

    you can try like this key=${this.state.source.uri}${new Date()}

    Login or Signup to reply.
  3. 0

    Do u know frequency of updating your imag it can be used.

    Set MAX-AGE of caching on image this value can be how often that image can be updated even if you will not changed it this image will be pulled again after MAX-AGE so be sure of what value be used

    Login or Signup to reply.
  4. 0

    S3 has cache too. Our production project use S3. We have same problems with cache. And we use query params.

    Its simply and effective solution if you have to solve problem at frontend.

    Other solution will be related to configure not only react-native-fast-image but S3 too. Our devops didnt think that its his problem and we use query params)))

    Login or Signup to reply.
  5. 0

    it has also happened to me a couple of months ago. I have image URL like this

    https://myown.server/images/1122.png . Image on the server was change but it does not change on the application. I have find a simple solution for this as this.

    <Image src={{uri:`${imge_url?new Date()}`}} />

    Hope this will solve your problem .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search