Cannot add a pdf receipt on mobile

[m-natarajan]

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-17
Reproducible in staging?: Y
Reproducible in production?: Y
**If this was caught during regression testing, add the test name, ID and link from BrowserStack:**
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
**Expensify/Expensify Issue URL:
**Issue reported by: @laurenreidexpensify
Slack conversation (hyperlinked to channel name): #Expensify bugs

Action Performed:

1. Open Mobile App (reproduced in Android)
2. Tap FAB +
3. Create Expense
4. Tap Photo Icon
5. Choose File
6. Select any file from local files
7. Observe no file is uploaded and the app immediately switches back to Camera View at Step 3
   (Able to reproduce this by following this, if on Confirmation tab tap back and upload another file)

Expected Result:

When you select a file from local files that it is uploaded to the expense as the receipt image

Actual Result:

No file was uploaded and app switched back out to camera view

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Screenrecorder-2026-02-02-22-58-25-122.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @alitoshmatov

Issue Owner

Current Issue Owner: @mavrickdeveloper

[melvin-bot]

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

[melvin-bot]

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

[MadalitsoPhiri]

Proposal

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

When creating an expense and uploading a receipt from local files:

1. First file selection works correctly - user can select a PDF/file and navigate to the confirmation page
2. Upon clicking back from the confirmation page and attempting to select another file from local storage, the file is not uploaded
3. The app immediately switches back to the camera view without uploading the selected file
4. The issue persists until the user completely exits and re-enters the create expense flow
5. This only affects subsequent file selections after navigating back; the initial upload always works

What is the root cause of that problem?

The root cause is in the useFocusEffect hook in the IOURequestStepScan component where isLoaderVisible is included in the dependency array. This causes the effect to re-run every time the loader visibility changes, creating a race condition during the file selection process.

The problematic flow:

1. User opens file picker → isLoaderVisible changes to true → useFocusEffect re-runs and registers a new cleanup function
2. User selects file and navigates to confirmation → Cleanup function runs, sets isLoaderVisible to false → Effect re-runs again
3. User navigates back → Effect runs again
4. User attempts to select another file → isLoaderVisible changes to true → Effect re-runs yet again
5. File selection completes, onClosed callback sets isLoaderVisible to false → This triggers another effect run
6. The rapid re-running of the effect interferes with the attachment picker's state management and file upload process

The cleanup function was capturing the isLoaderVisible value in its closure rather than accessing the current value, and the inclusion in the dependency array caused unnecessary re-runs that disrupted the file picker workflow.

Current code (lines 214-243):

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

Lines 214 to 243 in 1bb4a0c

	useFocusEffect(
	useCallback(() => {
	setDidCapturePhoto(false);
	const refreshCameraPermissionStatus = () => {
	CameraPermission?.getCameraPermissionStatus?.()
	.then(setCameraPermissionStatus)
	.catch(() => setCameraPermissionStatus(RESULTS.UNAVAILABLE));
	};
	refreshCameraPermissionStatus();
	// Refresh permission status when app gain focus
	const subscription = AppState.addEventListener('change', (appState) => {
	if (appState !== 'active') {
	return;
	}
	refreshCameraPermissionStatus();
	});
	return () => {
	subscription.remove();
	if (isLoaderVisible) {
	setIsLoaderVisible(false);
	}
	};
	}, [isLoaderVisible, setIsLoaderVisible]),
	);

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

Remove isLoaderVisible from the useFocusEffect dependency array and use a functional state update in the cleanup function to access the current value without creating a dependency. This ensures:

1. The effect only runs when the component gains or loses focus (via navigation), not when loader visibility changes
2. The cleanup function always works with the current loader state value
3. No race conditions occur between file selection operations and effect re-runs
4. The file picker's promise chain can complete without interference

Specific change needed:

In src/pages/iou/request/step/IOURequestStepScan/index.native.tsx, update the cleanup function to use setIsLoaderVisible((currentValue) => ...) functional update and remove isLoaderVisible from the dependencies array.

Diff:

     useFocusEffect(
         useCallback(() => {
             setDidCapturePhoto(false);
             const refreshCameraPermissionStatus = () => {
                 CameraPermission?.getCameraPermissionStatus?.()
                     .then(setCameraPermissionStatus)
                     .catch(() => setCameraPermissionStatus(RESULTS.UNAVAILABLE));
             };
 
             refreshCameraPermissionStatus();
 
             // Refresh permission status when app gain focus
             const subscription = AppState.addEventListener('change', (appState) => {
                 if (appState !== 'active') {
                     return;
                 }
 
                 refreshCameraPermissionStatus();
             });
 
             return () => {
                 subscription.remove();
-
-                if (isLoaderVisible) {
-                    setIsLoaderVisible(false);
-                }
+                // Use functional update to get current value without adding to dependencies
+                setIsLoaderVisible((currentValue) => {
+                    if (currentValue) {
+                        return false;
+                    }
+                    return currentValue;
+                });
             };
-        }, [isLoaderVisible, setIsLoaderVisible]),
+        }, [setIsLoaderVisible]),
     );

What alternative solutions did you explore? (Optional)

1. Using a ref to track loader state: Instead of removing the dependency, we could use a useRef to track the loader visibility. However, this would add unnecessary complexity and wouldn't prevent the effect from re-running on every loader visibility change.

2. Debouncing the loader state changes: We could debounce setIsLoaderVisible calls to reduce the frequency of effect re-runs. However, this would add latency to the UI feedback and wouldn't solve the fundamental issue of the effect running too frequently.

3. Moving the cleanup logic outside the useFocusEffect: We could handle loader cleanup in a separate useEffect that runs on unmount. However, this wouldn't handle the case where the user navigates away while the loader is visible, potentially leaving it in an inconsistent state.

4. Using useCallback for the onClosed callback: We could memoize the callbacks passed to the AttachmentPicker to prevent recreating them. However, this wouldn't solve the core issue of the effect re-running when loader visibility changes.

The chosen solution (functional state update without the dependency) is the simplest and most direct fix that addresses the root cause without introducing additional complexity or side effects.

[twinkle-react]

Proposal

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

On Android mobile, when the user chooses Choose File from the camera or gallery flow, the app immediately returns to the camera view and the selected file is never attached or uploaded.

What is the root cause of that problem?

In this flow, AttachmentPicker assumes it must delay launching the native picker until after the popover or modal hides, using onModalHide with a setTimeout, and this logic lives in src/components/AttachmentPicker/index.native.tsx inside selectItem; this assumption is wrong on Android because hiding the modal allows the camera or navigation to regain focus before the native picker runs, which breaks the handoff and prevents completeAttachmentSelection from being invoked.

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

Edit one file: src/components/AttachmentPicker/index.native.tsx.

Add the platform helper import.

// File: src/components/AttachmentPicker/index.native.tsx
import getPlatform from '@libs/getPlatform';

Replace the selectItem implementation with the following code.

// File: src/components/AttachmentPicker/index.native.tsx
const selectItem = useCallback(
    (item: Item) => {
        onOpenPicker?.();

        const platform = getPlatform(true);

        // Preserve original onCanceled so we can restore it later
        const originalOnCanceled = onCanceled.current;

        const clearOnCanceled = () => {
            onCanceled.current = () => {};
        };

        const restoreOnCanceled = () => {
            onCanceled.current = originalOnCanceled;
        };

        const launchPicker = () => {
            item
                .pickAttachment()
                .catch((error: Error) => {
                    if (JSON.stringify(error).includes('OPERATION_CANCELED')) {
                        return;
                    }

                    showGeneralAlert(error.message);
                    throw error;
                })
                .then((result) => pickAttachment(result))
                .catch(console.error)
                .finally(() => {
                    onClosed.current();
                    delete onModalHide.current;
                    restoreOnCanceled();
                });
        };

        if (platform === CONST.PLATFORM.ANDROID) {
            // On Android: prevent popover onClose from triggering caller cancel handlers,
            // launch the picker immediately, then close the popover.
            clearOnCanceled();
            launchPicker();
            close();
        } else {
            // On iOS: preserve existing behavior (wait for modal hide then launch)
            onModalHide.current = () => {
                setTimeout(() => {
                    launchPicker();
                }, 200);
            };
            close();
        }
    },
    [onOpenPicker, pickAttachment, showGeneralAlert],
);

What alternative solutions did you explore? (Optional)

N/A

[annaweber830]

Proposal

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

On the native mobile app (Android reported, likely iOS too), selecting a PDF (or other file) via Choose file while creating an expense does not attach the file. After picking a file from the system file picker, the app returns to the scan/camera screen and no receipt is uploaded.

What is the root cause of that problem?

The native AttachmentPicker popover treats any close event as a cancellation and unconditionally calls the caller’s onCanceled handler in Popover.onClose, even when we are closing the popover because the user selected an item and we’re about to launch the native picker. At the same time, we only launch the native picker after the popover hides via onModalHide and an additional 200ms timeout.

This combination creates an Android-specific race where the “cancel” handler runs during a valid selection flow and can reset state in the caller (e.g. hide loaders / revert UI state) before the native picker promise chain completes, resulting in the selection never reaching completeAttachmentSelection and thus never reaching the receipt flow.

Relevant code:

• AttachmentPicker always calls cancel on close and always defers launching the native picker until modal hide + timeout:

  • App/src/components/AttachmentPicker/index.native.tsx

    Lines 437 to 515 in eaf25b2

    	const selectItem = useCallback(
    	(item: Item) => {
    	onOpenPicker?.();
    	/* setTimeout delays execution to the frame after the modal closes
    	* without this on iOS closing the modal closes the gallery/camera as well */
    	onModalHide.current = () => {
    	setTimeout(() => {
    	item.pickAttachment()
    	.catch((error: Error) => {
    	if (JSON.stringify(error).includes('OPERATION_CANCELED')) {
    	return;
    	}
    	showGeneralAlert(error.message);
    	throw error;
    	})
    	.then((result) => pickAttachment(result))
    	.catch(console.error)
    	.finally(() => {
    	onClosed.current();
    	delete onModalHide.current;
    	});
    	}, 200);
    	};
    	close();
    	},
    	[onOpenPicker, pickAttachment, showGeneralAlert],
    	);
    	useKeyboardShortcut(
    	CONST.KEYBOARD_SHORTCUTS.ENTER,
    	() => {
    	if (focusedIndex === -1) {
    	return;
    	}
    	const item = menuItemData.at(focusedIndex);
    	if (item) {
    	selectItem(item);
    	setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu
    	}
    	},
    	{
    	isActive: isVisible,
    	},
    	);
    	/**
    	* Call the `children` renderProp with the interface defined in propTypes
    	*/
    	const renderChildren = (): React.ReactNode =>
    	children({
    	openPicker: ({onPicked, onCanceled: newOnCanceled, onClosed: newOnClosed}) => open(onPicked, newOnCanceled, newOnClosed),
    	});
    	return (
    	<>
    	<Popover
    	onClose={() => {
    	close();
    	onCanceled.current();
    	}}
    	isVisible={isVisible}
    	anchorRef={popoverRef}
    	onModalHide={() => onModalHide.current?.()}
    	>
    	<View style={!shouldUseNarrowLayout && styles.createMenuContainer}>
    	{menuItemData.map((item, menuIndex) => (
    	<MenuItem
    	key={item.textTranslationKey}
    	icon={item.icon}
    	title={translate(item.textTranslationKey)}
    	onPress={() => selectItem(item)}
    	focused={focusedIndex === menuIndex}
    	wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, false, theme.activeComponentBG, theme.hoverComponentBG)}
    	/>
    	))}
    	</View>
    	</Popover>
    	{renderChildren()}

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

Update AttachmentPicker so that:

1. Closing the popover due to a selection does not invoke onCanceled.
2. The extra 200ms delay remains iOS-only (to preserve the existing “don’t close the camera/gallery” behavior), while Android launches on the next tick after the modal hides.

This makes the close semantics correct (selection ≠ cancellation) and reduces the timing window where Android can drop the selection.

Solution location (same file as root cause):

• App/src/components/AttachmentPicker/index.native.tsx

  Lines 437 to 515 in eaf25b2

  	const selectItem = useCallback(
  	(item: Item) => {
  	onOpenPicker?.();
  	/* setTimeout delays execution to the frame after the modal closes
  	* without this on iOS closing the modal closes the gallery/camera as well */
  	onModalHide.current = () => {
  	setTimeout(() => {
  	item.pickAttachment()
  	.catch((error: Error) => {
  	if (JSON.stringify(error).includes('OPERATION_CANCELED')) {
  	return;
  	}
  	showGeneralAlert(error.message);
  	throw error;
  	})
  	.then((result) => pickAttachment(result))
  	.catch(console.error)
  	.finally(() => {
  	onClosed.current();
  	delete onModalHide.current;
  	});
  	}, 200);
  	};
  	close();
  	},
  	[onOpenPicker, pickAttachment, showGeneralAlert],
  	);
  	useKeyboardShortcut(
  	CONST.KEYBOARD_SHORTCUTS.ENTER,
  	() => {
  	if (focusedIndex === -1) {
  	return;
  	}
  	const item = menuItemData.at(focusedIndex);
  	if (item) {
  	selectItem(item);
  	setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu
  	}
  	},
  	{
  	isActive: isVisible,
  	},
  	);
  	/**
  	* Call the `children` renderProp with the interface defined in propTypes
  	*/
  	const renderChildren = (): React.ReactNode =>
  	children({
  	openPicker: ({onPicked, onCanceled: newOnCanceled, onClosed: newOnClosed}) => open(onPicked, newOnCanceled, newOnClosed),
  	});
  	return (
  	<>
  	<Popover
  	onClose={() => {
  	close();
  	onCanceled.current();
  	}}
  	isVisible={isVisible}
  	anchorRef={popoverRef}
  	onModalHide={() => onModalHide.current?.()}
  	>
  	<View style={!shouldUseNarrowLayout && styles.createMenuContainer}>
  	{menuItemData.map((item, menuIndex) => (
  	<MenuItem
  	key={item.textTranslationKey}
  	icon={item.icon}
  	title={translate(item.textTranslationKey)}
  	onPress={() => selectItem(item)}
  	focused={focusedIndex === menuIndex}
  	wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, false, theme.activeComponentBG, theme.hoverComponentBG)}
  	/>
  	))}
  	</View>
  	</Popover>
  	{renderChildren()}

import {Alert, Platform, View} from 'react-native';

const selectItem = useCallback(
    (item: Item) => {
        onOpenPicker?.();

        onModalHide.current = () => {
            const delay = Platform.OS === 'ios' ? 200 : 0;

            setTimeout(() => {
                item.pickAttachment()
                    .catch((error: Error) => {
                        if (JSON.stringify(error).includes('OPERATION_CANCELED')) {
                            return;
                        }

                        showGeneralAlert(error.message);
                        throw error;
                    })
                    .then((result) => pickAttachment(result))
                    .catch(console.error)
                    .finally(() => {
                        onClosed.current();
                        delete onModalHide.current;
                    });
            }, delay);
        };

        close();
    },
    [onOpenPicker, pickAttachment, showGeneralAlert],
);

return (
    <>
        <Popover
            onClose={() => {
                close();
                // Only treat it as cancel if we are NOT in the middle of launching a picker
                if (!onModalHide.current) {
                    onCanceled.current();
                }
            }}
            isVisible={isVisible}
            anchorRef={popoverRef}
            onModalHide={() => onModalHide.current?.()}
        >
            {/* ... */}
        </Popover>
        {renderChildren()}
    </>
);

What alternative solutions did you explore? (Optional)

• Removing setTimeout entirely: riskier for iOS since the existing comment explicitly calls out iOS behavior when closing the modal.
• Fixing this only in IOURequestStepScan (e.g., by changing its cancellation/loader behavior): would not address the underlying incorrect “close means cancel” semantics, and wouldn’t help other callers of AttachmentPicker.

[github-actions]

⚠️ @annaweber830 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[melvin-bot]

@alitoshmatov 10 days overdue. Is anyone even seeing these? Hello?