Save online image locally

Question

I am getting a profilepicture from my server via a URL:

<Image
    source={
      profilePictureUrl !== ''
        ? {uri: API_URL + '/' + profilePictureUrl}
        : PROFILE_DEFAULT
    }
    style={{width: 200, height: 200, borderRadius: 100}}
  />

How can I save this image on my device so it is available when the user is offline?

Answer 1

You can use prefetch method of Image component which download image and store in disk cache for later use.

Call this await Image.prefetch(API_URL + '/' + profilePictureUrl); once when user is online before showing this image if you have profile picture url.