In my previous article, I covered how to implement pull-to-refresh functionality in React Native using Reanimated and Lottie. Now, let's take it a step further by adding a Load More animation to fetch additional data when the user scrolls to the bottom of the list.

Image description

Implementing Load More Functionality

We'll be using a paginated approach where we initially load a fixed number of items and fetch more when the user reaches the end of the list.

Step 1: Set Up State and Data Handling

Import the dataset and define necessary state variables:

import React, { useState, useCallback } from 'react';
import { View, FlatList, StyleSheet, Dimensions } from 'react-native';
import Animated from 'react-native-reanimated';
import LottieView from 'lottie-react-native';
import data from './data';

const PAGE_SIZE = 6;
const { width } = Dimensions.get('window');

const LoadMoreList = () => {
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [page, setPage] = useState(1);
  const [items, setItems] = useState(data.slice(0, PAGE_SIZE));

  const onRefresh = useCallback(done => {
    setTimeout(() => {
      setPage(1);
      setItems(data.slice(0, PAGE_SIZE)); 
      done();
    }, 5000);
  }, []);

  const loadMoreData = () => {
    if (isLoadingMore) return;
    setIsLoadingMore(true);

    setTimeout(() => {
      const newPage = page + 1;
      const newData = data.slice(0, newPage * PAGE_SIZE);

      if (newData.length > items.length) {
        setItems(newData);
        setPage(newPage);
      }

      setIsLoadingMore(false);
    }, 3000);
  };

  return (
     {/* Render Item */}}
      onEndReached={loadMoreData}
      onEndReachedThreshold={0.5} 
      ListFooterComponent={() =>
        isLoadingMore ? (
          
        ) : null
      }
    />
  );
};

const styles = StyleSheet.create({
  loaderMoreAnimation: {
    width,
    height: 300,
  },
});

export default LoadMoreList;

Conclusion

This implementation enhances the user experience by adding a smooth Load More animation while fetching additional data. Combining pull-to-refresh and infinite scrolling creates a seamless and modern UI.

Give it a try and let me know your thoughts in the comments!