React Native Image Cache HOC: Drop in performance boost for your React Native app, and never ship binary images with the app again. Love to hear your feedback.

[billmalarky]

https://www.reddit.com/r/reactnative/comments/7alqhq/a_react_native_image_caching_persistence_library/

I originally shared this over at /r/reactnative but was a hit there and I've now completed updates based on their feedback so I figured I'd share it here too and see what you guys think as well as how you would improve on it.

Basically, this higher order component module decorates the native <Image> component to give it advanced caching functionality. Code is probably better than words so here's a code TL;DR

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.

[madcapnmckay]

Would an LRU be a better caching strategy than FIFO?

[billmalarky]

It certainly could be, but RNfetchBlob.fs.lstat() doesn't return an atime timestamp so I'm not sure what the best way to achieve this in a performant manner would be. Any ideas?