Save online image locally

Issue

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?

Solution

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.

Answered By - Hardik Chavda