How to manually remove a url from cache

[byteab]

I have an Image that fetched from the server and "fast image" successfully cache it tnx :) but the way the image server work is that it just update the image but url will remain the same. so how can I remove this specific url from the cache so fast image fetch the new image

[ksitko]

I don't know how to remove it from cache, but you could get the same effect with a workaround. If you set the cache option as FastImage.cacheControl.web and remove the url temporarily to flush the image, and set it back to the previous url again, FastImage will check the headers, see that they're different from the cached image, download and replace the cached image with the new one.

But that feels a bit hacky so I'm all ears if anyone knows how to make FastImage to rerender and check if the remote image has changed.

[ryzhak]

More dirty hacks!

constructor(props) {
      super(props);
      this.state = {
          avatarCacheType: FastImage.cacheControl.web
      };
}

resetAvatarCache = () => {
    this.setState({ avatarCacheType: FastImage.cacheControl.immutable });
    this.setState({ avatarCacheType: FastImage.cacheControl.web });
};

render() {
    return <Avatar source={{ uri: avatarUri, cache: this.state.avatarCacheType }} />;
};

So basic idea is to call resetAvatarCache() when you "expect" image to change, for example on new avatar upload.

[andreialecu]

An alternative is to just add a versioning query string to the url

<FastImage source={{ uri: `${avatarUri}?v=${version}` }} />

You then just increment version.

[11AA8R4]

An alternative is to just add a versioning query string to the url

<FastImage source={{ uri: `${avatarUri}?v=${version}` }} />

You then just increment version.

I was having cache issues like Ehsan, you saved it with your answer.

const now = (new Date()).valueOf()
<Image source={{uri:`${data.uri}?v=${now}`}} />

[JimTeva]

I was also having cache problem because the uri was almost the same (only diff was everything after the extension .jpg: ".....jpg?GoogleAccessId......." but the file in cloud storage was different. So I added the parameter 'cache' in source and set it to 'web':

source={{
  uri: imageURL,
  priority: FastImage.priority.high,
  cache: FastImage.cacheControl.web, // <-- here
}}