title: Get data asynchronously from firebase and set state after the data is reached
body: <p>I'm using react-native and I want to get data from the firebase realtime database and set state of that data and then only then load the view, I don't want the user to see the data getting pushed and mapped on every load of the chat view.</p>
  
  <p>Here is what I've tried </p>
  
  <pre><code>_getMessages = async () =&gt; {
  
      let message_array = [];
  
      await firebase.database().ref('User-Message').child(this.state.fromUser).child(this.state.toUser).on('child_added', async (snapshot) =&gt; {
  
        let message_id = await snapshot.key;
  
        let message_ref = await firebase.database().ref('Message').child(message_id).once('value', async (payload) =&gt; {
  
          await message_array.push(payload.val())
  
        })
  
        await this.setState({ messages : message_array })
  
      })
  
  }
  </code></pre>
  
  <p>And in my <code>componentWillMount</code> is simply call the <code>_getMessages()</code> function like this</p>
  
  <pre><code>componentWillMount = async () =&gt; {
  
      await this._getMessages();
  
  }
  </code></pre>
  
  <p>How can I make sure to set the state of messages after getting all the messages from the firebase?</p>