FlatList-4.js

import React from "react";
import {
  Text,
  View,
  FlatList,
  Dimensions
} from "react-native";

const numItems = 10;
const { height, width } = Dimensions.get("window");

class ListsScreen extends React.Component {
  state = {
    data: Array.from(Array(numItems).keys()),
    isRefreshing: false,
    page: 0
  };

  refreshData = () => {
    this.setState({ isRefreshing: true });
    const data = this.state.data.map(x => x * 2);
    this.setState({ data, isRefreshing: false });
  };

  moreData = () => {
    const { page } = this.state;
    const data = Array.from(Array(numItems).keys()).map(
      x => x + numItems * (page + 1)
    );
    this.setState(prevState => ({
      data: [...prevState.data, ...data],
      page: prevState.page + 1
    }));
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <View
              style={{
                height: width / 2,
                width: width,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: item % 2 === 0 ? "lightpink" : "lightblue"
              }}
            >
              <Text>{`Item ${item}`}</Text>
            </View>
          )}
          keyExtractor={(item, index) => `key-${index}`}
          onRefresh={this.refreshData}
          refreshing={this.state.isRefreshing}
          onEndReached={({ distanceFromEnd }) => {
            this.moreData();
          }}
          onEndReachedThreshold={0}
        />
      </View>
    );
  }
}