diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 95cda7c2f5c9..a7a2f35a2ccc 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -16,6 +16,7 @@ import * as Illustrations from '../../Icon/Illustrations'; import variables from '../../../styles/variables'; import compose from '../../../libs/compose'; import withLocalize from '../../withLocalize'; +import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, setDownloadButtonVisibility, translate}) { const pagerRef = useRef(null); @@ -27,13 +28,25 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, const [isPinchGestureRunning, setIsPinchGestureRunning] = useState(true); const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows(); + const compareImage = useCallback( + (attachment) => { + if (attachment.isReceipt) { + const action = ReportActionsUtils.getParentReportAction(report); + const transactionID = _.get(action, ['originalMessage', 'IOUTransactionID']); + return attachment.transactionID === transactionID; + } + return attachment.source === source; + }, + [source, report], + ); + useEffect(() => { const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions); - const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source); + const initialPage = _.findIndex(attachmentsFromReport, compareImage); // Dismiss the modal when deleting an attachment during its display in preview. - if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) { + if (initialPage === -1 && _.find(attachments, compareImage)) { Navigation.dismissModal(); } else { setPage(initialPage); @@ -46,7 +59,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, if (!_.isUndefined(attachmentsFromReport[initialPage])) onNavigate(attachmentsFromReport[initialPage]); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [report, reportActions, source]); + }, [reportActions, compareImage]); /** * Updates the page state when the user navigates between attachments