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

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.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 38 (16 by maintainers)

Most upvoted comments

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

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

  • Copyright © 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<ImageURISource>; `

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.

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 😃

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

cache: ‘reload’ is not working in Android.

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.