Implementing Load More Animation in React Native with Reanimated and Lottie

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. 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!

Mar 18, 2025 - 14:29

Implementing Load More Animation in React Native with Reanimated and Lottie

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.

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!