complated

screens/profile/ui/MyServices.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from '@/components/ThemeContext';
-import { useGlobalRefresh } from '@/components/ui/RefreshContext';
 import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 import { useRouter } from 'expo-router';
@@ -15,20 +14,18 @@ import {
   View,
 } from 'react-native';
 import { RefreshControl } from 'react-native-gesture-handler';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { user_api } from '../lib/api';
 
-const PAGE_SIZE = 5;
+const PAGE_SIZE = 10;
 
 export default function MyServicesScreen() {
   const router = useRouter();
-  const { onRefresh, refreshing } = useGlobalRefresh();
   const queryClient = useQueryClient();
   const { isDark } = useTheme();
   const { t } = useTranslation();
 
   /* ================= QUERY ================= */
-  const { data, isLoading, isError, fetchNextPage, hasNextPage } = useInfiniteQuery({
+  const { data, isLoading, isError, fetchNextPage, hasNextPage, isRefetching } = useInfiniteQuery({
     queryKey: ['my_services'],
     queryFn: async ({ pageParam = 1 }) => {
       const res = await user_api.my_sevices({
@@ -69,9 +66,13 @@ export default function MyServicesScreen() {
     ]);
   };
 
+  const onRefresh = () => {
+    queryClient.refetchQueries({ queryKey: ['my_services'] });
+  };
+
   if (isLoading) {
     return (
-      <SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
+      <View style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
         <View style={[styles.topHeader, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
           <Pressable onPress={() => router.push('/profile')}>
             <ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
@@ -84,7 +85,7 @@ export default function MyServicesScreen() {
           </Pressable>
         </View>
         <ActivityIndicator size={'large'} />
-      </SafeAreaView>
+      </View>
     );
   }
 
@@ -97,7 +98,7 @@ export default function MyServicesScreen() {
   }
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
+    <View style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
       {/* HEADER */}
       <View style={[styles.topHeader, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
         <Pressable onPress={() => router.push('/profile')}>
@@ -119,7 +120,7 @@ export default function MyServicesScreen() {
         onEndReached={() => hasNextPage && fetchNextPage()}
         refreshControl={
           <RefreshControl
-            refreshing={refreshing}
+            refreshing={isRefetching}
             onRefresh={onRefresh}
             colors={['#2563eb']}
             tintColor="#2563eb"
@@ -235,7 +236,7 @@ export default function MyServicesScreen() {
           </View>
         }
       />
-    </SafeAreaView>
+    </View>
   );
 }
 
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
     elevation: 3,
   },
   headerTitle: { fontSize: 18, fontWeight: '700', flex: 1, marginLeft: 10 },
-  list: { padding: 16, gap: 16 },
+  list: { padding: 16, gap: 16, paddingBottom: 30 },
   card: { borderRadius: 20, overflow: 'hidden' },
   mediaContainer: { width: '100%', height: 200 },
   media: { width: '100%', height: '100%' },