اجرای انیمیشن بیشتر در React Native با Reanimated و Lottie

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;