Improve image replacement in odometer flow

[Julesssss]

Bug spotted from @DylanDylann :

When clicking "Replace," the app navigates to the odometer distance page and then to the odometer image page. I think we should open the picker directly instead of navigating the user back to the odometer image page.

565304689-e74a9283-6abb-4c40-b64b-01f556ebe842.mov

[wildan-m]

Proposal

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

When clicking "Replace" on an odometer image, the app dismisses the modal, briefly shows the odometer distance page, then navigates to the full odometer image capture page. This creates unnecessary intermediate navigation. We should open the image picker directly instead.

What is the root cause of that problem?

The Replace button's onPress handler in TransactionReceiptModalContent treats odometer images the same way as regular receipts — it calls Navigation.dismissModal() then navigates to the full ODOMETER_IMAGE capture page:

App/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx

Lines 544 to 567 in 7053fde

	{(shouldShowReplaceReceiptButton || isOdometerImage) && (
	<Button
	icon={expensifyIcons.Camera}
	onPress={() => {
	const getDestinationRoute = () => {
	return isOdometerImage
	? ROUTES.ODOMETER_IMAGE.getRoute(action ?? CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, imageType, isEditingConfirmation, backToReport)
	: ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
	action ?? CONST.IOU.ACTION.EDIT,
	iouType,
	draftTransactionID ?? transaction?.transactionID,
	report?.reportID,
	Navigation.getActiveRoute(),
	);
	};
	Navigation.dismissModal({
	afterTransition: () => Navigation.navigate(getDestinationRoute()),
	});
	}}
	text={translate('common.replace')}
	style={styles.transactionReceiptButton}
	/>
	)}

This causes the user to see the distance odometer screen flash before landing on the image capture page, since dismissModal returns to the underlying screen first, and afterTransition then pushes the capture page on top.

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

For odometer images, wrap the Replace button with AttachmentPicker (type=IMAGE) and call openPicker directly on press. When the user selects a file, call setMoneyRequestOdometerImage (already imported in the file) with the selected file and close the modal via navigation.goBack(). This skips the intermediate navigation entirely and opens the native file picker immediately.

For non-odometer receipts, keep the existing behavior (dismiss modal → navigate to scan step).

https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/85716-odometer-replace-picker?expand=1

[DylanDylann]

@jakubkalinski0 Let's discuss here

[jakubkalinski0]

@Julesssss @DylanDylann Oh, okay, I read that completely wrong and thought you don't want to navigate to the odometer image page but open the attachment picker immediately and block the drag&drop this way. Could you clarify this for me a little bit.

You want to get rid of this very, very short period of time when you can see odometer tab after the image preview closes that we can see before the odometer image screen?

output.mp4

[jakubkalinski0]

If thats what we are talking about then thats exactly what happens for scan as well and it's not caused by wrong navigation as we correctly navigate to odometer image, which can be seen here:

App/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx

Lines 544 to 550 in ced001b

	{(shouldShowReplaceReceiptButton || isOdometerImage) && (
	<Button
	icon={expensifyIcons.Camera}
	onPress={() => {
	const getDestinationRoute = () => {
	return isOdometerImage
	? ROUTES.ODOMETER_IMAGE.getRoute(action ?? CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, imageType, isEditingConfirmation, backToReport)

Scan for comparison:

Screen.Recording.2026-03-19.at.10.47.29.mov

[DylanDylann]

I suggest skipping both the distance page and the odometer image page, and opening the picker right away instead. I think this would provide a better UX, since the odometer image page feels redundant on laptop and I forgot that it serves more purposes on native.