How to clear picture's disk cache in React Native

user_7809435 0
Viewed 5494

When I used the image.prefetch method, I wanted to clean up its disk cache, but I didn't find the appropriate method in React Native.

react-native prefetch image
1 Answers

Update to clarify: React Native does not expose a method to do what you require out of the box at this time, you will have to use a third party solution.

So, instead of using native Image.prefetch() you could use my higher order component module to upgrade <Image> to handle caching/permanent storage, and accomplish this.

React Native Image Cache HOC

Tl;DR Code Example:

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
      </View>
  );
  }
}

The first image will be cached until the total local cache grows past 15 MB (by default) then cached images are deleted oldest first until total cache is below 15 MB again.

The second image will be stored to local disk permanently. People use this as a drop in replacement for shipping static image files with your app.

If you want to pre-warm cache like Image.prefetch()

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg')
  .then( localFileInfo => {
    console.log(localFileInfo);

    // Console log outputs:
    //{
    //  url: 'https://i.redd.it/rc29s4bz61uz.png',
    //  cacheType: 'cache', //add true as 2nd param to cacheFile() to make permanent
    //  localFilePath: '/this/is/absolute/path/to/file.jpg'
    //}

  });

Then when you want to clear it from disk as requested:

import RNFetchBlob from 'react-native-fetch-blob';
RNFetchBlob.fs.unlink(localFilePath.localFilePath)
  .then(() => {
    console.log('file deleted!');
  });

Hope this helps you!

user_8202730
Related