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!
Top comments (0)