fix: add pull to refresh to home and accounts, ref LEA-1814

apps/mobile/src/components/page/page.layout.tsx

@@ -1,4 +1,5 @@
-import { useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { RefreshControl } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -7,6 +8,7 @@ import {
   ActionBarContext,
   createOnScrollHandler,
 } from '@/components/action-bar/action-bar-container';
+import { queryClient } from '@/queries/query';
 import { HasChildren } from '@/utils/types';
 
 import { Box } from '@leather.io/ui/native';
@@ -18,6 +20,15 @@ export function PageLayout({ children }: HasChildren) {
   const actionBarRef = useRef<ActionBarMethods>(null);
   const contentOffsetBottom = bottom + ACTION_BAR_TOTAL_HEIGHT;
   const contentOffsetTop = top;
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    queryClient.invalidateQueries();
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
 
   return (
     <ActionBarContext.Provider value={{ ref: actionBarRef }}>
@@ -29,6 +40,13 @@ export function PageLayout({ children }: HasChildren) {
             contentOffsetBottom,
           })}
           contentInset={{ bottom: contentOffsetBottom }}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              progressViewOffset={contentOffsetTop}
+            />
+          }
         >
           {children}
         </ScrollView>