Reset internal android image cache in React Native

Question

I wanted to consulate about a problem using the image library in React Native:

When doing a fetch of the data I get a Json with the urls of the images and they are shown in the screen (the images), if I change the urls of the images in the Json in the new fetch the new Json is downloaded but the images are not update in the view (as if there was an internal cache of android).

Is it possible to only erase the image cache without any external libraries? Or which library do you recommend to use in this case?

Thank you very much, I hope the answer.

An Image replacement that may help you - github.com/DylanVann/react-native-fast-image — vonovak
– vonovak, Commented Apr 1, 2018 at 23:30

bennygenel · Accepted Answer · 2018-04-02 08:43:24Z

5

To my knowledge react-native doesn't support clearing cache out of the box. What you can do is a quick hack. You can append a random number (like current date in milliseconds) to the image uri that you want to force reload. Because the uri changed cached image will not be used.

Example

export default class App extends Component {
  render() {
    const uri = 'https://picsum.photos/200/300?date=' + (new Date()).getTime();
    return (
      <View style={styles.container}>
        <Image source={{uri}} style={{ width: 200, height: 300}} />
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url.
        </Text>
      </View>
    );
  }
}

answered Apr 2, 2018 at 8:43

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

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

3 Comments

Eric Ahn Over a year ago

would every image then accumulate in the cache and take up space unless cache is cleared explicitly? or is it managed automatically?

LonelyCpp Over a year ago

One concern here is that the image flickers every time this component re-renders.

Voonic Over a year ago

instead of adding timestamp or random number, append Hrs so that URL will only change when Hr in the clock changes, avoiding the flicker and using caching for an hr

Dishant Walia · Accepted Answer · 2020-01-09 10:35:37Z

1

Try to append random string in url. I have fixed the same issue by adding random string.

'?t=' + Math.round(new Date().getTime() / 1000)

Follow this link for more info

edited Jan 9, 2020 at 10:35

answered Jan 8, 2020 at 6:46

Dishant Walia

7115 silver badges8 bronze badges

Comments

Deepak Singh · Accepted Answer · 2022-03-24 10:45:51Z

0

<Image source={{ uri: `${this.props.route.params.itemData.imageUrl}`+ '?' + new Date() }}

answered Mar 24, 2022 at 10:45

Deepak Singh

1,1879 silver badges18 bronze badges

Collectives™ on Stack Overflow

Reset internal android image cache in React Native

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related