Infinite scrolling (onEndReached) in React Native

Introduction

Infinite scrolling lets users keep seeing more items as they scroll down without pressing buttons. It feels smooth and natural, like browsing a long list that never ends.

Showing a long list of social media posts that loads more as you scroll.

Displaying search results that keep adding more items when you reach the bottom.

Loading more products in a shopping app without switching pages.

Viewing a chat history that loads older messages when you scroll up.

Browsing news articles that appear continuously as you scroll.

Syntax

React Native

import { FlatList } from 'react-native';

<FlatList
  data={dataArray}
  renderItem={renderItemFunction}
  keyExtractor={item => item.id.toString()}
  onEndReached={loadMoreFunction}
  onEndReachedThreshold={0.5}
/>

onEndReached is a function called when the list scroll reaches near the end.

onEndReachedThreshold controls how close to the end the event triggers (0.5 means half the visible length before the end).

Examples

This logs a message when the user scrolls near the end.

React Native

onEndReached={() => console.log('Load more items')}

This calls fetchMoreData when the user is 20% away from the bottom.

React Native

<FlatList
  onEndReached={fetchMoreData}
  onEndReachedThreshold={0.2}
/>

This increases the page number when the user reaches the very end of the list.

React Native

<FlatList
  onEndReached={() => setPage(page + 1)}
  onEndReachedThreshold={1}
/>

Sample App

This example shows a list that loads 10 more items each time you scroll near the bottom. It uses a loading spinner while fetching.

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';

export default function InfiniteScrollExample() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    if (loading) return;
    setLoading(true);
    // Simulate fetching 10 new items
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => ({ id: (page - 1) * 10 + i + 1, title: `Item ${(page - 1) * 10 + i + 1}` }));
      setData(prev => [...prev, ...newItems]);
      setPage(prev => prev + 1);
      setLoading(false);
    }, 1000);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const renderItem = ({ item }) => <Text style={{ padding: 20, borderBottomWidth: 1 }}>{item.title}</Text>;

  return (
    <View style={{ flex: 1, marginTop: 50 }}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
        onEndReached={fetchData}
        onEndReachedThreshold={0.5}
        ListFooterComponent={loading ? <ActivityIndicator size="large" /> : null}
      />
    </View>
  );
}

Important Notes

Make sure to prevent multiple loads at the same time by checking a loading state.

Adjust onEndReachedThreshold to control how early the loading starts.

Use unique keys for list items to avoid rendering issues.

Summary

Infinite scrolling loads more content automatically as the user scrolls.

Use onEndReached in FlatList to detect when to load more.

Manage loading state to avoid repeated calls and show a loading indicator.