React Native: How to implement infinite scroll with pagination in React Native?

1import { useState, useCallback } from "react";
2import { FlatList, ActivityIndicator, Text } from "react-native";
3
4function PaginatedList() {
5  const [data, setData] = useState([]);
6  const [page, setPage] = useState(1);
7  const [loading, setLoading] = useState(false);
8  const [hasMore, setHasMore] = useState(true);
9
10  const loadMore = useCallback(async () => {
11    if (loading || !hasMore) return;
12
13    setLoading(true);
14    try {
15      const response = await fetch(`/api/items?page=${page}`);
16      const newItems = await response.json();
17
18      if (newItems.length === 0) {
19        setHasMore(false);
20      } else {
21        setData(prev => [...prev, ...newItems]);
22        setPage(prev => prev + 1);
23      }
24    } finally {
25      setLoading(false);
26    }
27  }, [page, loading, hasMore]);
28
29  return (
30    <FlatList
31      data={data}
32      renderItem={renderItem}
33      keyExtractor={(item) => item.id}
34      onEndReached={loadMore}
35      onEndReachedThreshold={0.5}
36      ListFooterComponent={
37        loading ? <ActivityIndicator /> : null
38      }
39      ListEmptyComponent={
40        !loading ? <Text>No items</Text> : null
41      }
42    />
43  );
44}