2

I want my RN App to be able to use without an internet connection. From an API I receive images with the following type:

interface ApiImage {
  url: string;
  updatedAt: Date;
}

So my goal is to download the image and store it on the device to make offline usage possible. The problem is the most explanations/tutorials/stack overflow posts recommend to use the rn-fetch-blob library which is unmaintained. Also react-native-fs and react-native-fetch-blob are not maintained. So what is the best alternative to get images from an URL and store them on the Device (IOS and Android) ?

EDIT:

Actually to get an image as data url I use the following code:

fetch(url, {
  method: 'GET',
})
  .then((response) => response.blob())
  .then((blob) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => {
      this.setState({dataurl: reader.result.toString()});
    };
  });

And in the render function of my class component I use conditional rendering like {this.state.dataurl && <Image source={{uri: this.state.dataurl}} style={{ height: 200, flex: 1 }}/>}

It works fine!

The problem now is I'm not sure what's an efficient way to store the received blob.

0 Answers0