CODEWITHSUNDEEP
reactjsreact-nativeamazon-s3caching
camille
camille

Reputation: 328

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

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?

Upvotes: 0

Views: 3103

Answers (5)

Ahmad Hasham
Ahmad Hasham

Reputation: 1

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

Upvotes: -1

Engr.Aftab Ufaq
Engr.Aftab Ufaq

Reputation: 6464

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 .

Upvotes: 0

rycha
rycha

Reputation: 804

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)))

Upvotes: 0

jishan shaikh
jishan shaikh

Reputation: 1

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

Upvotes: 0

Harshal Valanda
Harshal Valanda

Reputation: 5451

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
    }}/>

Upvotes: 1

Related Questions