Getting images from firebase storage and rendering them with a map function

Question

I current have a folder in my firebase storage that looks like this: enter image description here

I am trying to map through a cloud firestore collection and rendering a screen with list items that have the corresponding info and the image. My document field include IDs that have 0 and 1 for example so I have an easier method of finding the images that I have on firebase storage folder. This is the code I'm using to render:

renderAccordion() {
    return this.state.accordionarr.map((item,index) => {
      const url = this.returnurl(this.state.displaydatestringversion, item.id);
      return(
        <View key={index}>
          <Accordion
            onChange={this.onChange}
            activeSections={this.state.activeSections}
          >
            <Accordion.Panel header= {item.name}>
              <List>
              <List.Item>
                <Image
                source = {{ uri: url }}
                style = {styles.sizer}
                ></Image>
              </List.Item>
                <List.Item>{item.protein}</List.Item>
                <List.Item>{item.carbohydrate}</List.Item>
              </List>
            </Accordion.Panel>
          </Accordion>
        </View>
      );
    });
  }

In the (item,index) you can assume the fields of item look like this: enter image description here

Also, if you check the second line there is a method call returnurl. That looks like this:

returnurl = async(date, id) => {
    var ref = firebase.storage().ref(date+'/'+id+".jpg");
    const url = await ref.getDownloadURL();
    return url;
  }

I am currently getting an error message of "of type NSMutableDictionary cannot be converted to a valid URL. What is wrong with my code? Or is there a more efficient way of mapping through a field and finding/downloading the image url to render the screen?

Notice that `returnurl` is an **async** function that your are calling synchronously. This will not work as intented. Have you tested your `returnurl` function to make sure it works properly? — Pierre C., May 31 '20 at 07:47
Thank you for the reply! If i don't add returnurl to an async function I get a "Maximum stack reached" error. Is there a way around this? — Jae Lee, May 31 '20 at 10:36

score 1 · Accepted Answer · answered May 31 '20 at 14:20

You can't call an async function in your render methods. If you need async data in rendering, you should start loading that data when the component mounts (or when any input for loading the data is available), and then put the data into the component's state once it's loaded.

See for example:

Getting images from firebase storage and rendering them with a map function

1 Answers1

Linked