React Native Infinite Scroll

Infinite lists are without a doubt one of the most used features when it comes to long lists. They provide a seamless experience for users by loading content as they scroll, avoiding the need for pagination or loading screens.

Implementing this feature on the web can be challenging, as it often requires custom logic to detect when the user has reached the end of a list. You need to set up scroll event listeners, calculate the scroll position, and trigger data fetching when necessary. While this gives you fine-grained control, it can also be complex and error-prone.

React Native, however, simplifies this with the FlatList component, which has built-in support for infinite scrolling. Two key props, onEndReachedThreshold and ListFooterComponent, make it straightforward to implement infinite scroll without all the extra boilerplate.

Step-by-Step Guide to Implement Infinite Scroll in React Native

Let’s walk through how you can create an infinite scroll list in React Native using FlatList.

1. Basic FlatList Setup

First, start with the basic setup of a FlatList. This component is designed to handle large datasets by rendering only the items that are currently visible on the screen.

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

const MyInfiniteScrollList = () => {
  const [data, setData] = useState([]);

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

2. Handling New Data

To enable infinite scrolling, you'll need to load more items when the user reaches the end of the list. The onEndReached prop is used to trigger this action. Here's how you can manage that:

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

const MyInfiniteScrollList = () => {
  const [data, setData] = useState([]);

   const renderItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  const loadMoreItems = async () => {
    const newData = await fetchMoreData(); // Replace with your data-fetching logic
    setData((prevData) => [...prevData, ...newData]);
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      onEndReached={loadMoreItems}
    />
  );
};

3. Handling Loading Status

We can use a loading variable to prevent re-fetching and also to show a loading indicator for the user. We can also control when we want to trigger fetching new data with onEndReachedThreshold:

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

const MyInfiniteScrollList = () => {
  const [data, setData] = useState(initialData);
  const [isLoading, setIsLoading] = useState(false);

   const renderItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  const loadMoreItems = async () => {
    if (isLoading) return; // Prevent multiple triggers
    setIsLoading(true);

    try {
      const newData = await fetchMoreData(); // Replace with your data-fetching logic
      setData((prevData) => [...prevData, ...newData]);
    } catch (error) {
      Alert.alert("Oops", "Something went wrong.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      onEndReached={loadMoreItems}
      onEndReachedThreshold={0.4} // Trigger loading when 40% from the bottom
      ListFooterComponent={isLoading && <ActivityIndicator />}
    />
  );
};

Conclusion

With just a few lines of code, you can implement infinite scroll in your React Native app using FlatList. By leveraging onEndReachedThreshold and ListFooterComponent, you can avoid the complexity often associated with implementing this feature on the web. This makes FlatList a powerful tool for managing large lists in your mobile app.

Happy coding!

Blog

React Native Infinite Scroll

Rodrigo

Step-by-Step Guide to Implement Infinite Scroll in React Native

1. Basic FlatList Setup

2. Handling New Data

3. Handling Loading Status

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related