Extract Url From Function For Image Resource

The following function extracts images stored on a firebase storage and logs their URL to the console. I have tried multiple ways to pass the URL extracted to the Image for display

Solution 1:

Since the URLs are being determined through asynchronous operations, you can't return them to the render method. Instead you'll need to store them in the state, and render them from there:

functionlistFilesAndDirectories(reference, pageToken) {
  reference.list({pageToken}).then(result => {
    result.items.forEach(ref => {
      ref.getDownloadURL().then(url => {
        setState({ url: url });
      });
    });

    if (result.nextPageToken) {
      listFilesAndDirectories(reference, result.nextPageToken);
    }
  });
}

const storageReference = firebase
  .storage()
  .refFromURL('gs://app404.appspot.com/images');

listFilesAndDirectories(storageReference);

And then:

<View><Text>
      Welcome to my Gallery! Come back for more content.
    </Text><Imagesource={{uri: {url} 
      }}
      style={styles.fetchedImage}
    /></View>

If you want to wait for the multiple images, have a look here: How to list all the names and download Urls from Firebase using React JS? or Firebase storage: download images to and put to img src in React map