How do I save photo from firebase storage to phone Gallery with expo and react-native?

Question

I have a photo url and I want to download the photo to the phone storage. I store the photo on firebase so the url is something like https://firebasestorage.googleapis.com/v0/b/.../..***0e896313c

As far as I see here expo doesnt work with rn-fetc-blob so I started looking for alternative solutions. I thought I should use expo's MediaLibrary but when I try to create asset with await MediaLibrary.createAssetAsync(uri); it requires a local url with extension.

Am I missing something, or should I use some other library?

score 3 · Accepted Answer · answered Sep 06 '21 at 05:50

You can use expo-file-system to download the photo. It gives you a local uri after downloading the file. Then, use MediaLibrary to save the file to your gallery

// Function to download the photo
const Download = async (uri) => {
  const downloadInstance = FileSystem.createDownloadResumable(
    uri,
    FileSystem.documentDirectory + "image.jpg"
  );

  const result = await FileSystem.downloadInstance.downloadAsync();
}

Your file would get downloaded in a directory whose uri would be in the result object. Now use MediabLibrary to save the photo to the gallery.

If you just log result.uri you would get the local uri where your image has been downloaded. Now

const asset = await MediaLibrary.createAssetAsync(result.uri);

MediaLibrary.createAlbumAsync("MyFolder", asset, false)
   .then(() => console.log('File Saved Successfully'))
   .catch(() => console.log('Error in saving file'));

By using above method your image would be saved in your Gallery in a folder called "MyFolder"

How do I save photo from firebase storage to phone Gallery with expo and react-native?

1 Answers1