Package Exports

react-native-flatlist-paginator
react-native-flatlist-paginator/lib/commonjs/index.js
react-native-flatlist-paginator/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-flatlist-paginator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-flatlist-paginator

usePagination React Native Hook For paginating FlatLists.

Installation

npm install react-native-flatlist-paginator

yarn add react-native-flatlist-paginator

example

import React from 'react';
import {View, Text, StyleSheet, FlatList} from 'react-native';
import usePagination from "flatpaginator";


const fetchApi = (page = 0, pageSize = 10) => {
    const data = [1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15,16,17,18,19,20, 21,22,23,24,25]
    return new Promise(resolve => {
        setTimeout(() => resolve(data.slice(page * pageSize, (page + 1) * pageSize) || []), 1000);
    });
}


const App : React.FC<any> = () => {
    
    const {
        data,         //use it in Flatlist data
        addData,      //push new group of data
        onEndReached, //callback in Flatlist onEndReached
        pageIndex,    //current pageIndex use it to query data
        ListFooterComponent, //use it in Flatlist ListFooterComponent
    } = usePagination(10, 1); //pageSize = 10 // Starting Page (OPTIONAL)
    
    
    React.useEffect(() => {
        fetchApi(pageIndex).then((data: any) => {
            addData(data);
        })
    }, [pageIndex]);
    
    
    return (
        <FlatList
            onEndReachedThreshold={.5}
            onEndReached={onEndReached}
            contentContainerStyle={{flexGrow: 1}}
            data={data}
            renderItem={({item} : any) => <View style={styles.item}><Text>item: {item}</Text></View>}
            ListFooterComponent={ListFooterComponent}
            keyExtractor={item => item.toString()}/>
    );
};


const styles = StyleSheet.create({
    item: {
        height: 100,
        backgroundColor : '#e3e3e3',
        marginVertical : 6,
        justifyContent : 'center',
        alignItems : 'center',
        margin : 12,
        borderRadius : 5,
    }
});

export default App;

usePagination full Usage

import usePagination from "flatpaginator";

const {
    data,         //use it in Flatlist data
    addData,      //push new group of data
    onEndReached, //callback in Flatlist onEndReached
    loadingMore,  //if true show loading more Indicator
    pageIndex,    //current pageIndex use it to query data
    startAtPage,  // Set Starting Page
    hasMoreData,   //if false show hasMoreData message
    resetData,    //use it to reset data when Flatlist refreshing
    ListFooterComponent, //use it in Flatlist ListFooterComponent
} = usePagination(10); //pageSize = 10

how hasMoreData calculated

if pageSize = 10

if last page data length = 10 hasMoreData = true
if last page data length < 10 hasMoreData = false
if last page data length = 0 hasMoreData = false

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT