Pull to refresh и пагинация

function Posts() {
    const { data, isLoading, refetch, isRefetching } = useQuery({
        queryKey: ['posts'],
        queryFn: fetchPosts,
    });

    if (isLoading) return <ActivityIndicator />;

    return (
        <FlatList
            data={data}
            renderItem={({ item }) => <PostCard post={item} />}
            keyExtractor={(item) => item.id.toString()}
            refreshing={isRefetching}
            onRefresh={refetch}
        />
    );
}

import { RefreshControl } from 'react-native';

<FlatList
    refreshControl={
        <RefreshControl
            refreshing={isRefetching}
            onRefresh={refetch}
            tintColor="#c1442e"     // iOS
            colors={['#c1442e']}    // Android
        />
    }
    data={data}
    renderItem={renderItem}
/>

import { useInfiniteQuery } from '@tanstack/react-query';

function Posts() {
    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage,
        refetch,
        isRefetching,
    } = useInfiniteQuery({
        queryKey: ['posts'],
        queryFn: ({ pageParam }) => api.get(`/posts?page=${pageParam}`).then((r) => r.data),
        initialPageParam: 1,
        getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
    });

    const posts = data?.pages.flatMap((p) => p.data) ?? [];

    return (
        <FlatList
            data={posts}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => <PostCard post={item} />}
            refreshing={isRefetching}
            onRefresh={refetch}
            onEndReached={() => hasNextPage && fetchNextPage()}
            onEndReachedThreshold={0.5}
            ListFooterComponent={isFetchingNextPage ? <ActivityIndicator style={{ margin: 16 }} /> : null}
        />
    );
}

useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam }) => api.get(`/posts?cursor=${pageParam ?? ''}`),
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
});

<FlatList
    onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()}
    onEndReachedThreshold={0.5}
/>

ListFooterComponent={() => {
    if (isFetchingNextPage) return <ActivityIndicator style={{ padding: 16 }} />;
    if (!hasNextPage && posts.length > 0) return <Text style={styles.end}>Больше нет</Text>;
    return null;
}}

ListEmptyComponent={
    <View style={styles.empty}>
        <Text>Пока нет постов</Text>
    </View>
}

<FlatList
    data={posts}
    keyExtractor={keyExtractor}
    renderItem={renderItem}
    initialNumToRender={10}
    maxToRenderPerBatch={10}
    windowSize={5}
    removeClippedSubviews
/>

const { isFetchNextPageError, failureReason } = useInfiniteQuery({...});

ListFooterComponent={() => {
    if (isFetchNextPageError) {
        return (
            <View style={styles.error}>
                <Text>Ошибка загрузки</Text>
                <Pressable onPress={() => fetchNextPage()}>
                    <Text>Повторить</Text>
                </Pressable>
            </View>
        );
    }
    return null;
}}