Cache image on react native

Question

Is there a good library or maybe some default react native components that cache the image from a url? I've tried react-native-cache-image but there are a lot of issues with react-native-fs and react-native-sqlite-storage and as I am new to react native I dont know how to fix them properly.

Solution 1

yarn add react-native-fast-image

Ref: https://github.com/DylanVann/react-native-fast-image

import FastImage from 'react-native-fast-image'


<FastImage
    style={{ width: 200, height: 200 }}
    source={{ uri: 'https://unsplash.it/400/400?image=1' }}
    resizeMode={FastImage.resizeMode.stretch}

/>

Solution 2

You may be interested in my higher order component module that adds performance related image caching and "permanent cache" functionality to the native <Image> component. My module depends on react-native-fetch-blob which is the goto well-respected and battle-tested library for downloading files, so you shouldn't have dependency problems.

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.

It also sounds like you are interested in arbitrarily storing image files to local disk. You can do that with a CacheableImage static method like so:

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

    // Console log outputs:
    //{
    //  url: 'https://i.redd.it/rc29s4bz61uz.png',
    //  cacheType: 'permanent',
    //  localFilePath: '/this/is/absolute/path/to/file.jpg'
    //}

  });

Hope this helps!

Solution 3

I have used this library and working in both android and ios phones. It is working in Both EXPO and ReactNative. In react native automatically stored catch images.

For Installation the library:

yarn add picache

then use in your js file like this, first import the file and used it. For more information click

import Picache from "picache";

const App = () => (
     <Picache
        style={{ height: 150, width: 350 }}
        source={require("./square.png")}
      />
);

Comments

[FDisk]

thanks, looks good. Probably the only one who cares about headers sended from the servers