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;
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 :)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments