[READY FOR PAYMENT] Scan - Error message if next button is tapped while a photo with flash is taken

[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.3.11-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176932/test-cases/41237694
Email or phone of affected tester (no customers): gatantm+6125@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Google Pixel 9 Pro, Android 16, iPhone 12 mini, iOS 16.7, iPhone 17 Pro Max, iOS 26.2
App Component: Money Requests

Action Performed:

1. Launch expensify
2. Tap on FAB and select Create expense
3. Tap on Scan and select the multiple expenses icon
4. Tap the shutter to take a photo
5. Enable the flash
6. Tap the shutter again and while the photo is taken tap the next icon on bottom right (so tap the shutter and immediately the next button)

Expected Result:

There's no error message. Ideally the app waits for the photo to be taken until going to the next step (similarly to the first photo or the single expense flow)

Actual Result:

There's a Camera error and the photo is not added. Without flash the same flow works and the photo is taken and added as new expense

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

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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.

[daledah]

Proposal

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

When using the multi-scan feature to take multiple expense receipts with flash enabled, tapping the "next" button immediately after the shutter causes a camera error and the photo is not added. The same flow works fine without flash.

What is the root cause of that problem?

The root cause is a race condition between the async photo capture process and navigation when flash is enabled.

Looking at IOURequestStepScan/index.native.tsx, the capturePhoto function:

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

Lines 456 to 566 in eb7deee

	const capturePhoto = useCallback(() => {
	if (!camera.current && (cameraPermissionStatus === RESULTS.DENIED || cameraPermissionStatus === RESULTS.BLOCKED)) {
	askForPermissions();
	return;
	}
	const showCameraAlert = () => {
	Alert.alert(translate('receipt.cameraErrorTitle'), translate('receipt.cameraErrorMessage'));
	};
	if (!camera.current) {
	showCameraAlert();
	}
	if (didCapturePhoto) {
	return;
	}
	if (isMultiScanEnabled) {
	showBlink();
	}
	setDidCapturePhoto(true);
	const path = getReceiptsUploadFolderPath();
	ReactNativeBlobUtil.fs
	.isDir(path)
	.then((isDir) => {
	if (isDir) {
	return;
	}
	ReactNativeBlobUtil.fs.mkdir(path).catch((error: string) => {
	Log.warn('Error creating the directory', error);
	});
	})
	.catch((error: string) => {
	Log.warn('Error checking if the directory exists', error);
	})
	.then(() => {
	camera?.current
	?.takePhoto({
	flash: flash && hasFlash ? 'on' : 'off',
	enableShutterSound: !isPlatformMuted,
	path,
	})
	.then((photo: PhotoFile) => {
	// Store the receipt on the transaction object in Onyx
	const transaction =
	isMultiScanEnabled && initialTransaction?.receipt?.source
	? buildOptimisticTransactionAndCreateDraft({
	initialTransaction,
	currentUserPersonalDetails,
	reportID,
	})
	: initialTransaction;
	const transactionID = transaction?.transactionID ?? initialTransactionID;
	const imageObject: ImageObject = {file: photo, filename: photo.path, source: getPhotoSource(photo.path)};
	cropImageToAspectRatio(imageObject, viewfinderLayout.current?.width, viewfinderLayout.current?.height, undefined, photo.orientation).then(
	({file, filename, source}) => {
	// Add source property to file for prepareRequestPayload compatibility
	const cameraFile = {
	...file,
	source,
	};
	setMoneyRequestReceipt(transactionID, source, filename, !isEditing, file.type);
	if (isEditing) {
	updateScanAndNavigate(cameraFile as FileObject, source);
	return;
	}
	const newReceiptFiles = [...receiptFiles, {file: cameraFile as FileObject, source, transactionID}];
	setReceiptFiles(newReceiptFiles);
	if (isMultiScanEnabled) {
	setDidCapturePhoto(false);
	return;
	}
	submitReceipts(newReceiptFiles);
	},
	);
	})
	.catch((error: string) => {
	setDidCapturePhoto(false);
	showCameraAlert();
	Log.warn('Error taking photo', error);
	});
	});
	// eslint-disable-next-line react-hooks/exhaustive-deps -- askForPermissions is not needed
	}, [
	cameraPermissionStatus,
	didCapturePhoto,
	isMultiScanEnabled,
	translate,
	showBlink,
	flash,
	hasFlash,
	isPlatformMuted,
	initialTransaction,
	currentUserPersonalDetails,
	reportID,
	initialTransactionID,
	isEditing,
	receiptFiles,
	submitReceipts,
	updateScanAndNavigate,
	]);

The issue is:

1. User taps shutter → capturePhoto() called
2. didCapturePhoto set to true
3. takePhoto() starts - with flash, this is significantly slower because:
   • Flash needs to charge/prepare
   • Flash fires during capture
   • Camera sensor needs longer exposure time
4. Before takePhoto() completes, user taps "next" button
5. submitMultiScanReceipts() → navigateToConfirmationStep() is called
6. Navigation begins, component starts unmounting
7. Camera is disposed while takePhoto() Promise is still pending
8. takePhoto() rejects because camera is no longer available
9. Catch block triggers showCameraAlert() → "Camera error" shown

Without flash, takePhoto() is much faster (typically < 200ms), so the user can't tap "next" fast enough to cause the race condition. With flash, the capture takes 500ms+ giving the user time to tap "next" before it completes.

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

The fix should disable the "next" button while a photo is being captured. Pass didCapturePhoto to ReceiptPreviews and disable the submit button when it's true:

1. Update IOURequestStepScan/index.native.tsx to pass didCapturePhoto to ReceiptPreviews:

{canUseMultiScan && (
    <ReceiptPreviews
        isMultiScanEnabled={isMultiScanEnabled}
        submit={submitMultiScanReceipts}
+       isCapturingPhoto={didCapturePhoto}
    />
)}

2. Update ReceiptPreviews/index.tsx to accept and use the new prop:

type ReceiptPreviewsProps = {
    /** Submit method */
    submit: () => void;

    /** If the receipts preview should be shown */
    isMultiScanEnabled: boolean;
+
+   /** If a photo is currently being captured */
+   isCapturingPhoto?: boolean;
};

-function ReceiptPreviews({submit, isMultiScanEnabled}: ReceiptPreviewsProps) {
+function ReceiptPreviews({submit, isMultiScanEnabled, isCapturingPhoto = false}: ReceiptPreviewsProps) {
    // ...

    return (
        <Animated.View style={slideInStyle}>
            <View style={styles.pr4}>
                {/* ... FlatList ... */}
                <SubmitButtonShadow>
                    <Button
                        large
-                       isDisabled={!optimisticTransactionsReceipts?.length}
+                       isDisabled={!optimisticTransactionsReceipts?.length || isCapturingPhoto}
                        innerStyles={[styles.singleAvatarMedium, styles.bgGreenSuccess]}
                        icon={icons.ArrowRight}
                        iconFill={theme.white}
                        onPress={submit}
                    />
                </SubmitButtonShadow>
            </View>
        </Animated.View>
    );
}

This ensures:

• The "next" button is disabled while a photo is being captured
• User cannot navigate away until the photo is fully processed
• The behavior matches the single expense flow (which waits for capture to complete)

What alternative solutions did you explore? (Optional)