latest code with fix modal back Press problem

src/Screens/Auction/PurchaseAuction.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useCallback, memo } from 'react';
-import { View, Text, StyleSheet, FlatList, RefreshControl } from 'react-native';
+import React, { useEffect, useState, useCallback, memo, useRef } from 'react';
+import { View, Text, StyleSheet, FlatList, RefreshControl, ActivityIndicator } from 'react-native';
 import LiveAuctionTile from './LiveAuctionTile';
 import { useNavigation } from '@react-navigation/native';
 import moment from 'moment';
-import { useFetchPurchaseAuction } from '../../Services/BBPS/Hooks';
+import { useFetchLiveAuctionPage, useFetchPurchaseAuction } from '../../Services/BBPS/Hooks';
 import PurchaseAuctionTile from './PurchaseAuctionTile';
 import { useDispatch } from 'react-redux';
 import { setAuction } from '../../Redux/Slices/SelectedAuction';
@@ -12,12 +12,14 @@ import { Skelton } from '../../Component/Index';
 import { allBooleanProps } from './types/types';
 import FilterModal from './Modal/FilterModal';
 import NavigationString from '../../Constant/NavigationString';
+import colors from '../../Constant/Color';
 
 
 const PurchaseAuction = () => {
     const navigation = useNavigation() as any;
     const Dispatch = useDispatch()
-    const { data = {}, isPending } = useFetchPurchaseAuction();
+    const onEndReachedCalledDuringMomentum = useRef(true);
+    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isRefetching, refetch, isPending }: any = useFetchLiveAuctionPage();
     const [allBoolean, setAllBoolean] = useState<allBooleanProps>({ isShowFilter: false })
     const format = 'DD-MM-YYYY HH:mm:ss';
 
@@ -40,28 +42,90 @@ const PurchaseAuction = () => {
         return now.isAfter(end);
     }
 
+    const loadMore = useCallback(() => {
+        if (onEndReachedCalledDuringMomentum.current) return;
+
+        if (!hasNextPage || isFetchingNextPage) return;
+
+        fetchNextPage();
+        onEndReachedCalledDuringMomentum.current = true;
+    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    const renderFooter = useCallback(() => {
+        if (!isFetchingNextPage) return null;
+        return (
+            <View style={{ paddingVertical: 12 }}>
+                <ActivityIndicator size="small" color={colors.primary} />
+            </View>
+        );
+    }, [isFetchingNextPage]);
+
     return (
         <View style={{ flex: 1 }}>
             <SearchInput onChange={() => { }} placeholder='Search....' filterPress={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: !prev.isShowFilter })) }} />
-            {isPending ? <Skelton /> : <FlatList
-                data={data?.data.slice(0, 10) || []}
-                keyExtractor={(_, index) => index.toString()}
-                showsVerticalScrollIndicator={false}
-                contentContainerStyle={{ paddingBottom: 200, paddingHorizontal: 10 }}
-                renderItem={({ item, index }) => (
-                    <PurchaseAuctionTile
-                        item={item}
-                        onPressDetails={() => {
-                        }}
-                        onStartBidding={() => {
-                            Dispatch(setAuction(item))
-                            navigation.navigate(NavigationString.Emd)
-                        }}
-                        buttonEnable={isAuctionActive(item)}
-                        isAuctionEnd={isAuctionEnd(item)}
-                    />
-                )}
-            />}
+            {isPending ? <Skelton />
+                :
+                // <FlatList
+                //     data={data.data ||[]}
+                //     keyExtractor={(_, index) => index.toString()}
+                //     showsVerticalScrollIndicator={false}
+                //     contentContainerStyle={{ paddingBottom: 200, paddingHorizontal: 10 }}
+                //     renderItem={({ item, index }) => (
+                //         <PurchaseAuctionTile
+                //             item={item}
+                //             onPressDetails={() => {
+                //             }}
+                //             onStartBidding={() => {
+                //                 Dispatch(setAuction(item))
+                //                 navigation.navigate(NavigationString.Emd)
+                //             }}
+                //             buttonEnable={isAuctionActive(item)}
+                //             isAuctionEnd={isAuctionEnd(item)}
+                //         />
+                //     )}
+                // />
+                <FlatList
+                    data={data.result ?? []}
+                    renderItem={({ item, index }) => (
+                        <PurchaseAuctionTile
+                            item={item}
+                            onPressDetails={() => {
+                            }}
+                            onStartBidding={() => {
+                                Dispatch(setAuction(item))
+                                navigation.navigate(NavigationString.Emd)
+                            }}
+                            buttonEnable={isAuctionActive(item)}
+                            isAuctionEnd={isAuctionEnd(item)}
+                        />
+                    )}
+                    showsVerticalScrollIndicator={false}
+                    contentContainerStyle={{ paddingBottom: 50, paddingTop: 10 }}
+
+                    onEndReached={loadMore}
+                    onEndReachedThreshold={0.1}
+
+                    onMomentumScrollBegin={() => {
+                        onEndReachedCalledDuringMomentum.current = false;
+                    }}
+
+                    ListFooterComponent={renderFooter}
+
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={isRefetching}
+                            onRefresh={refetch}
+                            tintColor="transparent"
+                            colors={[colors.primary]}
+                        />
+                    }
+
+                    initialNumToRender={6}
+                    maxToRenderPerBatch={6}
+                    windowSize={7}
+                    removeClippedSubviews
+                />
+            }
             {allBoolean.isShowFilter && <View style={{ flex: 1 }}>
                 <FilterModal visible={allBoolean.isShowFilter} onClose={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: false })) }} onApply={() => { }} />
             </View>}