title: React Native List Footer Component does not work
body: <p>I'm working on React native. I'm using FlatList. I want to show the loading bar as I go down. I wrote the code for that.</p>
  
  <p>I've reviewed the documentation, but it's not working. I guess I'm making a mistake at the await. I don't know how to use it. What is the difference of async? I'm leaving the code sample below. </p>
  
  <p>Thanks in advance for your help.</p>
  
  <pre><code>handleRefresh = () =&gt; {
      this.setState({
        offset: 0,
        maxSize: 10,
        isSearch: false,
        isLoading: true,
        isRefreshing: true
      }, () =&gt; {
          this.loadData();
      });
  };
  
  handleLoadMore = () =&gt; {
      this.setState({            
          maxSize: this.state.maxSize + 5,
          isSpinner: true
      }, () =&gt; {
          this.loadData();
      });
  };
  
  keyExtractor = (item, index) =&gt; index.toString();
  
  renderFooter = () =&gt; {
      if(this.state.isSpinner === false) { return null; }
  
      return (
          &lt;View style={{ paddingVertical: 20 }}&gt;
              &lt;ActivityIndicator animating size="small" /&gt;
          &lt;/View&gt;
      );
  };
  
  loadData = async () =&gt; {
      try {
          const { offset, maxSize } = this.state;            
  
          const username = await AsyncStorage.getItem('username');
          const token = await AsyncStorage.getItem('token');
  
          var credentials = Base64.btoa(username + ':' + token);
          var URL         = `http://demo.espocrm.com/advanced/api/v1/Lead?sortBy=createdAt&amp;asc&amp;offset=${offset}&amp;maxSize=${maxSize}`;            
  
          axios.get(URL, {headers : { 'Espo-Authorization' : credentials }})
          .then(this.dataSuccess.bind(this))
          .catch(this.dataFail.bind(this));
      } catch (error) {
          Alert.alert(
              'Hata',
              'Bir hata meydana geldi. Lütfen yöneticiye başvurunuz.',
              [
                  { text: 'Tamam', onPress: () =&gt; null }
              ]
          );
      }
  };
  
  dataSuccess(response) {        
      this.setState({ isRefreshing: false, isSpinner: false, isLoading: false, leadList: response.data.list });
  }
  
  dataFail(error) {
      this.setState({ isLoading: false });
  
      Alert.alert(
          'Hata',
          'Beklenmedik bir hata oluştu',
          [
              { text: 'Tamam', onPress: () =&gt; null }
          ]
      );
  }
  
  render() {
      const { isLoading, isRefreshing, searchText, leadList } = this.state;        
      return(
          &lt;View style={styles.container}&gt;
              &lt;SearchBar 
                  placeholder="Bir lead arayın..."
                  onChangeText={this.searchLead.bind(this)}
                  onClear={this.handleRefresh}
                  onCancel={this.loadData}
                  value={searchText}
              /&gt;
              {
                  isLoading ? &lt;ActivityIndicator style={styles.loading} size="large" color="orange" /&gt; :
                          &lt;FlatList
                              data={leadList}
                              ListFooterComponent={this.renderFooter}
                              renderItem={({item}) =&gt;
                                  &lt;ListItem
                                      leftAvatar={{ source: { uri: 'https://pbs.twimg.com/profile_images/567081964402790401/p7WTZ0Ef_400x400.png' } }}
                                      title={item.name}
                                      subtitle={item.status}
                                      bottomDivider={true}
                                  /&gt;
                              }
                              keyExtractor={this.keyExtractor}
                              refreshing={isRefreshing}
                              onRefresh={this.handleRefresh}
                              onEndReached={this.handleLoadMore}
                              onEndReachedThreshold={0.5}
                          /&gt;
              }
          &lt;/View&gt;
      )
  }
  }
  </code></pre>