fix: reduce INP latency for receipt image interactions

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -38,6 +38,7 @@ import {Str} from 'expensify-common';
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 
+import deferReceiptNavigation from './deferReceiptNavigation';
 import ReceiptPDFOverlay from './ReceiptPDFOverlay';
 
 type ReportActionItemImageProps = {
@@ -141,6 +142,18 @@ function ReportActionItemImage({
     // While the receipt is regenerating its stored URL is stale, so draw the live route from `routes.coordinates`
     // (via `ConfirmedRoute`) instead of loading the now-404'd image.
     const showMapAsImage = isMapDistanceRequest && (hasErrors || hasPendingDistanceReceiptRegeneration(transaction));
+    const navigateToReceipt = () => {
+        deferReceiptNavigation(() => {
+            Navigation.navigate(
+                ROUTES.TRANSACTION_RECEIPT.getRoute(
+                    transactionThreadReport?.reportID ?? contextReport?.reportID ?? reportProp?.reportID ?? getReportIDForExpense(transaction),
+                    transaction?.transactionID,
+                    readonly,
+                    mergeTransactionID,
+                ),
+            );
+        });
+    };
 
     if (showMapAsImage) {
         return (
@@ -236,16 +249,7 @@ function ReportActionItemImage({
         return (
             <PressableWithoutFocus
                 style={[styles.w100, styles.h100, styles.noOutline as ViewStyle]}
-                onPress={() =>
-                    Navigation.navigate(
-                        ROUTES.TRANSACTION_RECEIPT.getRoute(
-                            transactionThreadReport?.reportID ?? contextReport?.reportID ?? reportProp?.reportID ?? getReportIDForExpense(transaction),
-                            transaction?.transactionID,
-                            readonly,
-                            mergeTransactionID,
-                        ),
-                    )
-                }
+                onPress={navigateToReceipt}
                 accessibilityLabel={translate('accessibilityHints.viewAttachment')}
                 accessibilityRole={CONST.ROLE.BUTTON}
                 sentryLabel={CONST.SENTRY_LABEL.RECEIPT.IMAGE}

src/components/ReportActionItem/deferReceiptNavigation.ts

@@ -0,0 +1,5 @@
+function deferReceiptNavigation(navigate: () => void) {
+    navigate();
+}
+
+export default deferReceiptNavigation;

src/components/ReportActionItem/deferReceiptNavigation.web.ts

@@ -0,0 +1,7 @@
+function deferReceiptNavigation(navigate: () => void) {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(navigate);
+    });
+}
+
+export default deferReceiptNavigation;