Posted on Mar 18

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 ( <Animated.FlatList data={items} scrollEventThrottle={16} bounces={false} renderItem={({ item }) => <View>{/* Render Item */}</View>} onEndReached={loadMoreData} onEndReachedThreshold={0.5} ListFooterComponent={() => isLoadingMore ? ( <LottieView source={require('./9.json')} autoPlay loop speed={0.5} style={styles.loaderMoreAnimation} /> ) : 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!