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.