Mobile: Add Pull-to-Refresh with Haptics (#268)

Author: Devasy

.Jules/changelog.md

@@ -7,6 +7,14 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Pull-to-Refresh:** Implemented native pull-to-refresh interactions with haptic feedback for key lists.
+  - **Features:**
+    - Integrated `RefreshControl` into `HomeScreen`, `FriendsScreen`, and `GroupDetailsScreen`.
+    - Added haptic feedback (`Haptics.ImpactFeedbackStyle.Light`) on refresh trigger.
+    - Separated 'isRefreshing' state from 'isLoading' to prevent full-screen spinner interruptions.
+    - Themed the refresh spinner using `react-native-paper`'s primary color.
+  - **Technical:** Installed `expo-haptics`. Refactored data fetching logic to support silent updates.
+
 - **Confirmation Dialog System:** Replaced browser's native `alert`/`confirm` with a custom, accessible, and themed modal system.
   - **Features:**
     - Dual-theme support (Glassmorphism & Neobrutalism).

.Jules/todo.md

@@ -50,12 +50,12 @@
 
 ### Mobile
 
-- [ ] **[ux]** Pull-to-refresh with haptic feedback on all list screens
-  - Files: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`
+- [x] **[ux]** Pull-to-refresh with haptic feedback on all list screens
+  - Completed: 2026-01-21
+  - Files: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`, `mobile/screens/FriendsScreen.js`
   - Context: Add RefreshControl + Expo Haptics to main lists
   - Impact: Native feel, users can easily refresh data
-  - Size: ~45 lines
-  - Added: 2026-01-01
+  - Size: ~150 lines
 
 - [ ] **[ux]** Complete skeleton loading for HomeScreen groups
   - File: `mobile/screens/HomeScreen.js`
@@ -158,5 +158,7 @@
   - Completed: 2026-01-14
   - Files modified: `web/components/ErrorBoundary.tsx`, `web/App.tsx`
   - Impact: App doesn't crash, users can recover
-
-_No tasks completed yet. Move tasks here after completion._
+- [x] **[ux]** Pull-to-refresh with haptic feedback on all list screens
+  - Completed: 2026-01-21
+  - Files modified: `mobile/screens/HomeScreen.js`, `mobile/screens/GroupDetailsScreen.js`, `mobile/screens/FriendsScreen.js`
+  - Impact: Native feel, users can easily refresh data

backend/tests/expenses/test_expense_service.py

@@ -16,6 +16,7 @@
     "@react-navigation/native-stack": "^7.3.23",
     "axios": "^1.11.0",
     "expo": "^54.0.25",
+    "expo-haptics": "~15.0.8",
     "expo-image-picker": "~17.0.8",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",

mobile/package-lock.json

@@ -1,60 +1,71 @@
 import { useIsFocused } from "@react-navigation/native";
 import { useContext, useEffect, useRef, useState } from "react";
-import { Alert, Animated, FlatList, StyleSheet, View } from "react-native";
+import { Alert, Animated, FlatList, RefreshControl, StyleSheet, View } from "react-native";
 import {
   Appbar,
   Avatar,
   Divider,
   IconButton,
   List,
   Text,
+  useTheme,
 } from "react-native-paper";
+import * as Haptics from "expo-haptics";
 import { getFriendsBalance, getGroups } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
 import { formatCurrency } from "../utils/currency";
 
 const FriendsScreen = () => {
   const { token, user } = useContext(AuthContext);
+  const theme = useTheme();
   const [friends, setFriends] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const [showTooltip, setShowTooltip] = useState(true);
   const isFocused = useIsFocused();
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      try {
-        // Fetch friends balance + groups concurrently for group icons
-        const friendsResponse = await getFriendsBalance();
-        const friendsData = friendsResponse.data.friendsBalance || [];
-        const groupsResponse = await getGroups();
-        const groups = groupsResponse?.data?.groups || [];
-        const groupMeta = new Map(
-          groups.map((g) => [g._id, { name: g.name, imageUrl: g.imageUrl }])
-        );
+  const fetchData = async (showLoading = true) => {
+    if (showLoading) setIsLoading(true);
+    try {
+      // Fetch friends balance + groups concurrently for group icons
+      const friendsResponse = await getFriendsBalance();
+      const friendsData = friendsResponse.data.friendsBalance || [];
+      const groupsResponse = await getGroups();
+      const groups = groupsResponse?.data?.groups || [];
+      const groupMeta = new Map(
+        groups.map((g) => [g._id, { name: g.name, imageUrl: g.imageUrl }])
+      );
 
-        const transformedFriends = friendsData.map((friend) => ({
-          id: friend.userId,
-          name: friend.userName,
-          imageUrl: friend.userImageUrl || null,
-          netBalance: friend.netBalance,
-          groups: (friend.breakdown || []).map((group) => ({
-            id: group.groupId,
-            name: group.groupName,
-            balance: group.balance,
-            imageUrl: groupMeta.get(group.groupId)?.imageUrl || null,
-          })),
-        }));
+      const transformedFriends = friendsData.map((friend) => ({
+        id: friend.userId,
+        name: friend.userName,
+        imageUrl: friend.userImageUrl || null,
+        netBalance: friend.netBalance,
+        groups: (friend.breakdown || []).map((group) => ({
+          id: group.groupId,
+          name: group.groupName,
+          balance: group.balance,
+          imageUrl: groupMeta.get(group.groupId)?.imageUrl || null,
+        })),
+      }));
 
-        setFriends(transformedFriends);
-      } catch (error) {
-        console.error("Failed to fetch friends balance data:", error);
-        Alert.alert("Error", "Failed to load friends balance data.");
-      } finally {
-        setIsLoading(false);
-      }
-    };
+      setFriends(transformedFriends);
+    } catch (error) {
+      console.error("Failed to fetch friends balance data:", error);
+      Alert.alert("Error", "Failed to load friends balance data.");
+    } finally {
+      if (showLoading) setIsLoading(false);
+    }
+  };
 
+  const onRefresh = async () => {
+    setIsRefreshing(true);
+    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    await fetchData(false);
+    setIsRefreshing(false);
+  };
+
+  useEffect(() => {
     if (token && isFocused) {
       fetchData();
     }
@@ -235,6 +246,14 @@ const FriendsScreen = () => {
         ListEmptyComponent={
           <Text style={styles.emptyText}>No balances with friends yet.</Text>
         }
+        refreshControl={
+          <RefreshControl
+            refreshing={isRefreshing}
+            onRefresh={onRefresh}
+            colors={[theme.colors.primary]}
+            tintColor={theme.colors.primary}
+          />
+        }
       />
     </View>
   );

mobile/package.json

@@ -1,13 +1,15 @@
 import { useContext, useEffect, useState } from "react";
-import { Alert, FlatList, StyleSheet, Text, View } from "react-native";
+import { Alert, FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
 import {
   ActivityIndicator,
   Card,
   FAB,
   IconButton,
   Paragraph,
   Title,
+  useTheme,
 } from "react-native-paper";
+import * as Haptics from "expo-haptics";
 import {
   getGroupExpenses,
   getGroupMembers,
@@ -18,20 +20,22 @@ import { AuthContext } from "../context/AuthContext";
 const GroupDetailsScreen = ({ route, navigation }) => {
   const { groupId, groupName } = route.params;
   const { token, user } = useContext(AuthContext);
+  const theme = useTheme();
   const [members, setMembers] = useState([]);
   const [expenses, setExpenses] = useState([]);
   const [settlements, setSettlements] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   // Currency configuration - can be made configurable later
   const currency = "₹"; // Default to INR, can be changed to '$' for USD
 
   // Helper function to format currency amounts
   const formatCurrency = (amount) => `${currency}${amount.toFixed(2)}`;
 
-  const fetchData = async () => {
+  const fetchData = async (showLoading = true) => {
     try {
-      setIsLoading(true);
+      if (showLoading) setIsLoading(true);
       // Fetch members, expenses, and settlements in parallel
       const [membersResponse, expensesResponse, settlementsResponse] =
         await Promise.all([
@@ -46,10 +50,17 @@ const GroupDetailsScreen = ({ route, navigation }) => {
       console.error("Failed to fetch group details:", error);
       Alert.alert("Error", "Failed to fetch group details.");
     } finally {
-      setIsLoading(false);
+      if (showLoading) setIsLoading(false);
     }
   };
 
+  const onRefresh = async () => {
+    setIsRefreshing(true);
+    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    await fetchData(false);
+    setIsRefreshing(false);
+  };
+
   useEffect(() => {
     navigation.setOptions({
       title: groupName,
@@ -202,6 +213,14 @@ const GroupDetailsScreen = ({ route, navigation }) => {
           <Text style={styles.emptyText}>No expenses recorded yet.</Text>
         }
         contentContainerStyle={{ paddingBottom: 80 }} // To avoid FAB overlap
+        refreshControl={
+          <RefreshControl
+            refreshing={isRefreshing}
+            onRefresh={onRefresh}
+            colors={[theme.colors.primary]}
+            tintColor={theme.colors.primary}
+          />
+        }
       />
 
       <FAB
@@ -232,8 +251,7 @@ const styles = StyleSheet.create({
   expensesTitle: {
     marginTop: 16,
     marginBottom: 8,
-    fontSize: 20,
-    fontWeight: "bold",
+    fontSize: 20,    fontWeight: "bold",
   },
   memberText: {
     fontSize: 16,