title: List Item Data is populated but the data does not display on flat list
body: <p>In this FlatList, the list items Display but they are blank.
  I have set break points and the data is there, but it only displays blank list items.
  I think the issue may arise when I am setting the array empty, then it does not re-render properly when the fetch is complete.</p>
  <p><strong>Crypto Component</strong></p>
  <pre><code>import {StyleSheet, FlatList} from 'react-native';
  import {getCrypto} from '../api_service/crypto';
  import CryptoItem from '../data/cryptoItem';
  
  export default class CryptoMarket extends Component {
    constructor(props) {
      super(props);
      this.state = {cryptos: [], refreshing: true};
      this.fetchCrypto = this.fetchCrypto.bind(this);
    }
  
    componentDidMount() {
      this.fetchCrypto();
    }
  
    fetchCrypto() {
      getCrypto()
        .then(cryptos =&gt; this.setState({cryptos, refreshing: false}))
        .catch(() =&gt; this.setState({refreshing: false}));
    }
    handleRefresh() {
      this.setState(
        {
          refreshing: true,
        },
        () =&gt; this.fetchCrypto(),
      );
    }
    render() {
      return (
        &lt;FlatList
          data={this.state.cryptos}
          renderItem={({item}) =&gt; &lt;CryptoItem crypto={{item}} /&gt;}
          keyExtractor={item =&gt; item.name}
          refreshing={this.state.refreshing}
          onRefresh={this.handleRefresh.bind(this)}
        /&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#0f0f0f',
    },
    contentContainer: {
      marginTop: 50,
      alignItems: 'center',
      paddingHorizontal: 20,
    },
    title: {
      fontSize: 20,
      color: '#fff',
    },
  });
  </code></pre>
  <p><strong>Fetch API</strong></p>
  <pre><code>export async function getCrypto() {
    try {
      const fetchCrypto = await fetch(
        'https://api.nomics.com/v1/currencies/ticker?key=***&amp;ids=BTC,ETH,XRP',
      );
      const displayCrypto = await fetchCrypto.json();
      console.log(displayCrypto);
      return displayCrypto;
    } catch (error) {
      throw error;
    }
  }
  </code></pre>
  <p><strong>List Item</strong></p>
  <pre><code>import React, {Component} from 'react';
  import {ListItem} from 'react-native-elements';
  
  export default class CryptoItem extends Component {
    render() {
      const {name, logo_url, price} = this.props.crypto;
  
      return (
        &lt;ListItem
          title={name}
          text={'Price : ' + price}
          leftAvatar={{source: {uri: logo_url}}}
          bottomDivider={true}
        /&gt;
      );
    }
  }
  </code></pre>