Scroll Infinito e Paginação

import { useCallback, useRef, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  RefreshControl,
  StyleSheet,
  Text,
  View,
} from "react-native";
 
interface PageResult<T> {
  items: T[];
  nextCursor: string | null;
}
 
async function fetchPage(cursor?: string): Promise<PageResult<{ id: string; title: string }>> {
  const res = await fetch(`https://api.example.com/posts?cursor=${cursor ?? ""}`);
  return res.json();
}
 
export function InfinitePostList() {
  const [items, setItems] = useState<{ id: string; title: string }[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const loadingRef = useRef(false);
 
  const load = useCallback(async (mode: "refresh" | "more") => {
    if (loadingRef.current) return;
    loadingRef.current = true;
    mode === "refresh" ? setRefreshing(true) : setLoadingMore(true);
 
    try {
      const page = await fetchPage(mode === "refresh" ? undefined : cursor ?? undefined);
      setItems((prev) => (mode === "refresh" ? page.items : [...prev, ...page.items]));
      setCursor(page.nextCursor);
    } finally {
      loadingRef.current = false;
      setRefreshing(false);
      setLoadingMore(false);
    }
  }, [cursor]);
 
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text>{item.title}</Text>
        </View>
      )}
      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => load("refresh")} />}
      onEndReached={() => cursor && load("more")}
      onEndReachedThreshold={0.4}
      ListFooterComponent={
        loadingMore ? <ActivityIndicator style={styles.footer} /> : null
      }
    />
  );
}
 
const styles = StyleSheet.create({
  row: { padding: 16, backgroundColor: "#fff" },
  footer: { paddingVertical: 24 },
});

import { useCallback, useRef, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Pressable,
  RefreshControl,
  StyleSheet,
  Text,
  View,
} from "react-native";
 
interface Notification {
  id: string;
  body: string;
  read: boolean;
}
 
interface Page {
  items: Notification[];
  nextCursor: string | null;
}
 
// API de cursor simulada
const MOCK_DB: Notification[] = Array.from({ length: 48 }, (_, i) => ({
  id: `n-${i}`,
  body: `Notification ${i + 1}`,
  read: i % 3 === 0,
}));
 
async function fetchNotifications(cursor: string | null, pageSize = 12): Promise<Page> {
  await new Promise((r) => setTimeout(r, 600));
  const start = cursor ? Number(cursor) : 0;
  const slice = MOCK_DB.slice(start, start + pageSize);
  const next = start + pageSize < MOCK_DB.length ? String(start + pageSize) : null;
  return { items: slice, nextCursor: next };
}
 
function SkeletonRow() {
  return (
    <View style={styles.skeletonRow}>
      <View style={styles.skeletonDot} />
      <View style={styles.skeletonLines}>
        <View style={styles.skeletonLine} />
        <View style={[styles.skeletonLine, styles.skeletonLineShort]} />
      </View>
    </View>
  );
}
 
function NotificationRow({ item }: { item: Notification }) {
  return (
    <View style={[styles.row, !item.read && styles.rowUnread]}>
      <Text style={styles.body}>{item.body}</Text>
    </View>
  );
}
 
export default function NotificationFeedScreen() {
  const [items, setItems] = useState<Notification[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [initialLoading, setInitialLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const loadingRef = useRef(false);
 
  const loadPage = useCallback(
    async (mode: "initial" | "refresh" | "more") => {
      if (loadingRef.current) return;
      loadingRef.current = true;
      setError(null);
 
      if (mode === "initial") setInitialLoading(true);
      if (mode === "refresh") setRefreshing(true);
      if (mode === "more") setLoadingMore(true);
 
      try {
        const page = await fetchNotifications(mode === "more" ? cursor : null);
        setItems((prev) => (mode === "more" ? [...prev, ...page.items] : page.items));
        setCursor(page.nextCursor);
      } catch {
        setError("Could not load notifications.");
      } finally {
        loadingRef.current = false;
        setInitialLoading(false);
        setRefreshing(false);
        setLoadingMore(false);
      }
    },
    [cursor],
  );
 
  // Carregamento inicial
  if (initialLoading) {
    return (
      <View style={styles.screen}>
        {Array.from({ length: 6 }).map((_, i) => (
          <SkeletonRow key={i} />
        ))}
      </View>
    );
  }
 
  return (
    <View style={styles.screen}>
      <FlatList
        data={items}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <NotificationRow item={item} />}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={() => loadPage("refresh")} />
        }
        onEndReached={() => {
          if (cursor) loadPage("more");
        }}
        onEndReachedThreshold={0.3}
        ListEmptyComponent={
          error ? (
            <View style={styles.empty}>
              <Text style={styles.emptyTitle}>{error}</Text>
              <Pressable onPress={() => loadPage("refresh")} style={styles.retry}>
                <Text style={styles.retryText}>Retry</Text>
              </Pressable>
            </View>
          ) : (
            <View style={styles.empty}>
              <Text style={styles.emptyTitle}>All caught up</Text>
              <Text style={styles.emptyBody}>No notifications right now.</Text>
            </View>
          )
        }
        ListFooterComponent={
          loadingMore ? (
            <ActivityIndicator style={styles.footerSpinner} color="#2563eb" />
          ) : cursor ? (
            <Text style={styles.footerHint}>Scroll for more</Text>
          ) : (
            <Text style={styles.footerHint}>End of list</Text>
          )
        }
        contentContainerStyle={items.length === 0 ? styles.emptyContainer : undefined}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  row: {
    paddingHorizontal: 16,
    paddingVertical: 14,
    backgroundColor: "#fff",
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "#e2e8f0",
  },
  rowUnread: { backgroundColor: "#eff6ff" },
  body: { fontSize: 15, color: "#0f172a" },
  skeletonRow: {
    flexDirection: "row",
    gap: 12,
    padding: 16,
    alignItems: "center",
  },
  skeletonDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: "#e2e8f0",
  },
  skeletonLines: { flex: 1, gap: 8 },
  skeletonLine: { height: 10, borderRadius: 4, backgroundColor: "#e2e8f0" },
  skeletonLineShort: { width: "60%" },
  emptyContainer: { flexGrow: 1, justifyContent: "center" },
  empty: { alignItems: "center", padding: 32, gap: 8 },
  emptyTitle: { fontSize: 17, fontWeight: "700", color: "#0f172a" },
  emptyBody: { fontSize: 14, color: "#64748b" },
  retry: {
    marginTop: 8,
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
    backgroundColor: "#2563eb",
  },
  retryText: { color: "#fff", fontWeight: "600" },
  footerSpinner: { paddingVertical: 20 },
  footerHint: {
    textAlign: "center",
    fontSize: 12,
    color: "#94a3b8",
    paddingVertical: 16,
  },
});

// Anexo de cursor - preferido para feeds ao vivo
setItems((prev) => (isRefresh ? page.items : [...prev, ...page.items]));
setCursor(page.nextCursor);
 
// Deduplicar se a API puder ter sobreposição
setItems((prev) => {
  const map = new Map(prev.map((i) => [i.id, i]));
  for (const item of page.items) map.set(item.id, item);
  return Array.from(map.values());
});

<FlatList
  onEndReached={fetchNextPage}
  onEndReachedThreshold={0.3}  // 30% do final do comprimento do conteúdo
  // Opcional: apenas quando a lista é rolável
  onMomentumScrollEnd={(e) => {
    const { layoutMeasurement, contentOffset, contentSize } = e.nativeEvent;
    const distanceFromEnd =
      contentSize.height - layoutMeasurement.height - contentOffset.y;
    if (distanceFromEnd < 200 && hasNextPage) fetchNextPage();
  }}
/>

import { useInfiniteQuery } from "@tanstack/react-query";
import { FlatList, RefreshControl } from "react-native";
 
const query = useInfiniteQuery({
  queryKey: ["posts"],
  queryFn: ({ pageParam }) => fetchPosts(pageParam),
  initialPageParam: null as string | null,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
});
 
const items = query.data?.pages.flatMap((p) => p.items) ?? [];
 
<FlatList
  data={items}
  onEndReached={() => query.hasNextPage && query.fetchNextPage()}
  refreshControl={
    <RefreshControl refreshing={query.isRefetching} onRefresh={query.refetch} />
  }
  ListFooterComponent={query.isFetchingNextPage ? <Spinner /> : null}
/>

interface PaginatedResponse<T> {
  items: T[];
  nextCursor: string | null;
}
 
type LoadMode = "initial" | "refresh" | "more";
 
interface PaginationState<T> {
  items: T[];
  cursor: string | null;
  load: (mode: LoadMode) => Promise<void>;
  refreshing: boolean;
  loadingMore: boolean;
}