From c7145350cbecc2f59cb74f92a3da53d8065557a7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Apr 2026 19:58:44 +0000
Subject: [PATCH] [jules] ux: Complete skeleton loading for HomeScreen groups

- Implemented `Skeleton` primitive component in `mobile/components/ui/Skeleton.js` utilizing `react-native-reanimated` for smooth pulsing animations.
- Created `GroupListSkeleton` in `mobile/components/skeletons/GroupListSkeleton.js` designed to mimic `react-native-paper`'s `Card` elements for a seamless transition.
- Replaced the generic `ActivityIndicator` in `mobile/screens/HomeScreen.js` with the new `GroupListSkeleton`.
- Applied proper accessibility role (`progressbar`) to loading states.
- Handled animation lifecycle correctly to avoid memory leaks.
- Updated `todo.md` and `changelog.md`.

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
---
 .Jules/changelog.md                           |   8 +
 .Jules/todo.md                                |  10 +-
 .../components/skeletons/GroupListSkeleton.js |  53 ++
 mobile/components/ui/Skeleton.js              |  61 ++
 mobile/package-lock.json                      | 747 +++++++++++++++++-
 mobile/package.json                           |   2 +
 mobile/screens/HomeScreen.js                  |   5 +-
 7 files changed, 848 insertions(+), 38 deletions(-)
 create mode 100644 mobile/components/skeletons/GroupListSkeleton.js
 create mode 100644 mobile/components/ui/Skeleton.js

diff --git a/.Jules/changelog.md b/.Jules/changelog.md
index 11fc864e..562d53ec 100644
--- a/.Jules/changelog.md
+++ b/.Jules/changelog.md
@@ -7,6 +7,14 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Skeleton Loading:** Added a skeleton loading state for the Groups list on the Home screen.
+  - **Features:**
+    - Created a generic `Skeleton` component using `react-native-reanimated` for smooth pulsing animations.
+    - Created a specific `GroupListSkeleton` that mimics the layout of the actual `HapticCard` list.
+    - Improved perceived performance and reduced layout shift when loading the home screen.
+    - Added proper accessibility labels (`progressbar` role) to the loading state.
+  - **Technical:** Created `mobile/components/ui/Skeleton.js` and `mobile/components/skeletons/GroupListSkeleton.js`. Integrated into `mobile/screens/HomeScreen.js`.
+
 - **Password Strength Meter:** Added a visual password strength indicator to the signup form.
   - **Features:**
     - Real-time strength calculation (Length, Uppercase, Lowercase, Number, Symbol).
diff --git a/.Jules/todo.md b/.Jules/todo.md
index ebb0c7a5..38df433d 100644
--- a/.Jules/todo.md
+++ b/.Jules/todo.md
@@ -57,8 +57,9 @@
   - Impact: Native feel, users can easily refresh data
   - Size: ~150 lines
 
-- [ ] **[ux]** Complete skeleton loading for HomeScreen groups
-  - File: `mobile/screens/HomeScreen.js`
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-04-07
+  - Files modified: `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`, `mobile/screens/HomeScreen.js`
   - Context: Replace ActivityIndicator with skeleton group cards
   - Impact: Better loading experience, less jarring
   - Size: ~40 lines
@@ -143,6 +144,11 @@
 
 ## ✅ Completed Tasks
 
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-04-07
+  - Files modified: `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`, `mobile/screens/HomeScreen.js`
+  - Impact: Users now see a skeleton loading state instead of an activity indicator while groups are loading on the home screen.
+
 - [x] **[ux]** Comprehensive empty states with illustrations
   - Completed: 2026-01-01
   - Files modified: `web/components/ui/EmptyState.tsx`, `web/pages/Groups.tsx`, `web/pages/Friends.tsx`
diff --git a/mobile/components/skeletons/GroupListSkeleton.js b/mobile/components/skeletons/GroupListSkeleton.js
new file mode 100644
index 00000000..3b1efab5
--- /dev/null
+++ b/mobile/components/skeletons/GroupListSkeleton.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { Card } from 'react-native-paper';
+import Skeleton from '../ui/Skeleton';
+
+const GroupListSkeleton = () => {
+  // Array of 5 items to show while loading
+  const skeletonItems = Array.from({ length: 5 }, (_, i) => i);
+
+  return (
+    <View
+      style={styles.container}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading groups"
+    >
+      <ScrollView contentContainerStyle={styles.list}>
+        {skeletonItems.map((item) => (
+          <Card key={item} style={styles.card}>
+            <Card.Title
+              title={<Skeleton width={120} height={20} />}
+              left={(props) => (
+                <View {...props}>
+                  <Skeleton width={40} height={40} borderRadius={20} />
+                </View>
+              )}
+            />
+            <Card.Content>
+              <Skeleton width={150} height={16} style={styles.statusSkeleton} />
+            </Card.Content>
+          </Card>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    padding: 16,
+  },
+  card: {
+    marginBottom: 16,
+  },
+  statusSkeleton: {
+    marginTop: 4,
+  },
+});
+
+export default GroupListSkeleton;
diff --git a/mobile/components/ui/Skeleton.js b/mobile/components/ui/Skeleton.js
new file mode 100644
index 00000000..3c4d1e5b
--- /dev/null
+++ b/mobile/components/ui/Skeleton.js
@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  withSequence,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useTheme } from 'react-native-paper';
+
+const Skeleton = ({ width, height, borderRadius = 4, style }) => {
+  const theme = useTheme();
+  const opacity = useSharedValue(0.3);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.7, { duration: 1000 }),
+        withTiming(0.3, { duration: 1000 })
+      ),
+      -1,
+      true
+    );
+
+    return () => {
+      cancelAnimation(opacity);
+    };
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: theme.colors.surfaceVariant,
+        },
+        animatedStyle,
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  skeleton: {
+    overflow: 'hidden',
+  },
+});
+
+export default Skeleton;
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index c3452165..ada3faa0 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -21,7 +21,9 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
+        "react-native-gesture-handler": "~2.28.0",
         "react-native-paper": "^5.14.5",
+        "react-native-reanimated": "~4.1.1",
         "react-native-safe-area-context": "^5.4.0",
         "react-native-screens": "^4.11.1",
         "react-native-web": "^0.21.0"
@@ -58,12 +60,12 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -111,13 +113,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
-      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -469,12 +471,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
-      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.5"
+        "@babel/types": "^7.29.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1372,6 +1374,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.5.tgz",
@@ -1456,31 +1474,31 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
-      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.5",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -1507,9 +1525,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
-      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -1541,6 +1559,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/code-signing-certificates": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/@expo/code-signing-certificates/-/code-signing-certificates-0.0.5.tgz",
@@ -2911,6 +2941,522 @@
         "node": ">= 20.19.4"
       }
     },
+    "node_modules/@react-native/metro-babel-transformer": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.85.0.tgz",
+      "integrity": "sha512-Fao5MQFz2hr4UY09EbXxt8UAJJnQ64QvxNIgoTek24ObTDQ6SqY6MoOLaeV9HGic5sBAHX4lVV/WazhmYkQ1jQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@react-native/babel-preset": "0.85.0",
+        "hermes-parser": "0.33.3",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/@react-native/babel-plugin-codegen": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.85.0.tgz",
+      "integrity": "sha512-+b+kilQXUMEREXyFZxmSrnvUZ6rIW2ATu6pkMZLsituRUx85fg22A8Z+hKHXj7q9Hyny1W0+506gHoxYr6zevw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.0",
+        "@react-native/codegen": "0.85.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/@react-native/babel-preset": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.85.0.tgz",
+      "integrity": "sha512-xU3q7VeSiBGrT5n0cdtzWf/3NtQlw1C3rJXwOftbFPdbb8nvCpefOdSAKL2UKNHSvA3rcCkNqMeZEtjXRKjcCA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/plugin-proposal-export-default-from": "^7.24.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-default-from": "^7.24.7",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-transform-async-generator-functions": "^7.25.4",
+        "@babel/plugin-transform-async-to-generator": "^7.24.7",
+        "@babel/plugin-transform-block-scoping": "^7.25.0",
+        "@babel/plugin-transform-class-properties": "^7.25.4",
+        "@babel/plugin-transform-classes": "^7.25.4",
+        "@babel/plugin-transform-destructuring": "^7.24.8",
+        "@babel/plugin-transform-flow-strip-types": "^7.25.2",
+        "@babel/plugin-transform-for-of": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.8",
+        "@babel/plugin-transform-private-methods": "^7.24.7",
+        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+        "@babel/plugin-transform-react-display-name": "^7.24.7",
+        "@babel/plugin-transform-react-jsx": "^7.25.2",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@babel/plugin-transform-regenerator": "^7.24.7",
+        "@babel/plugin-transform-runtime": "^7.24.7",
+        "@babel/plugin-transform-typescript": "^7.25.2",
+        "@babel/plugin-transform-unicode-regex": "^7.24.7",
+        "@react-native/babel-plugin-codegen": "0.85.0",
+        "babel-plugin-syntax-hermes-parser": "0.33.3",
+        "babel-plugin-transform-flow-enums": "^0.0.2",
+        "react-refresh": "^0.14.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/@react-native/codegen": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.85.0.tgz",
+      "integrity": "sha512-5CHJkC9UpBxQokGju7gD6W615RO1zR17INuB1PB4kcXNy3rre7tyy6ufct+sllDD6ildRC9A//cyh6TI03+jxA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/parser": "^7.29.0",
+        "hermes-parser": "0.33.3",
+        "invariant": "^2.2.4",
+        "nullthrows": "^1.1.1",
+        "tinyglobby": "^0.2.15",
+        "yargs": "^17.6.2"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/babel-plugin-syntax-hermes-parser": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.33.3.tgz",
+      "integrity": "sha512-/Z9xYdaJ1lC0pT9do6TqCqhOSLfZ5Ot8D5za1p+feEfWYupCOfGbhhEXN9r2ZgJtDNUNRw/Z+T2CvAGKBqtqWA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hermes-parser": "0.33.3"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/hermes-estree": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.33.3.tgz",
+      "integrity": "sha512-6kzYZHCk8Fy1Uc+t3HGYyJn3OL4aeqKLTyina4UFtWl8I0kSL7OmKThaiX+Uh2f8nGw3mo4Ifxg0M5Zk3/Oeqg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/hermes-parser": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.33.3.tgz",
+      "integrity": "sha512-Yg3HgaG4CqgyowtYjX/FsnPAuZdHOqSMtnbpylbptsQ9nwwSKsy6uRWcGO5RK0EqiX12q8HvDWKgeAVajRO5DA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hermes-estree": "0.33.3"
+      }
+    },
+    "node_modules/@react-native/metro-config": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.85.0.tgz",
+      "integrity": "sha512-3L245HZo2F377BndO6WJD9qRZEnBOIG+uKcXvJirna8SzGxD7wvUjDJHHWvwZo4TXSP6aG/FOa/FAHhCYxjiBg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@react-native/js-polyfills": "0.85.0",
+        "@react-native/metro-babel-transformer": "0.85.0",
+        "metro-config": "^0.84.0",
+        "metro-runtime": "^0.84.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/@react-native/js-polyfills": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.85.0.tgz",
+      "integrity": "sha512-h2nfIqNEA72Ebdcq5scJg1kyZ01B9xI+NJ2AA8ZpGN8SbxOBNAiZtWEqxzAUe6v5Iu7LE3+1WFBWcMQGtT4zLQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-native/metro-config/node_modules/hermes-estree": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.33.3.tgz",
+      "integrity": "sha512-6kzYZHCk8Fy1Uc+t3HGYyJn3OL4aeqKLTyina4UFtWl8I0kSL7OmKThaiX+Uh2f8nGw3mo4Ifxg0M5Zk3/Oeqg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-native/metro-config/node_modules/hermes-parser": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.33.3.tgz",
+      "integrity": "sha512-Yg3HgaG4CqgyowtYjX/FsnPAuZdHOqSMtnbpylbptsQ9nwwSKsy6uRWcGO5RK0EqiX12q8HvDWKgeAVajRO5DA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hermes-estree": "0.33.3"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro/-/metro-0.84.2.tgz",
+      "integrity": "sha512-Qw7sl+e34cf/0LYEvDfVPiWvXmkvpuVgFqjzhPCc9Mw30NsvRFYZEH6I9zEHlpjugIveV+Jzdqt3YSPMU+Hx/w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/core": "^7.25.2",
+        "@babel/generator": "^7.29.1",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "accepts": "^2.0.0",
+        "chalk": "^4.0.0",
+        "ci-info": "^2.0.0",
+        "connect": "^3.6.5",
+        "debug": "^4.4.0",
+        "error-stack-parser": "^2.0.6",
+        "flow-enums-runtime": "^0.0.6",
+        "graceful-fs": "^4.2.4",
+        "hermes-parser": "0.33.3",
+        "image-size": "^1.0.2",
+        "invariant": "^2.2.4",
+        "jest-worker": "^29.7.0",
+        "jsc-safe-url": "^0.2.2",
+        "lodash.throttle": "^4.1.1",
+        "metro-babel-transformer": "0.84.2",
+        "metro-cache": "0.84.2",
+        "metro-cache-key": "0.84.2",
+        "metro-config": "0.84.2",
+        "metro-core": "0.84.2",
+        "metro-file-map": "0.84.2",
+        "metro-resolver": "0.84.2",
+        "metro-runtime": "0.84.2",
+        "metro-source-map": "0.84.2",
+        "metro-symbolicate": "0.84.2",
+        "metro-transform-plugins": "0.84.2",
+        "metro-transform-worker": "0.84.2",
+        "mime-types": "^3.0.1",
+        "nullthrows": "^1.1.1",
+        "serialize-error": "^2.1.0",
+        "source-map": "^0.5.6",
+        "throat": "^5.0.0",
+        "ws": "^7.5.10",
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "metro": "src/cli.js"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-babel-transformer": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.84.2.tgz",
+      "integrity": "sha512-UZqjh1VMRDm0WasifM0aN+JreCn3CW0BaPoZgDXb0xOMFSF9dKZJsKhcrpzkjL1+qwmHFYjlhGiQ+tvXdSx+OQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "flow-enums-runtime": "^0.0.6",
+        "hermes-parser": "0.33.3",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-cache": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.84.2.tgz",
+      "integrity": "sha512-jPX2fwOc/MmP2KRScSg2jFtVN9BTd+QN6j/3qZ+HIbEAsePLONozbKR2kCIBGvVeBTe7js48WXziI4+AdfwfFQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "exponential-backoff": "^3.1.1",
+        "flow-enums-runtime": "^0.0.6",
+        "https-proxy-agent": "^7.0.5",
+        "metro-core": "0.84.2"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-cache-key": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.84.2.tgz",
+      "integrity": "sha512-+yJxLYu5nhKp7jZD6wtx4dMoSqLzK6MeYVkjMaUgjuh2Lu8DwGrxRnbmIVnn5Z9AQOs/K4eOWmuD7N2p64UCMw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-config": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.84.2.tgz",
+      "integrity": "sha512-ze7IgJwLJoXoTxeXW86xqqKoxXjE0gZg5w8kW2mawaWLSfuvI0KgVaaERXgoVuWl+DQU2q22tIeAEdsCyUZvBQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "connect": "^3.6.5",
+        "flow-enums-runtime": "^0.0.6",
+        "jest-validate": "^29.7.0",
+        "metro": "0.84.2",
+        "metro-cache": "0.84.2",
+        "metro-core": "0.84.2",
+        "metro-runtime": "0.84.2",
+        "yaml": "^2.6.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-core": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.84.2.tgz",
+      "integrity": "sha512-s9Ko372nzfbu5Y2uhWDlB/g3E6mba3Es95QzF/8IwNM4ynZgqM9rfnU0PR54onGvDGDfj44jbooSxaA1D09rDA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6",
+        "lodash.throttle": "^4.1.1",
+        "metro-resolver": "0.84.2"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-file-map": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.84.2.tgz",
+      "integrity": "sha512-ZgX1lXO9YJCgTY6OSuwvRcHdhXjAFd1DdYC4g2B+d7yAtLUW1/OqwTLpW6ixl1zqZDDQSDSYZXDsN7DL2IumBw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.4.0",
+        "fb-watchman": "^2.0.0",
+        "flow-enums-runtime": "^0.0.6",
+        "graceful-fs": "^4.2.4",
+        "invariant": "^2.2.4",
+        "jest-worker": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "nullthrows": "^1.1.1",
+        "walker": "^1.0.7"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-minify-terser": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.84.2.tgz",
+      "integrity": "sha512-1TNGPN4oUose+XSHsdDUvcvPHQxKP5lZNbiS6UteTXX+6zFNu+IzxqSokyrDoj9BSjVbdClrB3okuI+Fpls3LA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6",
+        "terser": "^5.15.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-resolver": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.84.2.tgz",
+      "integrity": "sha512-2i6OQJIv18+olvLnmcM20uhi1T729+25izZozqOugSaV0YGzMV/EXkYFqxkXC9iNsantGcI/w9PgaI89wLK6JQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-runtime": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.84.2.tgz",
+      "integrity": "sha512-NzzORY2+mmN3tLhsZ7N4GDOBERusalyM1o1k36euulUIEe8UkDhwzcsRexvxKaSkrGLiRQ9PYDLp9uxPkQ+A0Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-source-map": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.84.2.tgz",
+      "integrity": "sha512-m6rRVBefzaAyn6dBk5GOabVchCQ3VIS1/MhCj61dJB5cqLOOx34BV3DRFwnDBkuPw2RR/LUoul0U1sixlS9VQg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "flow-enums-runtime": "^0.0.6",
+        "invariant": "^2.2.4",
+        "metro-symbolicate": "0.84.2",
+        "nullthrows": "^1.1.1",
+        "ob1": "0.84.2",
+        "source-map": "^0.5.6",
+        "vlq": "^1.0.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-symbolicate": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.84.2.tgz",
+      "integrity": "sha512-o0RY49012YcGE1E4GsZtgzFCBPeoxlASzIsD5CNOTmAoKDIroHfTFFiYCGPLCGwRwQjMaCChhoH0TZCjAyyCKA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6",
+        "invariant": "^2.2.4",
+        "metro-source-map": "0.84.2",
+        "nullthrows": "^1.1.1",
+        "source-map": "^0.5.6",
+        "vlq": "^1.0.0"
+      },
+      "bin": {
+        "metro-symbolicate": "src/index.js"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-transform-plugins": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.84.2.tgz",
+      "integrity": "sha512-/821YLQv4PgD1NOruzPkr0r3HDALXqwCEECewyEQZ5hmSb8jzf1VdEpf3F8fx8zI4/5dHY/rARDVVuHCEb/Xrg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/generator": "^7.29.1",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "flow-enums-runtime": "^0.0.6",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-transform-worker": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.84.2.tgz",
+      "integrity": "sha512-aR09svo3WC7OTYk5YB0VY0iSXOGrPdfmQWIxG8ADD2cKf/B95VR+y4GgVUbqB31buNvgtU+iCx9186i/YaNGlw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/generator": "^7.29.1",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "flow-enums-runtime": "^0.0.6",
+        "metro": "0.84.2",
+        "metro-babel-transformer": "0.84.2",
+        "metro-cache": "0.84.2",
+        "metro-cache-key": "0.84.2",
+        "metro-minify-terser": "0.84.2",
+        "metro-source-map": "0.84.2",
+        "metro-transform-plugins": "0.84.2",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/ob1": {
+      "version": "0.84.2",
+      "resolved": "https://registry.npmjs.org/ob1/-/ob1-0.84.2.tgz",
+      "integrity": "sha512-JID0ti8tDRQZJdQ3l+UeVAsKP+dW5Ucmktes/J9FwqP5KarafoTMqWvw4LRKrMtA7yWT3r/+E2w5wapd89GToA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
     "node_modules/@react-native/normalize-colors": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.81.5.tgz",
@@ -3099,6 +3645,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -4848,6 +5400,24 @@
         "asap": "~2.0.3"
       }
     },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -7439,10 +8009,25 @@
         }
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz",
+      "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
-      "integrity": "sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.3.1.tgz",
+      "integrity": "sha512-NIXU/iT5+ORyCc7p0z2nnlkouYKX425vuU1OEm6bMMtWWR9yvb+Xg5AZmImTKoF9abxCPqrKC3rOZsKzUYgYZA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*",
@@ -7494,6 +8079,33 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "license": "MIT"
     },
+    "node_modules/react-native-reanimated": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.7.tgz",
+      "integrity": "sha512-Q4H6xA3Tn7QL0/E/KjI86I1KK4tcf+ErRE04LH34Etka2oVQhW6oXQ+Q8ZcDCVxiWp5vgbBH6XcH8BOo4w/Rhg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-native-is-edge-to-edge": "^1.2.1",
+        "semver": "^7.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "0.78 - 0.82",
+        "react-native-worklets": "0.5 - 0.8"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz",
@@ -7549,6 +8161,45 @@
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
+    "node_modules/react-native-worklets": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.8.1.tgz",
+      "integrity": "sha512-oWP/lStsAHU6oYCaWDXrda/wOHVdhusQJz1e6x9gPnXdFf4ndNDAOtWCmk2zGrAnlapfyA3rM6PCQq94mPg9cw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "^7.27.1",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-classes": "^7.28.4",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+        "@babel/plugin-transform-optional-chaining": "^7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
+        "@babel/plugin-transform-template-literals": "^7.27.1",
+        "@babel/plugin-transform-unicode-regex": "^7.27.1",
+        "@babel/preset-typescript": "^7.27.1",
+        "convert-source-map": "^2.0.0",
+        "semver": "^7.7.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "@react-native/metro-config": "*",
+        "react": "*",
+        "react-native": "0.81 - 0.85"
+      }
+    },
+    "node_modules/react-native-worklets/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/virtualized-lists": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.81.5.tgz",
@@ -8659,6 +9310,36 @@
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/mobile/package.json b/mobile/package.json
index a425a9c1..f8d75457 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -22,7 +22,9 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-paper": "^5.14.5",
+    "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-screens": "^4.11.1",
     "react-native-web": "^0.21.0"
diff --git a/mobile/screens/HomeScreen.js b/mobile/screens/HomeScreen.js
index d2f3c383..e8c2320a 100644
--- a/mobile/screens/HomeScreen.js
+++ b/mobile/screens/HomeScreen.js
@@ -13,6 +13,7 @@ import {
 import HapticButton from '../components/ui/HapticButton';
 import HapticCard from '../components/ui/HapticCard';
 import { HapticAppbarAction } from '../components/ui/HapticAppbar';
+import GroupListSkeleton from '../components/skeletons/GroupListSkeleton';
 import * as Haptics from "expo-haptics";
 import { createGroup, getGroups, getOptimizedSettlements } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
@@ -257,9 +258,7 @@ const HomeScreen = ({ navigation }) => {
       </Appbar.Header>
 
       {isLoading ? (
-        <View style={styles.loaderContainer}>
-          <ActivityIndicator size="large" />
-        </View>
+        <GroupListSkeleton />
       ) : (
         <FlatList
           data={groups}