title: How to render a loader until data is fetched in React Native
body: <p>I am fetching data through an async request. I know that I need to wait for the api request to complete before displaying the data. Unfortunately, I'm not sure how to create a loader to wait for the data to load.I am new to react, so if I could also get help with implementing it as well, that would be fantastic! Here is my current code: </p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react- native';
  import Header from '../Components/Header';
  import Api from '../Utility/Api';
  
  
  export default class CalendarPage extends Component {
  
  constructor(props) {
  super(props);
  }
  
  async componentWillMount() { this.setState(
      {data: await Api.getDates()},
  
      )
  }
  
    render() {
      return (
        &lt;View style={{flex: 1}}&gt;
          &lt;Header pageName="Calendar" navigator={this.props.navigator}/&gt;
          &lt;View style = {{flex:9}}&gt;
              &lt;View&gt;
                { this.state.data.days[0].items.map((item) =&gt; (
                  &lt;View&gt;
                    &lt;Text&gt;{item.summary}&lt;/Text&gt;
                    &lt;Text&gt;{item.start.dateTime}&lt;/Text&gt;
                    &lt;Text&gt;{item.description}&lt;/Text&gt;
                  &lt;/View&gt;
                ))}
              &lt;/View&gt;
           &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  </code></pre>
  
  <p>}</p>