React-Native Disable Image Cache on Android

Question

i am trying to use a random image generator for a demo app i am creating.

i have tried the endpoints:

but when i add a list of images to my page with:

<View>
    <Image
        source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
        style={{ width: 100, height: 100 }}
    />
    <Image
        source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
        style={{ width: 100, height: 100 }}
    />
    <Image
        source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
        style={{ width: 100, height: 100 }}
    />
</View>

the expectation is that for each Image component, a different image would be displayed. strangly, this does not work on Android. it seems that the image or url is being cached somewhere so when the image is rendered again with the same URI, the same image is displayed.

i have tried the same application on IOS (the app is created using react native expo.io). the image are different as expected on IOS, it it seems to be a problem specific to Android.

is there a way to prevent android from cacheing the image and display a different image every time the Image component is rendered?

see this github issue: github.com/facebook/react-native/issues/12606 — splatte
– splatte, Commented Aug 29, 2019 at 8:34

Oleg · Accepted Answer · 2020-09-11 08:14:27Z

27

In 2020 it`s still an issue in react native (as Dishant Walia mentioned). Now best solution from github is:

add a query string after url, works for both platform

<Image
style={styles.drawerAccountImg}
source={uri: this.state.photoURL + '?' + new Date()}
/>

answered Sep 11, 2020 at 8:14

Oleg

1,1601 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hajan Over a year ago

Great trick, finally I end up using: this.state.photoURL + '?v=' + Date.now

Thales Ludwig Over a year ago

It's 2021 and this is still the best (and possibly only) solution out there.

velkoon Over a year ago

FINALLY! I was trying to show a preview of the pic react-native-camera-hooks had just taken, where the user takes a series of pictures and can retake the last picture, and it was stuck on showing the first pic taken no matter what. Worked fine on iOS without + '?' + new Date(), but not Android...TY. P.S. Hajan's solution (+ '?v=' + Date.now) did not work for me

Dishant Walia · Accepted Answer · 2020-01-08 06:41:26Z

4

Somehow you have to add random string to reload image with same uri. I have fixed the same issue by adding random string in image url. Follow this comment for more information React native image issue

answered Jan 8, 2020 at 6:41

Dishant Walia

7115 silver badges8 bronze badges

1 Comment

Adrian Buciuman Over a year ago

this is working. It took me a day to fix this problem.

Collectives™ on Stack Overflow

React-Native Disable Image Cache on Android

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related