How to display all images from firebase storage on React Native app?

Question

I can upload pictures to FB storage. But now I'm trying to display them all on React Native app live.

For some reason, I can't make it work. There are not lots of videos on youtube or recent tutorials on how to do this. I'm trying to make it work by looking it up on Stackoverflow from people who had some similar problems, but no luck so far.

Here's my app code

import { StyleSheet, View } from 'react-native';
import Uploadscreen from './src/UploadSreen';
import ListPictures from './src/ListPictures';

export default function App() {
  return (
    <View style={styles.container}>
        <Uploadscreen/>
        <ListPictures/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

The UploadScreen component works totally fine (this is the one uploading to FB)

And here's my separate component for looping all the images in firebase storage(Which I need help with).

import { firebase } from '../config'
import { View, Image } from 'react-native';
import React, { useState } from 'react';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

const ListPictures = () => {

    const [sampleImage, setSampleImage] = useState(); 

    const getSampleImage = async () => {
        const imageRefs = await firebase.storage().ref().child('Front/').listAll();
        const urls = await Promise.all(imageRefs.items.map((ref) => ref.getDownloadURL()));
        setSampleImage(urls);
    }


    { sampleImage && getSampleImage().map(url => (
        <View style={{ justifyContent: 'center' }} key={imageRef.id}>
            <Image source={{ uri: url }} style={{ width: 350, height: 350 }} /> 
        </View>
    ))}
 }

export default ListPictures;

Any help would be much appreciated!

Please edit the question to include what you've done to debug this. We can't see the contents of your storage bucket or the values of any variables you're using here, so we can't really see what's wrong. Minimally, add some debug logging and share the output of that log so we can observe and reproduce. — Doug Stevenson
– Doug Stevenson, Commented Aug 24, 2022 at 0:38

Parth Godhani · Accepted Answer · 2022-08-24 12:35:19Z

Try this

import { firebase } from '../config'
import { View, Image } from 'react-native';
import React, { useState, useEffect } from 'react';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

const ListPictures = () => {

const [sampleImage, setSampleImage] = useState([]); 

const getSampleImage = async () => {
    const imageRefs = await firebase.storage().ref().child('Front/').listAll();
    const urls = await Promise.all(imageRefs.items.map((ref) => ref.getDownloadURL()));
    setSampleImage(urls);
}
useEffect(()=>{
getSampleImage()
},[])

{ sampleImage.length!=0 && sampleImage.map(url => (
    <View style={{ justifyContent: 'center' }} key={imageRef.id}>
        <Image source={{ uri: url }} style={{ width: 350, height: 350 }} /> 
    </View>
))}
 }

export default ListPictures;

Frank van Puffelen · Accepted Answer · 2022-08-24 05:46:39Z

1

You shouldn't call asynchronous code while building the UI output as you do here:

{ sampleImage && getSampleImage().map(url => (

What you have will be called on every render, which is likely not what you want.

Instead, put such a call in a useEffect hook with an empty dependencies array:

useEffect(() => {
  getSampleImage();
}, []);

This way the call to getSampleImage() runs when the component gets created, rather than on each render.

answered Aug 24, 2022 at 5:46

Frank van Puffelen

603k85 gold badges895 silver badges868 bronze badges

Collectives™ on Stack Overflow

How to display all images from firebase storage on React Native app?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related