'React Native Images On Android Never Reload When Uri Doesn't Change

Despite uploading a new image to an s3 hosted url, the <Image> component will not update the image if the uri does not change. This is a problem for Android only as far as I can tell, because for iOS you can use the cache: 'reload' prop.

I have resorted to this solution:

<Image 
  source={uri: imageUrlFromS3 + '?time=' + new Date(), cache: 'reload'}
  style={width: 100, height: 100}
/>

By adding a meaningless query to the url, the component recognizes that the uri has changed, which then refreshes the updated image. Similarly, I have tried this by changing the key to be a new Date(). This seems like horrible for performance, due to the aggressive rerendering.

It seems that this has been a problem for a long time.

I have seen some answers that require using another package.

Is there another solution to this problem that doesn't require using another package?

Solution 1:^[1]

You just have to do it like this:

source={uri: imageUrlFromS3 + '?' + new Date()}

Solution 2:^[2]

You can substring the unix timestamp such that it could re-render every N milliseconds.

For example, source={uri: imageUrlFromS3 + '?' + Date.now().toString().substring(0,10) + "000" ...

would mean it would re-render every 1000 milliseconds = 1 second.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	4b0
Solution 2	user355843

'React Native Images On Android Never Reload When Uri Doesn't Change

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]