list.js

// @flow

import React, { Component } from 'react';
import {
  RefreshControl,
  FlatList,
  View,
  ActivityIndicator,
} from 'react-native';

import PhotoCard from './PhotoCard';
import Colors from '../utils/colors';

export default class FeedList extends Component {
  state = {
    loading: false,
    offset: 0,
    error: null,
    refreshing: false,
  };

  _fetchImages = refresh => {
    this.setState(
      {
        loading: true,
      },
      async () => {
        if (refresh) {
          await this.props.fetchFeedImages();
          this.setState({ loading: false, refreshing: false, offset: 0 });
        } else {
          await this.props.loadMore(this.state.offset);
          this.setState({ loading: false, refreshing: false });
        }
      },
    );
  };

  _onRefresh = () => {
    this.setState(
      {
        refreshing: true,
      },
      () => {
        this._fetchImages(true);
      },
    );
  };

  _renderFooter = () => {
    console.log('loading', this.props.loading);
    if (!this.state.loading) return null;
    return (
      <View style={{ paddingVertical: 20 }}>
        <ActivityIndicator animating color={Colors.primary} size="large" />
      </View>
    );
  };

  _handleFetchMore = () => {
    if (!this.props.hasMore) return null;
    this.setState(
      {
        offset: this.state.offset + 5,
      },
      () => {
        this._fetchImages();
      },
    );
  };

  render() {
    console.log('PROPS', this.props);
    return (
      <FlatList
        contentContainerStyle={{
          paddingTop: 10,
        }}
        data={this.props.result}
        renderItem={({ item }) => (
          <PhotoCard
            {...this.props.entities.photos[item]}
            selectPhotoForDetails={this.props.selectPhotoForDetails}
            likedPhoto={this.props.likedPhoto}
            dislikedPhoto={this.props.dislikedPhoto}
            deletedPhoto={this.props.deletedPhoto}
          />
        )}
        keyExtractor={item => item}
        ListFooterComponent={this._renderFooter}
        onEndReached={this._handleFetchMore}
        onEndThreshold={0}
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
            title="Pull to refresh"
            tintColor={Colors.primary}
            titleColor={Colors.primary}
          />
        }
      />
    );
  }
}