React Native Lazyload Flatlist

Personal usage only. No further support.

Lazy loading FlatList for React Native.

Installation

npm install -S @gluons/react-native-lazyload-flatlist

or

yarn add @gluons/react-native-lazyload-flatlist

Usage

import { useState } from 'react';
import LazyLoadFlatList from '@gluons/react-native-lazyload-flatlist';

const MainList = () => {
    const [data, setData] = useState([/* data... */]);
    const [lastLoadedData, setLastLoadedData] = useState([]);

    return (
        <LazyLoadFlatList
            data={data}
            itemLimit={20}
            onLoadMore={moreData => {
                setLastLoadedData(moreData);

                return moreData;
            }}
        />
    )
};

API

LazyLoadFlatList

Property	Type	Default	Description
itemLimit	number	10	Number of item limit per lazy load.
onLoadMore	(moreData: ItemT[]) => (ItemT[] \| void) \| Promise<void \| ItemT[]>)	() => {}	Function that receive new data items and return mutated data items.

And rest props of FlatList.