From 883b1a63b2d1e23b9fb2a9e409999fa5674f550d Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Thu, 27 Nov 2025 13:24:54 +0500
Subject: [PATCH] mobile: improve animation for fluid panels

---
 apps/mobile/app/components/fluid-panels/index.tsx  | 9 +++------
 apps/mobile/app/components/side-menu/menu-item.tsx | 8 ++++----
 apps/mobile/app/components/ui/sheet/index.jsx      | 2 +-
 apps/mobile/app/utils/menu-items.ts                | 4 +++-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/mobile/app/components/fluid-panels/index.tsx b/apps/mobile/app/components/fluid-panels/index.tsx
index 139fd4c71..426654fc3 100644
--- a/apps/mobile/app/components/fluid-panels/index.tsx
+++ b/apps/mobile/app/components/fluid-panels/index.tsx
@@ -31,6 +31,7 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
   SharedValue,
+  SnappySpringConfig,
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
@@ -354,13 +355,9 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       const finalValue = isSwipeLeft
         ? translateX.value - velocityX / 40.0
         : translateX.value + velocityX / 40.0;
-
       const animationConfig: WithSpringConfig = {
-        velocity: velocityX,
-        mass: 0.5,
-        overshootClamping: true,
-        damping: 800,
-        stiffness: 800
+        velocity: velocityX / 10,
+        ...SnappySpringConfig
       };
 
       if (finalValue < homePosition) {
diff --git a/apps/mobile/app/components/side-menu/menu-item.tsx b/apps/mobile/app/components/side-menu/menu-item.tsx
index 5415420c7..974476ffc 100644
--- a/apps/mobile/app/components/side-menu/menu-item.tsx
+++ b/apps/mobile/app/components/side-menu/menu-item.tsx
@@ -110,9 +110,9 @@ function _MenuItem({
         canGoBack: false
       });
     }
-    setImmediate(() => {
+    setTimeout(() => {
       Navigation.closeDrawer();
-    });
+    }, 32);
   };
 
   return (
@@ -154,8 +154,8 @@ function _MenuItem({
               item.icon === "crown"
                 ? colors.static.yellow
                 : isFocused
-                ? colors.selected.icon
-                : colors.secondary.icon
+                  ? colors.selected.icon
+                  : colors.secondary.icon
             }
             size={AppFontSize.md}
           />
diff --git a/apps/mobile/app/components/ui/sheet/index.jsx b/apps/mobile/app/components/ui/sheet/index.jsx
index e40431823..e1cb54a72 100644
--- a/apps/mobile/app/components/ui/sheet/index.jsx
+++ b/apps/mobile/app/components/ui/sheet/index.jsx
@@ -42,7 +42,7 @@ const SheetWrapper = ({
   closeOnTouchBackdrop = true,
   onHasReachedTop,
   overlay,
-  overlayOpacity = 0.3,
+  overlayOpacity = 0.7,
   enableGesturesInScrollView = false,
   bottomPadding = true,
   keyboardHandlerDisabled
diff --git a/apps/mobile/app/utils/menu-items.ts b/apps/mobile/app/utils/menu-items.ts
index 4fde4d932..1bb28c82e 100644
--- a/apps/mobile/app/utils/menu-items.ts
+++ b/apps/mobile/app/utils/menu-items.ts
@@ -72,8 +72,10 @@ export const MenuItemsList: SideMenuItem[] = [
     title: "Monographs",
     icon: "text-box-multiple-outline",
     onPress: () => {
-      Navigation.closeDrawer();
       Monographs.navigate();
+      setTimeout(() => {
+        Navigation.closeDrawer();
+      }, 32);
     },
     type: "side-menu-item"
   },