title: react native foreach Loop is not working perfectly
body: <p>I am working on a react native application. on a screen, I am getting some images from the memory then read their stats(size, name, type). I have an array to store image objects. But I am getting strange behaviour. Here is my sample code.</p>
  <pre><code>const getPhotos =    () =&gt;{
      RNFetchBlob.fs.ls(dirs_read)
      .then((data) =&gt;{
        let i = 0 
        let items = []
        let arrOfImages =  data.filter((elem) =&gt; elem.endsWith('jpeg'))
        arrOfImages.forEach((child) =&gt;{
          
          console.log('iteration', ++i)
          RNFetchBlob.fs.stat(`file://${dirs_read}${child}`).then((stats) =&gt;{
          var dateTime = new Date(stats.lastModified);
          var path =stats.path;
            items.push({
              name: child,
              date: ('0' + dateTime.getUTCDate()).slice(-2) + '-' + ('0' + dateTime.getUTCMonth()).slice(-2) + '-' + dateTime.getUTCFullYear(),
              size: formatBytes(stats.size),
              type:'jpeg',
              path: path
            })
            console.log(items,'Items in Loop')
         }).catch((err) =&gt; {
           console.log('Some Eror in stats read')
         }) 
        console.log(items,' Items out of Loop')
        })      
      }).catch((error) =&gt;{
       
      })
  }
  </code></pre>
  <p>Here I am explaining what I am getting. in the <code>arrofImages</code> i am getting images from memory. I am iterating in this array and for each child, I read their status. to this point everything is fine. I have created and temporary array with name items. in that array in-store image with relevant data with the push method. Here <strong>Problem is that the</strong> <code>arrOfImages</code> <strong>is executing first</strong> and after that the <code>items.push</code> is executing. when I console the <code>items</code> array out of the <code>arrOfImages</code> then this is empty. Here I have an out on the console.
  <a href="https://i.stack.imgur.com/ojlCE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ojlCE.png" alt="" /></a></p>
  <p>I want that when all I get all data then after that I want to show that.
  if I call the <code>setState</code> function immediately after the <code>item.push</code> then I am getting the data but it is loading slowly. means one by one. I want it smoothly.</p>