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

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!

CodePudding user response：

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;

CodePudding user response：

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.