Merge pull request #89238 from Expensify/cherry-pick-staging-89212-25142234194-1

🍒 Cherry pick PR #89212 to staging 🍒

Author: lakchote

Mobile-Expensify

@@ -111,8 +111,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009036422
-        versionName "9.3.64-22"
+        versionCode 1009036423
+        versionName "9.3.64-23"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

android/app/build.gradle

@@ -44,7 +44,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.3.64.22</string>
+	<string>9.3.64.23</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NewExpensify/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.3.64</string>
 	<key>CFBundleVersion</key>
-	<string>9.3.64.22</string>
+	<string>9.3.64.23</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.3.64</string>
 	<key>CFBundleVersion</key>
-	<string>9.3.64.22</string>
+	<string>9.3.64.23</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionAttributes</key>

ios/ShareViewController/Info.plist

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.3.64-22",
+  "version": "9.3.64-23",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

package-lock.json

@@ -4,6 +4,8 @@ import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} fr
 import type {EmitterSubscription, GestureResponderEvent, NativeTouchEvent, View} from 'react-native';
 import {DeviceEventEmitter, Dimensions, InteractionManager} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import {cancelAnimation, useSharedValue, withTiming} from 'react-native-reanimated';
+import {scheduleOnRN} from 'react-native-worklets';
 import {Actions, useActionSheetAwareScrollViewActions} from '@components/ActionSheetAwareScrollView';
 import ConfirmModal from '@components/ConfirmModal';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
@@ -77,6 +79,8 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro
     const {email, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
 
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
+    // UI-thread timer driving the delayed hide. https://github.com/Expensify/App/issues/89069
+    const hideDelayProgress = useSharedValue(0);
     const [isDeleteCommentConfirmModalVisible, setIsDeleteCommentConfirmModalVisible] = useState(false);
     const [shouldSetModalVisibilityForDeleteConfirmation, setShouldSetModalVisibilityForDeleteConfirmation] = useState(true);
 
@@ -183,6 +187,7 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro
      * @param isUnreadChat - Flag to check if the chat is unread in the LHN. Used for the Mark as Read/Unread action
      */
     const showContextMenu: ReportActionContextMenu['showContextMenu'] = (showContextMenuParams) => {
+        cancelAnimation(hideDelayProgress);
         const {
             type,
             event,
@@ -295,13 +300,7 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro
      * Hide the ReportActionContextMenu modal popover.
      * @param onHideActionCallback Callback to be called after popover is completely hidden
      */
-    const hideContextMenu: ReportActionContextMenu['hideContextMenu'] = (hideContextMenuParams) => {
-        const {callbacks = {}} = hideContextMenuParams ?? {};
-
-        if (typeof callbacks.onHide === 'function') {
-            onPopoverHideActionCallback.current = callbacks.onHide;
-        }
-
+    const performHide = () => {
         selectionRef.current = '';
         reportActionDraftMessageRef.current = undefined;
         setIsPopoverVisible(false);
@@ -315,6 +314,33 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro
         });
     };
 
+    const hideContextMenu: ReportActionContextMenu['hideContextMenu'] = (hideContextMenuParams) => {
+        const {callbacks = {}, hideDelayMs} = hideContextMenuParams ?? {};
+
+        if (typeof callbacks.onHide === 'function') {
+            onPopoverHideActionCallback.current = callbacks.onHide;
+        }
+
+        cancelAnimation(hideDelayProgress);
+
+        if (!hideDelayMs || hideDelayMs <= 0) {
+            performHide();
+            return;
+        }
+
+        // UI-thread delayed hide. https://github.com/Expensify/App/issues/89069
+        hideDelayProgress.set(0);
+        hideDelayProgress.set(
+            withTiming(1, {duration: hideDelayMs}, (finished) => {
+                'worklet';
+
+                if (finished) {
+                    scheduleOnRN(performHide);
+                }
+            }),
+        );
+    };
+
     const transactionIDs: string[] = [];
     if (isMoneyRequestAction(reportActionRef.current)) {
         const originalMessage = getOriginalMessage(reportActionRef.current);

package.json

@@ -52,6 +52,9 @@ type HideContextMenuParams = {
     callbacks?: {
         onHide?: () => void;
     };
+    /** Delay before hiding (ms). Run on the UI thread via Reanimated.
+     *  https://github.com/Expensify/App/issues/89069 */
+    hideDelayMs?: number;
 };
 type HideContextMenu = (params?: HideContextMenuParams) => void;
 
@@ -71,9 +74,11 @@ type ReportActionContextMenu = {
 
 const contextMenuRef = React.createRef<ReportActionContextMenu>();
 
+// How long the success icon (Checkmark / "Copied!") stays visible before the menu hides.
+const SUCCESS_STATE_HIDE_DELAY_MS = 800;
+
 /**
  * Hide the ReportActionContextMenu modal popover.
- * Hides the popover menu with an optional delay
  * @param [shouldDelay] - whether the menu should close after a delay
  * @param [onHideCallback] - Callback to be called after Context Menu is completely hidden
  */
@@ -82,30 +87,14 @@ function hideContextMenu(shouldDelay?: boolean, onHideCallback = () => {}, param
         return;
     }
 
-    const paramsWithCallback = {
+    contextMenuRef.current.hideContextMenu({
+        ...params,
         callbacks: {
             ...params?.callbacks,
             onHide: onHideCallback,
         },
-        ...params,
-    };
-
-    if (!shouldDelay) {
-        contextMenuRef.current.hideContextMenu(paramsWithCallback);
-        return;
-    }
-
-    // Save the active instanceID for which hide action was called.
-    // If menu is being closed with a delay, check that whether the same instance exists or a new was created.
-    // If instance is not same, cancel the hide action
-    const instanceID = contextMenuRef.current.instanceIDRef.current;
-    setTimeout(() => {
-        if (contextMenuRef.current?.instanceIDRef.current !== instanceID) {
-            return;
-        }
-
-        contextMenuRef.current.hideContextMenu(paramsWithCallback);
-    }, 800);
+        ...(shouldDelay ? {hideDelayMs: SUCCESS_STATE_HIDE_DELAY_MS} : {}),
+    });
 }
 
 /**