title: download image in asynchronous map function react native
body: <p>I am trying execute an asynchronous map over a list of image metadata objects. </p>
  
  <p>For each object in the list, I check whether the string <code>device_path</code> exists on the device. If it does not, I download the image to the device using RNFetchBlob &amp; the object's parameter <code>download_url</code>. After this I update the object's <code>device_path</code> to the newly downloaded image.</p>
  
  <p>When executing the code below, my function <code>checkPaths</code> returns <code>{"_40":0,"_65":0,"_55":null,"_72":null}</code>. I would like the function to return this:</p>
  
  <pre><code>[
    { device_path: 'goodimagepath1', download_url: 'mysecretdownloadurl1' },
    { device_path: 'goodimagepath2', download_url: 'mysecretdownloadurl2' }
  ];
  </code></pre>
  
  <p>How should I modify my function to work as intended?</p>
  
  <pre><code>import React, { Component } from "react";
  import { View, Text } from "react-native";
  import RNFetchBlob from "rn-fetch-blob";
  
  async function checkPaths(image_metadata_list) {
  
    const promises = image_metadata_list.map(async (image_metadata, idx) =&gt; {
  
      RNFetchBlob.fs.exists(image_metadata.device_path).then(exists =&gt; {
        if (exists === false) {
          console.log("image does not exist on device, downloading...");
          const dirs = RNFetchBlob.fs.dirs;
          const filename = (idx + 1).toString() + '.jpg'
          RNFetchBlob.config({
            path: dirs.DocumentDir + `/user_images/${filename}`
          }).fetch('GET', `${image_metadata.download_url}`).progress((received = 0, total = 0) =&gt; {
            //Handle progress of download here.. May be update UI...\
          }).then((resp) =&gt; {
            // update the device path
            image_metadata.device_path = resp.path();
            console.log("image path modified", image_metadata);
            return image_metadata;
          }).catch(e =&gt; {
            console.log("error downloading image", e);
          })
        }
        else {
          console.log("image path OK", image_metadata)
          return image_metadata;
        }
      })
    })
    console.log("promises", promises)
    results = await Promise.all(promises)
    return results;
  }
  
  
  export default class App extends Component {
    constructor(props) {
      super(props);
      this.image_references = [
         { device_path: 'badimagepath1', download_url:'mysecretdownloadurl1' },
         { device_path: 'badimagepath2', download_url: 'mysecretdownloadurl2' }
      ];
    }
    componentDidMount() {
      console.log("component mounted");
      console.log("checking image paths", JSON.stringify(this.image_references));
      checked_paths = checkPaths(this.image_references);
      console.log("checked image paths", JSON.stringify(checked_paths));
    }
    render() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;Text&gt;Welcome to MWE&lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>