[Awaiting payment 2026-02-02][$250] Expense - Wrong receipt/image gets deleted in multiple scan flow

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.99-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #79076
Email or phone of affected tester (no customers): kiatest.78+ck19261@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 16/iOS 18.7.1
App Component: Money Requests

Action Performed:

1. Launch Hybrid app
2. Click FAB > Scan > Enable multiple scan
3. Capture multiple receipts or images (around 3-4)
4. Click on the last receipt preview
5. Click left navigation arrow to open 3rd receipt
6. Click on the delete icon >> delete
7. Observe last receipt/image (4th one) gets deleted
8. Repeat steps 4-6 selecting 2nd receipt and observe 3rd gets deleted

Expected Result:

Selected receipt/image should get deleted

Actual Result:

Wrong receipt/image gets deleted in multiple scan flow. When deleting 3rd receipt, 4th receipt is deleted & same happens when deleting 1st receipt, 2nd receipt is deleted

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022010864997429907385
• Upwork Job ID: 2010864997429907385
• Last Price Increase: 2026-01-13
• Automatic offers:
• MobileMage | Contributor | 110256791

Issue Owner

Current Issue Owner: @rlinoz

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the Money Requests multi-scan flow, when viewing a receipt preview and navigating between captured receipts, pressing the delete icon removes the wrong receipt. For example, opening the 4th receipt, navigating left to the 3rd, and choosing delete removes the 4th; similarly deleting the 1st removes the 2nd. The selected (currently viewed) receipt should be deleted.

What is the root cause of that problem?

The ReceiptView screen initializes currentReceipt based on the route’s transactionID and sets a page index for the AttachmentCarouselView. However, when a user navigates within the carousel (left/right arrows), the page changes but currentReceipt does not update to reflect the newly viewed item. The delete handler uses currentReceipt.transactionID, so it deletes the originally opened receipt rather than the currently viewed one.

What changes do you think we should make in order to solve the problem?

Keep currentReceipt synchronized with the carousel’s page so the delete action targets the receipt currently visible:

• Update ReceiptView to set currentReceipt whenever page changes (and receipts[page] exists).
• This ensures UI elements (attachmentID, source) and the delete handler operate on the correct, currently viewed receipt.

    useEffect(() => {
        if (page >= 0 && receipts?.[page]) {
            setCurrentReceipt(receipts[page]);
        }
    }, [page, receipts]);

bellow here

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 52 to 62 in 9bc39b5

	useEffect(() => {
	if (!receipts || receipts.length === 0) {
	return;
	}
	const activeReceipt = receipts.find((receipt) => receipt.transactionID === route?.params?.transactionID);
	const activeReceiptIndex = receipts.findIndex((receipt) => receipt.transactionID === activeReceipt?.transactionID);
	setCurrentReceipt(activeReceipt);
	setPage(activeReceiptIndex);
	}, [receipts, route?.params?.transactionID]);

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[MobileMage]

Please re-state the problem that we are trying to solve in this issue.

In the Money Requests multi-scan flow, when a user views a receipt in the carousel and navigates between receipts using the left/right arrows, pressing the delete button removes the wrong receipt.

Reproduction steps:

1. FAB → Scan → Enable multiple scan
2. Capture 4 receipts
3. Tap on the last receipt preview (4th) to open fullscreen view
4. Click the left navigation arrow to view the 3rd receipt
5. Click delete → The 4th receipt is deleted instead of the 3rd

The selected/currently viewed receipt should be deleted, but instead the originally opened receipt is deleted.

What is the root cause of that problem?

The ReceiptView component maintains two pieces of state that should stay in sync but don't:

1. page - the current carousel index, updated when user navigates via arrows
2. currentReceipt - the receipt object used for deletion

The problem is that currentReceipt is stored as React state and only initialized in a useEffect that depends on route.params.transactionID:

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 42 to 43 in 9bc39b5

	const [currentReceipt, setCurrentReceipt] = useState<ReceiptWithTransactionIDAndSource | null>();
	const [page, setPage] = useState<number>(-1);

const [currentReceipt, setCurrentReceipt] = useState<ReceiptWithTransactionIDAndSource | null>();
const [page, setPage] = useState<number>(-1);

The useEffect sets both currentReceipt and page based on the route's transactionID:

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 52 to 62 in 9bc39b5

	useEffect(() => {
	if (!receipts || receipts.length === 0) {
	return;
	}
	const activeReceipt = receipts.find((receipt) => receipt.transactionID === route?.params?.transactionID);
	const activeReceiptIndex = receipts.findIndex((receipt) => receipt.transactionID === activeReceipt?.transactionID);
	setCurrentReceipt(activeReceipt);
	setPage(activeReceiptIndex);
	}, [receipts, route?.params?.transactionID]);

useEffect(() => {
    // ...
    const activeReceipt = receipts.find((receipt) => receipt.transactionID === route?.params?.transactionID);
    const activeReceiptIndex = receipts.findIndex((receipt) => receipt.transactionID === activeReceipt?.transactionID);

    setCurrentReceipt(activeReceipt);  // Only set here!
    setPage(activeReceiptIndex);
}, [receipts, route?.params?.transactionID]);

When the user navigates using carousel arrows, the AttachmentCarouselView component calls setPage to update the page index:

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 129 to 130 in 9bc39b5

	page={page}
	setPage={setPage}

page={page}
setPage={setPage}

However, currentReceipt is never updated when page changes. The useEffect only runs when route.params.transactionID changes, which doesn't happen during carousel navigation.

The delete handler uses currentReceipt.transactionID:

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 64 to 84 in 9bc39b5

	const handleDeleteReceipt = useCallback(() => {
	if (!currentReceipt) {
	return;
	}
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	if (currentReceipt.transactionID === CONST.IOU.OPTIMISTIC_TRANSACTION_ID) {
	if (receipts.length === 1) {
	removeTransactionReceipt(currentReceipt.transactionID);
	return;
	}
	replaceDefaultDraftTransaction(secondTransactionID ? secondTransaction : undefined);
	return;
	}
	removeDraftTransaction(currentReceipt.transactionID);
	});
	Navigation.goBack();
	}, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);

const handleDeleteReceipt = useCallback(() => {
    // ...
    removeDraftTransaction(currentReceipt.transactionID);  // Uses stale currentReceipt!
    // ...
}, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);

Result: When viewing receipt #3 (page=2) but currentReceipt still points to receipt #4 (from initial load), the delete action removes receipt #4.

What changes do you think we should make in order to solve the problem?

Instead of storing currentReceipt as state that needs to be synchronized with page, derive it directly from page:

// Before: state that can get out of sync with page
const [currentReceipt, setCurrentReceipt] = useState<ReceiptWithTransactionIDAndSource | null>();

// After: derived value, always in sync by definition
const currentReceipt = page >= 0 ? receipts[page] : undefined;

This approach:

1. Eliminates the sync problem entirely - currentReceipt is always the receipt at the current page index by definition
2. Simplifies the code - removes the need for setCurrentReceipt and the sync logic
3. Is more idiomatic React - deriving values from state rather than duplicating state
4. Reduces the initial useEffect - it only needs to set page based on route.params.transactionID

Full change:

function ReceiptView({route}: ReceiptViewProps) {
    // ...
-   const [currentReceipt, setCurrentReceipt] = useState<ReceiptWithTransactionIDAndSource | null>();
    const [page, setPage] = useState<number>(-1);
    // ...

    const [receipts = getEmptyArray<ReceiptWithTransactionIDAndSource>()] = useOnyx(/* ... */);

+   // Derive currentReceipt from page - always in sync with carousel position
+   const currentReceipt = page >= 0 ? receipts[page] : undefined;

    // ...

+   // Set initial page based on route transactionID
    useEffect(() => {
        if (!receipts || receipts.length === 0) {
            return;
        }

-       const activeReceipt = receipts.find((receipt) => receipt.transactionID === route?.params?.transactionID);
-       const activeReceiptIndex = receipts.findIndex((receipt) => receipt.transactionID === activeReceipt?.transactionID);
-
-       setCurrentReceipt(activeReceipt);
-       setPage(activeReceiptIndex);
+       const activeReceiptIndex = receipts.findIndex((receipt) => receipt.transactionID === route?.params?.transactionID);
+       setPage(activeReceiptIndex);
    }, [receipts, route?.params?.transactionID]);

What alternative solutions did you explore?

An alternative would be adding a useEffect to sync currentReceipt when page changes. I chose the derived approach because currentReceipt is conceptually just "the receipt at the current page" - storing it separately as state duplicates information that can be computed. Deriving it keeps the code simpler and avoids the sync entirely.

[paulnjs]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• When using the multi-scan flow, deleting a receipt deletes the wrong image. For example, deleting the 3rd receipt actually deletes the 4th, and deleting the 1st deletes the 2nd.

What is the root cause of that problem?

• The issue stems from always deleting the currentReceipt, which is only initialized once:

  • App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

    Line 60 in 9bc39b5

    setCurrentReceipt(activeReceipt);

• The value of currentReceipt does not update as the user navigates between receipts using the narrow component. This desynchronization leads to the wrong receipt being deleted.

What changes do you think we should make in order to solve the problem?

• Since currentReceipt is derived from route?.params?.transactionID, we should update the transactionID route param each time the user navigates to a different receipt.
• This can be done by adding the following effect:

useEffect(() => {
    if (receipts[page]) {
        Navigation.setParams({transactionID: receipts[page]?.transactionID});
    }
}, [page]);

• This change not only fixes the bug but also ensures that the transactionID route parameter stays in sync with the currently viewed receipt. This is particularly helpful when handling deep links. For example, if the user clicks on the last receipt preview in step 4, then uses the left navigation arrow to view the 3rd receipt, and refreshes the page, the app will correctly display the 3rd receipt instead of reverting to the 4th.

What alternative solutions did you explore? (Optional)

• Another option is to call Navigation.setParams({transactionID: item.transactionID}) inside the onNavigate function used for moving between receipts:

  • App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

    Line 126 in 9bc39b5

    <AttachmentCarouselView

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022010864997429907385

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)

[KocaPepsi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a user scans multiple receipts in the multiple scan flow and then navigates between receipts using the left/right arrows, clicking the delete button deletes the wrong receipt - specifically, it deletes the receipt that was initially selected rather than the currently visible receipt.

What is the root cause of that problem?

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 64 to 84 in ace6b0d

	const handleDeleteReceipt = useCallback(() => {
	if (!currentReceipt) {
	return;
	}
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	if (currentReceipt.transactionID === CONST.IOU.OPTIMISTIC_TRANSACTION_ID) {
	if (receipts.length === 1) {
	removeTransactionReceipt(currentReceipt.transactionID);
	return;
	}
	replaceDefaultDraftTransaction(secondTransactionID ? secondTransaction : undefined);
	return;
	}
	removeDraftTransaction(currentReceipt.transactionID);
	});
	Navigation.goBack();
	}, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);

the handleDeleteReceipt function uses currentReceipt state to determine which receipt to delete:

const handleDeleteReceipt = useCallback(() => {
    if (!currentReceipt) {
        return;
    }
    // ... deletion logic using currentReceipt.transactionID
}, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);

The problem:

• currentReceipt is set only once when the component mounts, based on the route.params.transactionID
• When the user navigates between receipts using the left/right arrows, only the page state is updated (via setPage), but currentReceipt remains unchanged
• The delete button uses currentReceipt instead of receipts[page] (the receipt at the current page index)

What changes do you think we should make in order to solve the problem?

We changed the logic in src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx to use receipts.at(page) instead of currentReceipt for deletion.

App/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

Lines 64 to 84 in ace6b0d

	const handleDeleteReceipt = useCallback(() => {
	if (!currentReceipt) {
	return;
	}
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	if (currentReceipt.transactionID === CONST.IOU.OPTIMISTIC_TRANSACTION_ID) {
	if (receipts.length === 1) {
	removeTransactionReceipt(currentReceipt.transactionID);
	return;
	}
	replaceDefaultDraftTransaction(secondTransactionID ? secondTransaction : undefined);
	return;
	}
	removeDraftTransaction(currentReceipt.transactionID);
	});
	Navigation.goBack();
	}, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);

Changes:

Before:

const handleDeleteReceipt = useCallback(() => {
    if (!currentReceipt) {
        return;
    }
    // ... deletion logic using currentReceipt.transactionID
}, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);

After:

const handleDeleteReceipt = useCallback(() => {
    if (page < 0 || page >= receipts.length) {
        return;
    }

    const receiptToDelete = receipts.at(page);
    if (!receiptToDelete) {
        return;
    }
    // ... deletion logic using receiptToDelete.transactionID
}, [page, receipts, receipts.length, secondTransaction, secondTransactionID]);

Why this works:

• receipts[page] always returns the currently visible receipt since page is updated whenever the user navigates with arrows
• This ensures the delete operation targets the receipt the user is actually viewing, not the one they initially selected
• The dependency array includes page and receipts so the callback is updated when navigation occurs

What alternative solutions did you explore? (Optional)

Demo:

1_1.mp4