InfiniteFlatList

Installation

npm install --save @foundcareers/react-native-infinite-flatlist

Usage

import InfiniteFlatList from 'react-native-infinite-flatlist';


class Items extends React.Component {

    componentDidMount() {
      this._fetchFirstPage();
    }

    ...

    render() {
        ...
        return (
            <InfiniteFlatList
              data={items}
              renderItem={this._renderItem}
              loading={loading}
              refreshing={refreshing}
              onRefresh={this._refreshPage}
              onEndReached={this._fetchNextPage}
              emptyText="No Items"
            />
        );
    }
}

Props

| Name | Type | Default | Description | |---|---|---|---| |data|Array|[ ]|An array of data to display.| |renderItem|Function|noop|A function that takes an item from data and renders it into the list.| |loading|Boolean|false|Set this true while waiting for new data from a page request.| |refreshing|Boolean|false|Set this true while waiting for new data from a refresh.| |onRefresh|Function|noop|A function that is called on Pull to Refresh.| |onEndReached|Function|noop|A function that is called when the end of the list is reached.| |onEndReachedThreshold|Number|0.75|How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback.| |emptyText|String|No data|When there is no data this is displayed.| |keyExtractor|Function|(obj) => obj.id|Used to extract a unique key for a given item at the specified index.| |removeClippedSubviews|Boolean|false|This may improve scroll performance for large lists.|

Caveats

The initial data size must be large enough to reach the bottom of the screen, otherwise scroll events won't trigger.