react-native-flatlist-paginator

usePagination React Native Hook For paginating FlatLists.

Installation

1npm install react-native-flatlist-paginator

1yarn add react-native-flatlist-paginator

example

1import React from 'react';
2import {View, Text, StyleSheet, FlatList} from 'react-native';
3import usePagination from "flatpaginator";
4
5
6const fetchApi = (page = 0, pageSize = 10) => {
7    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]
8    return new Promise(resolve => {
9        setTimeout(() => resolve(data.slice(page * pageSize, (page + 1) * pageSize) || []), 1000);
10    });
11}
12
13
14const App : React.FC<any> = () => {
15    
16    const {
17        data,         //use it in Flatlist data
18        addData,      //push new group of data
19        onEndReached, //callback in Flatlist onEndReached
20        pageIndex,    //current pageIndex use it to query data
21        ListFooterComponent, //use it in Flatlist ListFooterComponent
22    } = usePagination(10, 1); //pageSize = 10 // Starting Page (OPTIONAL)
23    
24    
25    React.useEffect(() => {
26        fetchApi(pageIndex).then((data: any) => {
27            addData(data);
28        })
29    }, [pageIndex]);
30    
31    
32    return (
33        <FlatList
34            onEndReachedThreshold={.5}
35            onEndReached={onEndReached}
36            contentContainerStyle={{flexGrow: 1}}
37            data={data}
38            renderItem={({item} : any) => <View style={styles.item}><Text>item: {item}</Text></View>}
39            ListFooterComponent={ListFooterComponent}
40            keyExtractor={item => item.toString()}/>
41    );
42};
43
44
45const styles = StyleSheet.create({
46    item: {
47        height: 100,
48        backgroundColor : '#e3e3e3',
49        marginVertical : 6,
50        justifyContent : 'center',
51        alignItems : 'center',
52        margin : 12,
53        borderRadius : 5,
54    }
55});
56
57export default App;
58

usePagination full Usage

1import usePagination from "flatpaginator";
2
3const {
4    data,         //use it in Flatlist data
5    addData,      //push new group of data
6    onEndReached, //callback in Flatlist onEndReached
7    loadingMore,  //if true show loading more Indicator
8    pageIndex,    //current pageIndex use it to query data
9    startAtPage,  // Set Starting Page
10    hasMoreData,   //if false show hasMoreData message
11    resetData,    //use it to reset data when Flatlist refreshing
12    ListFooterComponent, //use it in Flatlist ListFooterComponent
13} = usePagination(10); //pageSize = 10
14

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