React Native: How to implement infinite scrolling in FlatList?

1import { useState, useCallback } from "react";
2import { FlatList, ActivityIndicator } from "react-native";
3
4function InfiniteList() {
5  const [data, setData] = useState(initialData);
6  const [loading, setLoading] = useState(false);
7  const [hasMore, setHasMore] = useState(true);
8
9  const loadMore = useCallback(async () => {
10    if (loading || !hasMore) return;
11    setLoading(true);
12    const moreData = await fetchMoreData(data.length);
13    setData(prev => [...prev, ...moreData]);
14    setHasMore(moreData.length > 0);
15    setLoading(false);
16  }, [data, loading, hasMore]);
17
18  return (
19    <FlatList
20      data={data}
21      renderItem={renderItem}
22      keyExtractor={(item) => item.id}
23      onEndReached={loadMore}
24      onEndReachedThreshold={0.5}
25      ListFooterComponent={
26        loading ? <ActivityIndicator /> : null
27      }
28    />
29  );
30}