How do I add infinite scrolling to a list in React Native?

Infinite scroll sounds like a big feature, but it’s really a list that loads the next page when someone gets close to the bottom. FlatList and FlashList both have what you need built in, so most of the work is making sure each page gets requested exactly once.

How it works

Both lists call onEndReached when the scroll position gets within onEndReachedThreshold of the end of the content. The threshold is measured in screen lengths of the list, so 0.5 means half a visible list away from the bottom, which gives the next page time to arrive before anyone hits the end. We’d set it explicitly rather than rely on the default.

onEndReached runs once for a given content height, and runs again when that height changes. A first page too short to fill the screen puts the end in range right away, and a loading spinner at the bottom changes the height, so the callback can run again before your first request has finished. That’s why the guard in step 2 uses a ref, which changes the moment you set it, while state only changes on the next render.

How to add it

1. Write a function that fetches one page. With Supabase, range() takes 0-based, inclusive offsets, and it needs an order() so pages don’t shift between requests:

   const PAGE_SIZE = 20;
   
   async function fetchPage(page: number) {
     const from = page * PAGE_SIZE;
     const { data, error } = await supabase
       .from("posts")
       .select("id, title")
       .order("created_at", { ascending: false })
       .range(from, from + PAGE_SIZE - 1);
     if (error) throw error;
     return data;
   }

2. Load more from onEndReached, guarded by refs:

   import { useCallback, useEffect, useRef, useState } from "react";
   import { ActivityIndicator, FlatList, Text } from "react-native";
   
   export function Feed() {
     const [items, setItems] = useState<{ id: string; title: string }[]>([]);
     const [loading, setLoading] = useState(false);
     const busy = useRef(false);
     const hasMore = useRef(true);
     const page = useRef(0);
   
     const loadMore = useCallback(async () => {
       if (busy.current || !hasMore.current) return;
       busy.current = true;
       setLoading(true);
       try {
         const next = await fetchPage(page.current);
         page.current += 1;
         hasMore.current = next.length === PAGE_SIZE;
         setItems((current) => [...current, ...next]);
       } finally {
         busy.current = false;
         setLoading(false);
       }
     }, []);
   
     useEffect(() => {
       loadMore();
     }, [loadMore]);
   
     return (
       <FlatList
         data={items}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => <Text>{item.title}</Text>}
         onEndReached={loadMore}
         onEndReachedThreshold={0.5}
         ListFooterComponent={loading ? <ActivityIndicator style={{ margin: 16 }} /> : null}
       />
     );
   }

3. Switch to FlashList if you like by installing it with npx expo install @shopify/flash-list and changing FlatList to FlashList from @shopify/flash-list. The props above work unchanged. On Expo SDK 55, that command installs FlashList 2, which no longer uses estimatedItemSize, so drop that prop if older code passes it.

4. Use a cursor instead of page numbers when new rows arrive often. Ask for rows older than the last item you have, in the same order, for example with .lt("created_at", lastItem.created_at).limit(PAGE_SIZE) instead of range(), so new posts at the top can’t push an item onto the next page twice.

How you know it works

When you scroll to the bottom, a spinner shows briefly while the next 20 items load. Your network log should show one request per page with no repeats, and once you reach the last item, the requests stop.

If it loads twice or not at all

If pages repeat, check that the guard is a ref and that keyExtractor returns a unique id. If more items never load, check that the list isn’t inside a ScrollView (nesting it there triggers a React Native warning that it can break windowing and other list behavior), and give it a parent with flex: 1. And if a failed request stops the list for good, show a retry button in the footer that calls loadMore again.