React-native: [Image] Cache never expires for the same uri

[umhan35]

Even the image from the same uri is changed, <Image> still returns cached data. The code is here: Libraries/Image/RCTImageDownloader.m#L91

There should be a parameter that makes <Image> simply return a fresh copy of the image.

[bakso]

I wonder know too.

[JohnyDays]

I'm pretty sure this is to encourage you to use fingerprints, I may be wrong though. Does your server return cache headers? I'm not sure react-native takes them into account regardless

[umhan35]

It's not actually my server. I'm showing a satellite image from other source: weather.gc.ca/data/satellite/goes_nam_1070x_100.jpg

I can proxy the url but it doesn't make sense that cache never expires and there is no way to clear the cache from js code.

[JohnyDays]

If you need a quick fix you can add

var url = 'weather.gc.ca/data/satellite/goes_nam_1070x_100.jpg'
url += '?random_number=' new Date().getTime()

This will however always download the image.

[umhan35]

Thanks @JohnyDays. That should work. But now when the image is downloaded and I want to refresh the file, the obj-c code doesn't update the image... 😓

[ide]

@umhan35 there might be a bug in the image component, but for a temporary workaround (emphasis on temporary! if there is a bug in react we should fix it), you could specify <Image key={url} /> which will replace your old image with a new one each time the URL changes.

[umhan35]

@ide thank you! There is key to rescue. It works.

So, in addition to the bug that the title says, <Image> doesn't refresh itself after loaded.

[brentvatne]

@sahrens - looked at the git attributions for this and it looks like you are the right man for this issue, feel free to re-assign if I got it wrong :smile:

@umhan35 - can you elaborate on that last point?

[JohnyDays]

@brentvatne I think his last point may be referring to the same problem in #1417, if I understand correctly

[umhan35]

@brentvatne when Image is rendered, assign its uri to another image url doesn't make it show the new image.

[tadeuzagallo]

Oops, sorry about the assign mess, I was trying to assign @a2... Damn buggy chrome.

[brentvatne]

@tadeuzagallo - Github Issue Assigner - I had the same problem so I made this extension.

[brentvatne]

From IRC

potomushto:
Is there any plans to introduce a cache policy for images? For example, to be able to set expirationDate for RCTCache keys (<Image expire={week} />) or add methods to manual invalidating (this.res.image.reload())?

[ptmt]

@brentvatne it was my message on IRC. I use Image a lot in my app and hardly need to somehow control the cache. I've made a PR #1491 but it's a just silly yet working concept. Any thoughts how it could be done without risks to broke something in <Image/> for others? I see these options:
1) totally own component as an external library
2) use new <Image> feature "displaying local files". So the part responsible for downloading and caching goes to javascript side.
3) react-native fork <- I'm here

[sahrens]

You can also add a cache buster to the url from JS - not super elegant, but might work with no native changes?

On Jun 2, 2015, at 4:04 AM, Dmitry [email protected] wrote:

@brentvatne it was my message on IRC. I use Image a lot in my app and hardly need to somehow control the cache. I've made a PR #1491 but it's a just silly concept. Any thoughts how it could be done without risks to broke something in for others? I see these options:
1) totally own component as an external library
2) use new feature "displaying local files". So the part responsible for downloading and caching goes to javascript side.
3) react-native fork <- I'm here

—
Reply to this email directly or view it on GitHub.

[sahrens]

The image bug is a separate issue - changing the url should change the image, that definitely needs to be fixed. Closing this because I don't think we want to change the internals since a cache busting param in the url should solve this particular issue (you can change the URL whenever you want to refresh the image...once that bug is fixed of course.)

[hugebug4ever]

What's the status of this bug?
I still have this bug on real machine(release), but not happen on emulator(debug).
Am I missing something ?

[chenbrian]

I ended up adding

[_URLCache removeAllCachedResponses];

to RTCImageLoader.m where it checks for cached response. I added it just to clear the cache then commented it out. I'm still new to all of this so I'm not sure where to change to have my React Native app to set a flag to clear all image cache. For now, this works while I'm still building my app.

[alex-shamshurin]

I use
<img src={/public/uploads/filename?${Math.random()}}/>

[magrinj]

Hi guys, I've the same issue but with local pictures, I do something like that:

        <Image
          source={ object.selected ?
            require('../../images/filter/CheckmarkHighlight.png') :
            require('../../images/filter/Checkmark.png')
          }/>

I don't really understand what's happen, because the picture CheckmarkHighlight is a little bit smaller than the other, and when I select the element the picture change to the size of CheckmarkHighlight but with the picture of Checkmark. So I think it's the same problem as above.
I just find a way to solve it by adding a different key to the picture when it's selected or not, but that's re-render all the Image, and I don't think it's the best way to solve this problem.
What do you think ?

[npomfret]

Any progress on this? I'm getting duplicate images getting rendered when adding images to the end of a ListView. It only happens when the new row in the ListView is adjacent to another row that also has an Image in it.

[afilp]

I read the entire thread and I am still a little confused.

1. Is the Image bug solved eventually?
2. If I use the key={url} trick will that work eventually (by changing the URL?)? Or not?
3. If point 2 is working, is React Native fixed so that the "key" is not needed? I mean, shouldn't by default use a different image when the URL is slightly different? (even with a parameter change?)

Thanks!

[artem-russkikh]

Seems that local packager images (such as <Image source={ require('./img.png') } />) cached and there is no way to reset cache (on device).

I have to delete app and run it again or change filename to fix image to actual version. Also, setting key prop didn't help in that case (and i think key have another goal)

RN 0.35.0

[henrikra]

To reload local images like <Image source={require('./pic.jpg')} /> just kill terminal process which is always opened to new terminal window when simulator is started. Then restart simulator with react-native run-ios for example :)

[Laurensdc]

Bug still present.
I'm fetching photos from a server that's under development, where a request to e.g. /photo/5 can resolve to a different photo than last time (resetting server or doing a new photo upload).

There should be some way to delete the image cache when the app is restarted.

[rtman]

Yea I'm still encountering this in RN 0.49

[JulianKingman]

I need to be able to clear an image from the cache, so that when the image is accessed at the same URL, it loads it from the remote source. I've tried the key trick, and it doesn't work. It seems that once a URL is loaded, it refuses to load it again. Also, because of the structure of the image URL, I can't add query parameters. Has anyone come up with a work-around that can effectively clear the cache for a single image?

[rtman]

@sahrens just curious about the state of this bug? Are you expecting a fix soon? I went through the entire thread and I think the gist is that the bug isn't fixed. I tried all the workarounds and nothing worked btw.

[sahrens]

This is not a priority for us because we use separate internal native infrastructure for images. Someone from the community should take a look and send a PR?

[rtman]

@sahrens ah ok. I'm not sure I understand tho cus this thread is regarding the stock react native image component I thought?

[sahrens]

Native modules in RN are pluggable, so we replace the standard implementation with our own based on facebook-specific infrastructure.

[rtman]

@sahrens So your replacement is able to update the image content where the stock image component cannot?

If so is this something that is part of a future update? Or?? How can we as react native devs use this feature?

[tudor07]

@JulianKingman The issue with the Image component still persists. Why was this closed ?

[Laurensdc]

I think the solution is to set some kind of development/production flag, where the caching only happens on production.

[prakharrke]

I was going through react native node modules and in react-native->Libraries->Image->ImageSource.js, following is defined.
`/**

• Copyright (c) 2015-present, Facebook, Inc.
• All rights reserved.
  *
• This source code is licensed under the BSD-style license found in the
• LICENSE file in the root directory of this source tree. An additional grant
• of patent rights can be found in the PATENTS file in the same directory.
  *
• @providesModule ImageSource
• @flow
  */
  'use strict';

// This is to sync with ImageSourcePropTypes.js.

type ImageURISource = {
uri?: string,
bundle?: string,
method?: string,
headers?: Object,
body?: string,
cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached',
width?: number,
height?: number,
scale?: number,
};

export type ImageSource = ImageURISource | number | Array;
`

Which makes me think that there is prop called 'cache', possible values to which are given above. I added to source prop like follows.
<Image source={{uri : myImage, cache: 'reload'}} />

According to its definition, it should always reload the image from the server and not the cache. But it is not working.

[wd]

@prakharrke I've tested cache: 'relaod', it's working for me. You can compare with cache: 'force-cache' to see the difference.

[Dror-Bar]

cache: 'reload' is not working in Android.

[ios-dev-newbie]

I am having a flat list with images. When my images update I am trying to update my flat list images but they were not updating, I have looked into the directory and found that image is already changed there but not reflecting on the flat list. I have also tried adding key in Image tag solution as well as a cache='reload solution but nothing worked for me.

Is there any way to solve this?
react: 16.2.0,
react-native: 0.53.0,