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:

1. http://thecatapi.com/api/images/get?format=src&type=gif&size=small
2. http://junglebiscuit.com/images/random/rand_image.pl

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?

Answer 1

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

Answer 2

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