📦 react-native-pagination-api

A simple utility package for React Native that helps you Pagination with api integration fetch large amount of data handle using flatlist essaliy.

✨ Features

• ✅ Lightweight
• 🛠️ Written in TypeScript
• 🔌 Supports React Native projects

📦 Installation

npm install react-native-pagination-api
# or with yarn
yarn add react-native-pagination-api

Usage:-

    import React from 'react';
    import { View, FlatList, Text, ActivityIndicator } from 'react-native';
    import {UsePagination} from 'react-native-pagination-api'
   
    const fetchItems = async (page: number) => {
    
    // Replace this with your actual API call
    
    const response = await fetch(`https://example.com/api/items?page=${page}`);
    const json = await response.json();
    return json.items;
    };

   const MyList = () => {
        const {
        data,
        loadData,
        refresh,
        isLoading,
        hasMore,
    } = usePagination({ fetchData: fetchItems });

  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      onEndReached={loadData}
      onEndReachedThreshold={0.5}
      onRefresh={refresh}
      refreshing={isLoading}
      ListFooterComponent={
        isLoading && hasMore ? <ActivityIndicator size="small" /> : null
      }
    />
  );
};

export default MyList;

🔁Benefits:

• Clean separation of concerns

• Easy to reuse across multiple components

• Fully customizable fetchData logic