react-native-enacton-paginated-list 1.0.0

package/LICENSE

@@ -0,0 +1,5 @@
+MIT License
+
+Copyright (c) 2026 Enacton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy...

package/README.md

@@ -0,0 +1,22 @@
+# react-native-paginated-list
+
+Reusable paginated FlatList and pagination hook for React Native.
+
+## Install
+
+npm install react-native-paginated-list
+
+## Usage
+
+```tsx
+const { data, pagination, isLoading, loadNextPage } =
+  usePaginatedList(fetchUsers);
+
+<PaginatedFlatList
+  data={data}
+  pagination={pagination}
+  isLoading={isLoading}
+  onLoadMore={loadNextPage}
+  renderItem={renderItem}
+/>;
+```

package/dist/PaginatedFlatList.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { FlatListProps } from "react-native";
+import { PaginationState } from "./types";
+export interface PaginatedFlatListProps<T> extends Omit<FlatListProps<T>, "onEndReached"> {
+    pagination: PaginationState;
+    isLoading: boolean;
+    onLoadMore: () => void;
+    LoaderComponent?: React.ReactNode;
+    FooterComponent?: React.ReactNode;
+    enableAutoFetch?: boolean;
+}
+export declare function PaginatedFlatList<T>({ data, pagination, isLoading, onLoadMore, LoaderComponent, FooterComponent, enableAutoFetch, ...props }: PaginatedFlatListProps<T>): React.JSX.Element;

package/dist/PaginatedFlatList.js

@@ -0,0 +1,33 @@
+import React, { useCallback, useMemo } from "react";
+import { FlatList, ActivityIndicator, View } from "react-native";
+export function PaginatedFlatList({ data, pagination, isLoading, onLoadMore, LoaderComponent, FooterComponent, enableAutoFetch = true, ...props }) {
+    const safeData = data !== null && data !== void 0 ? data : [];
+    const hasMore = useMemo(() => {
+        if (pagination.totalPages !== undefined) {
+            return pagination.page <= pagination.totalPages;
+        }
+        if (pagination.totalCount !== undefined) {
+            return safeData.length < pagination.totalCount;
+        }
+        return true;
+    }, [pagination, safeData.length]);
+    const handleEndReached = useCallback(() => {
+        if (!enableAutoFetch || isLoading || !hasMore)
+            return;
+        onLoadMore();
+    }, [enableAutoFetch, isLoading, hasMore, onLoadMore]);
+    const renderFooter = () => {
+        if (!hasMore)
+            return null;
+        if (isLoading) {
+            return (LoaderComponent !== null && LoaderComponent !== void 0 ? LoaderComponent : (<View style={{ paddingVertical: 16 }}>
+            <ActivityIndicator />
+          </View>));
+        }
+        return FooterComponent !== null && FooterComponent !== void 0 ? FooterComponent : null;
+    };
+    return (<FlatList {...props} data={safeData} onEndReached={handleEndReached} onEndReachedThreshold={0.2} ListFooterComponent={renderFooter} contentContainerStyle={[
+            { paddingBottom: 24 },
+            props.contentContainerStyle,
+        ]}/>);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./PaginatedFlatList";
+export * from "./usePaginatedList";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./PaginatedFlatList";
+export * from "./usePaginatedList";
+export * from "./types";

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+export interface PaginationState {
+    page: number;
+    pageSize: number;
+    totalPages?: number;
+    totalCount?: number;
+}
+export interface PaginatedResponse<T> {
+    data: T[];
+    totalPages?: number;
+    totalCount?: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/usePaginatedList.d.ts

@@ -0,0 +1,17 @@
+import { PaginatedResponse, PaginationState } from "./types";
+interface Options {
+    pageSize?: number;
+    initialPage?: number;
+    autoLoadFirstPage?: boolean;
+}
+export declare function usePaginatedList<T>(fetchPage: (page: number, pageSize: number) => Promise<PaginatedResponse<T>>, options?: Options): {
+    data: T[];
+    pagination: PaginationState;
+    isLoading: boolean;
+    error: unknown;
+    hasMore: boolean;
+    loadNextPage: () => Promise<void>;
+    refresh: () => Promise<void>;
+    reset: () => void;
+};
+export {};

package/dist/usePaginatedList.js

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function usePaginatedList(fetchPage, options = {}) {
+    const { pageSize = 10, initialPage = 1, autoLoadFirstPage = true } = options;
+    const [data, setData] = useState([]);
+    const [pagination, setPagination] = useState({
+        page: initialPage,
+        pageSize,
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchingRef = useRef(false);
+    const hasMore = pagination.totalPages !== undefined
+        ? pagination.page <= pagination.totalPages
+        : pagination.totalCount !== undefined
+            ? data.length < pagination.totalCount
+            : true;
+    const loadNextPage = useCallback(async () => {
+        if (fetchingRef.current || !hasMore)
+            return;
+        fetchingRef.current = true;
+        setIsLoading(true);
+        try {
+            const res = await fetchPage(pagination.page, pageSize);
+            setData((prev) => [...prev, ...res.data]);
+            setPagination((prev) => ({
+                ...prev,
+                page: prev.page + 1,
+                totalPages: res.totalPages,
+                totalCount: res.totalCount,
+            }));
+        }
+        catch (e) {
+            setError(e);
+        }
+        finally {
+            fetchingRef.current = false;
+            setIsLoading(false);
+        }
+    }, [fetchPage, pagination.page, pageSize, hasMore]);
+    const reset = useCallback(() => {
+        setData([]);
+        setPagination({ page: initialPage, pageSize });
+        setError(null);
+    }, [initialPage, pageSize]);
+    const refresh = useCallback(async () => {
+        reset();
+        await loadNextPage();
+    }, [reset, loadNextPage]);
+    useEffect(() => {
+        if (autoLoadFirstPage) {
+            loadNextPage();
+        }
+    }, []);
+    return {
+        data,
+        pagination,
+        isLoading,
+        error,
+        hasMore,
+        loadNextPage,
+        refresh,
+        reset,
+    };
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-native-enacton-paginated-list",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Reusable paginated FlatList + pagination hook for React Native",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/manoj-enacton/react-native-paginated-list"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-native": ">=0.68"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "react-native": "^0.83.1",
+    "typescript": "^5.9.3"
+  }
+}