CODEWITHSUNDEEP
react-nativepromiseexpo
polyrhythmm
polyrhythmm

Reputation: 71

Async await with map function, promise.all not working

I'm building an app using expo and react-native.

I'm trying to load photos from firebase using async await and the map function with Promise.all but all I get back is an array of unresolved promises.

renderImages = async () => {
  const images = [];

  if (this.state.images.length > 0) {
    images = this.state.images.map(async (item, index) => {
      const ref = firebase.storage().ref(item);

      var image = await ref.getDownloadURL();

      return (
        <View>
          <Image source={{ uri: image }} />
        </View>
      );
    });

    const imageArray = await Promise.all(images);

    return imageArray || [];
  }

  return (
    <View>
      <Text>STATE.IMAGES.LENGTH is 0</Text>
    </View>
  );
};

all I get back is

Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}

Upvotes: 5

Views: 887

Answers (1)

polyrhythmm
polyrhythmm

Reputation: 71

Ok, so I didn't know that async/await always returned a promise.

I handled the problem by adding this

onRenderImages() {
  this.renderImages().then(data => {
     this.setState({ 
         displayImages: data
     })
  })
}

Upvotes: 2

Related Questions