React Native storing images for offline usage

Question

My React Native app receives data (products) from an API that contains an array of objects, each object has a link for a picture. There is an option to download all the products for offline view (I'm using redux-persist + realm for that) but the problem is that the pictures itself are not downloaded only the links for them. What would be the best way for me to download the pictures so that I can attach them to the corresponding products?

Answer 1

There are multiple ways to do that, by a manual way you can download all images as base64 by using their addresses that comes from the API response. you should use JavaScript to download them, let see a JavaScript base64 downloading:

const imageLink = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';

fetch(imageLink)
  .then(res => res.blob())
  .then(data => {
    const reader = new FileReader();
    reader.readAsDataURL(data);
    reader.onloadend = () => {
      const base64data = reader.result;
      console.log(base64data); // you can store it in your realm
    };
  });

After downloading each image store it in your realm local database and in usage call it from the realm.

There are other ways like using libraries for catching images. like react-native-cached-image.