React-native: Download Image From Firebase Storage

Pre-Informations: I still have a Firebase project opened and I am successfully still using the Firebase Database (So the firebase.initializeApp(config) works). I uploaded several

Solution 1:

Your first one seems right based on the docs. I believe you're getting an error so wire up an error callback as well:

storageRef.getDownloadURL().then(function(url) {
    console.log(url);
}, function(error){
    console.log(error);
});

See: https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL

Solution 2:

Update

I reported this issue to Firebase support and I got the following response:

Our engineers got back and it seems that this is an Android-specific issue (works on iOS) [..] We are currently working on this, but as to the timeline, we could not share anything as of the moment

Research

It appears that this is an actual bug caused by react-native's XMLHttpRequest acting up. When trying the getDownloadURL() in the same way you describe the same thing happens (ie. Max Retry time reached).

However when overriding react-native's polyfill of XMLHttpRequest as described in this stack overflow thread getDownloadURL() will finish normally and return a valid URL.

We are using react-native v0.33.0, Firebase v3.4.1

Workaround

We have been using this workaround in the meantime; bypassing the Firebase API:

var bucket = firebase.storage().ref().bucket;
var firebaseUrl = "https://firebasestorage.googleapis.com/v0/b/" + bucket + "/o/";
var finalUrl = firebaseUrl + 'path%2Fto%2Fresource';
firebase.auth().currentUser.getToken()
.then((token) => {
  fetch(finalUrl, {headers: {'Authorization' : 'Firebase ' + token}})
  .then((response) => response.json())
  .then((responseJson) => {
    var downloadURL = finalUrl + "?alt=media&token=" + responseJson.downloadTokens})
  })
}); 

This is an issue that seems to affect a small amount of users since I have only seen the problem raised otherwise here. However this appears to be an actual bug and it is very debilitating when it occurs, so any more input would be greatly appreciated.

Solution 3:

TO get All the Images From the storage

firebase.storage().ref().child('filename').list().then(result => {
    // Loop over each item
    result.items.forEach(pics => {
        firebase.storage().ref().child(pics.fullPath).getDownloadURL().then((url) => {
            console.log(url);
            //these url will be used to display images
         })
     });
})