How do I display all of the images from my Firebase Storage in React Native without needing image names?

user_15101800 0
Viewed 472

Hello i am trying to figure out how to display all of the images in a folder i have in Firebase Storage called "VerifiedPhotos". I don't want to reference them by image name like I did below because I have multiple images. How do I grab all the list of image URLS and display them to my screen in React Native? Please help I have spent all week looking up how to use listAll() and I also am not sure how to display the multiple images in the return statement. Please help.

  const Photos = () => {
  const [imageUrl, setImageUrl] = useState(undefined);

  useEffect(() => {
      firebase.storage()
        .ref('VerifiedPhotos/' + '3.png') //name in storage in firebase console
        .getDownloadURL()
        .then((url) => {
          setImageUrl(url);
        })
        .catch((e) => console.log('Errors while downloading => ', e));
    }, []);
  
  return (
      <Image style={{height: 200, width: 200}} source={{uri: imageUrl}} />
  );
}

export default Photos;
firebase-storage firebase react-native javascript
1 Answers

As the documentation said about .listAll() here, you need to iterate through results :

const Photos = () => {
  const [imageTab, setImageTab] = useState([]);

  useEffect(() => {
    firebase.storage()
      .ref('VerifiedPhotos/')
      .listAll()
      .then(function(result) {
          result.items.forEach(function(imageRef) {
              imageRef.getDownloadURL().then(function(url) {
                  imageTab.push(url);
                  setImageTab(imageTab);
              }).catch(function(error) {
                  // Handle any errors
              });
          });
      })
      .catch((e) => console.log('Errors while downloading => ', e));
  }, []);

  return (<View>
    {imageTab.map(i => (<Image style={{height: 200, width: 200}} source={{uri: i}} />))}
  </View>);
}

export default Photos;

Let me know if it worked :)

user_68174630
Related