feat(mobile): pull-to-refresh on Profile, Saved, My submissions, Mosque detail

New usePullToRefresh hook invalidates the TanStack Query cache
when the user drags a ScrollView past its edge, which triggers
every active query on the screen to refetch. Applied to the
four screens where stale data is most visible — stats, saved
list, submission list, and a mosque's details/reviews/events.
Green tint matches the app palette.

Author: Aqib-Rime

apps/mobile/features/mosques/components/mosque-detail-content.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { ScrollView, View } from "react-native";
+import { RefreshControl, ScrollView, View } from "react-native";
 import { Text } from "@/components/ui/text";
 import { PrayerTimesTab } from "@/features/prayer-times";
+import { usePullToRefresh } from "@/lib/use-pull-to-refresh";
 import type { MosqueDetail } from "../lib/types";
 import { MosqueDetailTabs, type MosqueTab } from "./mosque-detail-tabs";
 import { MosqueEventsTab } from "./mosque-events-tab";
@@ -12,12 +13,21 @@ import { MosqueReviewsTab } from "./mosque-reviews-tab";
 export function MosqueDetailContent({ data }: { data: MosqueDetail }) {
   const [tab, setTab] = useState<MosqueTab>("overview");
   const { mosque, imam, events, reviews } = data;
+  const { refreshing, onRefresh } = usePullToRefresh();
 
   return (
     <ScrollView
       className="flex-1"
       contentContainerStyle={{ paddingBottom: 120 }}
       showsVerticalScrollIndicator={false}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor="#2e5d45"
+          colors={["#2e5d45"]}
+        />
+      }
     >
       <View className="px-s-6 pt-s-2">
         <Text variant="display-lg">{mosque.name}</Text>

apps/mobile/features/mosques/components/saved-mosques-screen.tsx

@@ -1,6 +1,7 @@
 import { StatusBar } from "expo-status-bar";
-import { ScrollView, View } from "react-native";
+import { RefreshControl, ScrollView, View } from "react-native";
 import { Text } from "@/components/ui/text";
+import { usePullToRefresh } from "@/lib/use-pull-to-refresh";
 import { useSavedMosques } from "../hooks/use-mosques";
 import { SavedMosqueCard } from "./saved-mosque-card";
 import { SavedMosquesEmpty } from "./saved-mosques-empty";
@@ -19,6 +20,7 @@ export function SavedMosquesScreen() {
   const { data, isLoading } = useSavedMosques();
   const rows = data?.data ?? [];
   const pairs = chunkPairs(rows);
+  const { refreshing, onRefresh } = usePullToRefresh();
 
   return (
     <View className="flex-1 bg-cream">
@@ -46,6 +48,14 @@ export function SavedMosquesScreen() {
             paddingBottom: 32,
           }}
           showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor="#2e5d45"
+              colors={["#2e5d45"]}
+            />
+          }
         >
           <View className="gap-s-3">
             {pairs.map(([left, right]) => (

apps/mobile/features/profile/components/profile-screen.tsx

@@ -1,9 +1,10 @@
 import * as Linking from "expo-linking";
 import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
-import { ScrollView, Share, View } from "react-native";
+import { RefreshControl, ScrollView, Share, View } from "react-native";
 import { useHydrateSettings, useSettingsStore } from "@/features/settings";
 import { useSession } from "@/lib/auth";
+import { usePullToRefresh } from "@/lib/use-pull-to-refresh";
 import { useProfileStats } from "../hooks/use-profile-stats";
 import { ProfileHeader } from "./profile-header";
 import { ProfileHeroCard } from "./profile-hero-card";
@@ -20,6 +21,7 @@ export function ProfileScreen() {
 
   const name = session?.user?.name ?? "Guest";
   const email = session?.user?.email ?? "";
+  const { refreshing, onRefresh } = usePullToRefresh();
 
   return (
     <View className="flex-1 bg-cream">
@@ -33,6 +35,14 @@ export function ProfileScreen() {
           paddingBottom: 48,
         }}
         showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor="#2e5d45"
+            colors={["#2e5d45"]}
+          />
+        }
       >
         <ProfileHeroCard name={name} email={email} />
 

apps/mobile/features/submissions/components/my-submissions-screen.tsx

@@ -1,12 +1,13 @@
 import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
-import { Pressable, ScrollView, View } from "react-native";
+import { Pressable, RefreshControl, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { IconButton } from "@/components/ui/icon-button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Text } from "@/components/ui/text";
+import { usePullToRefresh } from "@/lib/use-pull-to-refresh";
 import { useMySubmissions } from "../hooks/use-submissions";
 
 type SubmissionRow = NonNullable<
@@ -16,6 +17,7 @@ type SubmissionRow = NonNullable<
 export function MySubmissionsScreen() {
   const { data, isLoading } = useMySubmissions();
   const submissions = data?.data ?? [];
+  const { refreshing, onRefresh } = usePullToRefresh();
 
   return (
     <View className="flex-1 bg-cream">
@@ -41,6 +43,14 @@ export function MySubmissionsScreen() {
           paddingBottom: 48,
         }}
         showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor="#2e5d45"
+            colors={["#2e5d45"]}
+          />
+        }
       >
         {isLoading ? (
           <View className="gap-s-3">

apps/mobile/lib/use-pull-to-refresh.ts

@@ -0,0 +1,44 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useState } from "react";
+
+/**
+ * Hook to wire up pull-to-refresh on a ScrollView or FlatList.
+ *
+ * Pass the query keys you want invalidated on pull. Pass an empty array
+ * (or no argument) to invalidate every TanStack Query in the cache — cheap
+ * and simple for screens that show data from several disparate sources.
+ *
+ * Usage:
+ *   const { refreshing, onRefresh } = usePullToRefresh([
+ *     ["mosques", "saved"],
+ *     ["my-submissions"],
+ *   ]);
+ *   <ScrollView
+ *     refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+ *   >
+ */
+export function usePullToRefresh(
+  queryKeys: ReadonlyArray<readonly unknown[]> = [],
+) {
+  const qc = useQueryClient();
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      if (queryKeys.length === 0) {
+        await qc.invalidateQueries();
+      } else {
+        await Promise.all(
+          queryKeys.map((key) => qc.invalidateQueries({ queryKey: key })),
+        );
+      }
+    } finally {
+      setRefreshing(false);
+    }
+    // queryKeys is assumed stable — pass a module-level constant from the
+    // caller to avoid recreating the callback every render.
+  }, [qc, queryKeys]);
+
+  return { refreshing, onRefresh };
+}