From 19ff17205e59020fd58da766e2b5cad739c2ee8a Mon Sep 17 00:00:00 2001 From: Nabi Date: Tue, 14 Jul 2026 20:49:56 +0430 Subject: [PATCH 1/2] fix: improve receipt image interaction responsiveness --- .../ReportActionItemImage.tsx | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index a001798ac52e..8e7a2d1d696f 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -10,6 +10,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {hasHoverSupport} from '@libs/DeviceCapabilities'; +import getPlatform from '@libs/getPlatform'; import {getReportIDForExpense} from '@libs/MergeTransactionUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils'; @@ -35,7 +36,7 @@ import type {ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {Str} from 'expensify-common'; -import React from 'react'; +import React, {useCallback} from 'react'; import {StyleSheet, View} from 'react-native'; import ReceiptPDFOverlay from './ReceiptPDFOverlay'; @@ -141,6 +142,27 @@ 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 = useCallback(() => { + const navigate = () => { + Navigation.navigate( + ROUTES.TRANSACTION_RECEIPT.getRoute( + transactionThreadReport?.reportID ?? contextReport?.reportID ?? reportProp?.reportID ?? getReportIDForExpense(transaction), + transaction?.transactionID, + readonly, + mergeTransactionID, + ), + ); + }; + + if (getPlatform() !== CONST.PLATFORM.WEB) { + navigate(); + return; + } + + requestAnimationFrame(() => { + requestAnimationFrame(navigate); + }); + }, [contextReport?.reportID, mergeTransactionID, readonly, reportProp?.reportID, transaction, transactionThreadReport?.reportID]); if (showMapAsImage) { return ( @@ -236,16 +258,7 @@ function ReportActionItemImage({ return ( - 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} From 74d322466c31fcaede0442b1075dd2ad647dbbd4 Mon Sep 17 00:00:00 2001 From: Nabi Date: Wed, 15 Jul 2026 20:08:27 +0430 Subject: [PATCH 2/2] Fix receipt image navigation deferral on web --- .../ReportActionItemImage.tsx | 19 +++++-------------- .../deferReceiptNavigation.ts | 5 +++++ .../deferReceiptNavigation.web.ts | 7 +++++++ 3 files changed, 17 insertions(+), 14 deletions(-) create mode 100644 src/components/ReportActionItem/deferReceiptNavigation.ts create mode 100644 src/components/ReportActionItem/deferReceiptNavigation.web.ts diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 8e7a2d1d696f..8d9d6a7a4a0a 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -10,7 +10,6 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {hasHoverSupport} from '@libs/DeviceCapabilities'; -import getPlatform from '@libs/getPlatform'; import {getReportIDForExpense} from '@libs/MergeTransactionUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils'; @@ -36,9 +35,10 @@ import type {ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {Str} from 'expensify-common'; -import React, {useCallback} from 'react'; +import React from 'react'; import {StyleSheet, View} from 'react-native'; +import deferReceiptNavigation from './deferReceiptNavigation'; import ReceiptPDFOverlay from './ReceiptPDFOverlay'; type ReportActionItemImageProps = { @@ -142,8 +142,8 @@ 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 = useCallback(() => { - const navigate = () => { + const navigateToReceipt = () => { + deferReceiptNavigation(() => { Navigation.navigate( ROUTES.TRANSACTION_RECEIPT.getRoute( transactionThreadReport?.reportID ?? contextReport?.reportID ?? reportProp?.reportID ?? getReportIDForExpense(transaction), @@ -152,17 +152,8 @@ function ReportActionItemImage({ mergeTransactionID, ), ); - }; - - if (getPlatform() !== CONST.PLATFORM.WEB) { - navigate(); - return; - } - - requestAnimationFrame(() => { - requestAnimationFrame(navigate); }); - }, [contextReport?.reportID, mergeTransactionID, readonly, reportProp?.reportID, transaction, transactionThreadReport?.reportID]); + }; if (showMapAsImage) { return ( diff --git a/src/components/ReportActionItem/deferReceiptNavigation.ts b/src/components/ReportActionItem/deferReceiptNavigation.ts new file mode 100644 index 000000000000..58bc2f69a11f --- /dev/null +++ b/src/components/ReportActionItem/deferReceiptNavigation.ts @@ -0,0 +1,5 @@ +function deferReceiptNavigation(navigate: () => void) { + navigate(); +} + +export default deferReceiptNavigation; diff --git a/src/components/ReportActionItem/deferReceiptNavigation.web.ts b/src/components/ReportActionItem/deferReceiptNavigation.web.ts new file mode 100644 index 000000000000..9e0ec5b4ff75 --- /dev/null +++ b/src/components/ReportActionItem/deferReceiptNavigation.web.ts @@ -0,0 +1,7 @@ +function deferReceiptNavigation(navigate: () => void) { + requestAnimationFrame(() => { + requestAnimationFrame(navigate); + }); +} + +export default deferReceiptNavigation;