diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index a001798ac52e..8d9d6a7a4a0a 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/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 ( - 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} 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;