FlatListRender.js

render() {
    if (this.state.loading && this.page === 1) {
      return <View style={{
        width: '100%',
        height: '100%'
      }}><ActivityIndicator style={{ color: '#000' }} /></View>;
    }
    return (
      <View style={{ width: '100%', height: '100%' }}>
        <FlatList
          data={this.state.data}
          extraData={this.state}
          refreshControl={
            <RefreshControl
              refreshing={this.state.isRefreshing}
              onRefresh={this.onRefresh.bind(this)}
            />
          }
          renderItem={({ item }) => (
            <View style={{
              flexDirection: 'row',
              padding: 15,
              alignItems: 'center'
            }}>
            <Image source={{ uri: item.profile_image }} 
                style={{
                height: 50,
                width: 50,
                marginRight: 10
              }} />
              <Text style={{
                fontSize: 18,
                alignItems: 'center',
                color: '#65A7C5',
              }}>{item.display_name}</Text>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
          ItemSeparatorComponent={this.renderSeparator}
          ListFooterComponent={this.renderFooter.bind(this)}
          onEndReachedThreshold={0.4}
          onEndReached={this.handleLoadMore.bind(this)}
        />
      </View>
    );
  }