Fix iOS image picker unresponsive on iOS 18+ by MelvinBot · Pull Request #83997 · Expensify/App

MelvinBot · 2026-03-03T07:42:42Z

Explanation of Change

This PR fixes the iOS image picker becoming unresponsive when navigating to Global Create > Create Expenses > Scan > Choose from Gallery.

There are two compounding issues causing this on iOS 18+:

Modal dismiss race condition: The setTimeout(200ms) delay in AttachmentPicker.selectItem() is insufficient on iOS 18.x. The native UIViewController hierarchy needs more time to fully settle after the ReanimatedModal dismiss before PHPickerViewController can be presented. When presented too early, the picker's touch responder chain is broken. This is increased to 500ms.
Touch interception by FullScreenLoadingIndicator: When the attachment picker opens, onOpenPicker sets isLoaderVisible(true), rendering a FullScreenLoadingIndicator with StyleSheet.absoluteFillObject and zIndex: 10 at the app root level. This overlay persists during the entire picker interaction and can intercept touches meant for the native picker. Wrapping it with pointerEvents="none" ensures it remains visible as a loading indicator but does not block touch events.

Fixed Issues

$ #83049
PROPOSAL: #83049 (comment)

Tests

Open Global Create > Create Expenses > Scan
Tap the gallery icon to open the image picker (Choose from Gallery)
Verify the iOS image picker is responsive and allows photo selection
Select a photo and verify the receipt is correctly attached
Repeat the flow and cancel the picker — verify the app returns to the scan screen without a stuck loader

Verify that no errors appear in the JS console

Offline tests

Enable airplane mode
Open Global Create > Create Expenses > Scan > Choose from Gallery
Verify the picker is still responsive and allows selection
Verify the app handles the offline state gracefully after selection

QA Steps

On an iOS device (preferably iOS 18+), open Global Create > Create Expenses > Scan
Tap the gallery icon to open the image picker
Verify the image picker is responsive — you can scroll, tap photos, and select them
Select a photo and verify it attaches correctly as a receipt
Repeat and cancel the picker — verify no stuck loader or broken state
Verify the same flow works on Android with no regression

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

N/A - Changes are iOS-specific (.native.tsx files). Android behavior unchanged.

Android: mWeb Chrome

N/A - Changes are in native-only files.

iOS: Native

This is where the fix applies. Testing required on iOS 18+ device/emulator.

iOS: mWeb Safari

N/A - Changes are in native-only files.

MacOS: Chrome / Safari

N/A - Changes are in native-only files.

…n and touch interception Increase setTimeout delay from 200ms to 500ms in AttachmentPicker selectItem() to ensure the native UIViewController hierarchy fully settles on iOS 18+ before presenting PHPickerViewController. Also wrap FullScreenLoadingIndicator with pointerEvents="none" so it doesn't intercept touches while the native picker is active. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

codecov · 2026-03-03T07:50:44Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/components/AttachmentPicker/index.native.tsx	`20.95% <ø> (ø)`
src/components/FullScreenLoaderContext.tsx	`87.50% <100.00%> (ø)`
... and 7 files with indirect coverage changes

aimane-chnaif · 2026-03-03T07:51:34Z

src/components/FullScreenLoaderContext.tsx

-                {isLoaderVisible && <FullScreenLoadingIndicator />}
+                {isLoaderVisible && (
+                    <View
+                        pointerEvents="none"


@MelvinBot can you confirm there's no side effect of this on all platforms?

I investigated the cross-platform impact. The pointerEvents="none" change is safe across all platforms:

Cross-platform behavior:

iOS/Android (native): The RN View prop pointerEvents="none" prevents the view and all its descendants from being touch targets. Well-documented RN behavior.

Web (React Native Web): Translates to CSS pointer-events: none — same effect, well-supported in all modern browsers.

Why it's safe for all current usage:
All consumers of the full-screen loader (IOURequestStepScan, IOURequestStepOdometerImage, AttachmentPickerWithMenuItems, and useFilesValidation) use it purely as a visual indicator during transitions where no user interaction with the React Native layer is expected — either a native picker is open above the RN view hierarchy, or background file processing (HEIC conversion) is running.

One latent concern (not currently triggered):
FullScreenLoadingIndicator supports a shouldUseGoBackButton prop that renders a tappable "Go Back" button after a timeout. This prop is not passed in the context provider (defaults to false), so it's not an issue today. If someone were to add it in the future, the button would be unreachable due to pointerEvents="none". But that would require an intentional code change and would be caught in review.

No regressions expected on Android, web, or iOS.

MelvinBot · 2026-03-03T07:56:16Z

I reviewed both changes for cross-platform side effects. Here's a summary:

Change 1: `setTimeout` 200ms → 500ms (`index.native.tsx`)

Web / Desktop: No impact — the web AttachmentPicker (index.tsx) is a completely separate implementation using a hidden <input type="file"> with no modal or setTimeout.

iOS Native: This is the intended fix target — no concerns.

Android Native: ⚠️ Minor concern. Since index.native.tsx serves both iOS and Android, Android also gets the 300ms increase even though it doesn't have the iOS 18 UIViewController race condition. The user will wait 500ms instead of 200ms before the gallery/camera picker appears. This is noticeable but likely not a major issue since the FullScreenLoadingIndicator is shown during this gap. Worth noting though — a Platform.OS === 'ios' guard could keep Android at 200ms if the team prefers.

Change 2: `pointerEvents="none"` wrapper (`FullScreenLoaderContext.tsx`)

This file is not platform-specific, so the change applies to all platforms.

iOS / Android Native: Safe. The FullScreenLoadingIndicator rendered from this context has no interactive children (no shouldUseGoBackButton prop), so pointerEvents="none" simply makes a visual-only overlay pass through touches — which is the intended fix.

Web / Desktop: ⚠️ Worth noting two things:

Behavioral change during file processing on web. The useFilesValidation hook (src/hooks/useFilesValidation.tsx) calls setIsLoaderVisible(true) on all platforms during HEIC conversion and large image resizing. Previously, the full-screen overlay (with zIndex: 10 and opacity: 0.8) blocked interactions during this processing. With pointerEvents="none", clicks now pass through the overlay, meaning users could potentially interact with elements behind it during file processing. This is a subtle behavioral change that may or may not be desirable.
Future maintenance risk. If someone later passes shouldUseGoBackButton (or adds other interactive elements) to the FullScreenLoadingIndicator in this context, the "Go Back" button will be unclickable on all platforms because the parent View has pointerEvents="none", which cascades to children in both React Native and CSS.

Summary

Platform	Change 1 (setTimeout)	Change 2 (pointerEvents)
iOS Native	✅ Fix target	✅ Fix target
Android Native	⚠️ 300ms extra delay (no functional benefit)	✅ Safe
Web (Chrome/Safari)	✅ Not affected	⚠️ Overlay no longer blocks clicks during HEIC processing
Desktop (Electron)	✅ Not affected	⚠️ Same as web

Neither concern is a blocker, but the Android delay and the web behavioral change during file processing are worth being aware of.

aimane-chnaif · 2026-03-03T08:02:09Z

src/components/AttachmentPicker/index.native.tsx

                            delete onModalHide.current;
                        });
-                }, 200);
+                }, 500);


This is magic value and I don't think this is needed anymore. onModalHide.current callback is called on onModalHide, which means modal is fully disappeared.
I have no issue found even after fully removing setTimeout.

Good call — removed the setTimeout entirely. Since onModalHide.current is invoked via the modal's onModalHide callback, the native view hierarchy should already be fully settled by that point. Pushed in 4b4ae4f.

The onModalHide callback already fires when the modal is fully dismissed, so the setTimeout delay is unnecessary. This addresses review feedback from aimane-chnaif. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

aimane-chnaif · 2026-03-03T08:09:08Z

src/components/AttachmentPicker/index.native.tsx

-                            onClosed.current();
-                            delete onModalHide.current;
-                        });
-                }, 200);


@MelvinBot Let's keep original code (200ms timeout) for now, for the safety of regression.

Restored the original 200ms timeout with its comment. The PR now only contains the pointerEvents="none" fix on FullScreenLoaderContext.tsx — the AttachmentPicker file is unchanged from main. Pushed in 3cb456a.

…eout Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot · 2026-03-03T08:11:36Z

Reverted the setTimeout change in AttachmentPicker/index.native.tsx — the original 200ms timeout is preserved. The PR now only contains the pointerEvents="none" fix in FullScreenLoaderContext.tsx.

aimane-chnaif · 2026-03-03T08:13:01Z

@bernhardoj as a reporter, do you mind testing this branch on your simulator?

Restores the original setTimeout(200ms) delay in selectItem per reviewer feedback, keeping it for regression safety. The PR now only contains the pointerEvents="none" fix on FullScreenLoaderContext. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

…sive' into claude-fixIosImagePickerUnresponsive Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot · 2026-03-03T08:27:20Z

The failing check (test job 8) is unrelated to this PR's changes.

Analysis: The failure is in tests/ui/SessionTest.tsx (deep linking tests), but this PR only modifies src/components/FullScreenLoaderContext.tsx — wrapping the loader indicator in a View with pointerEvents="none". The deep linking tests don't exercise or depend on this component behavior.

Evidence: The same SessionTest.tsx test is also failing on at least two other unrelated PRs right now:

fix/79312-better-existing-acc-detection (run 22614308207) — same timeout + unmounted renderer errors
JKobrynski/feat/80091-migrate-keys-to-ram-only-part-1 (run 22614270321) — same test file, different assertion failure

This is a known flaky test, not caused by this PR's changes.

bernhardoj · 2026-03-03T16:11:37Z

This doesn't work. As you can see from my screenshot, the image picker looks different, it overlaps with the status and navbar.

aimane-chnaif · 2026-03-03T16:15:05Z

@MelvinBot can you check #83997 (comment)? This should help finding the real root cause.

MelvinBot · 2026-03-03T16:21:35Z

I investigated bernhardoj's screenshot and the underlying issue. The screenshot shows the iOS image picker overlapping the status bar and navbar — this is a presentation/layout issue, not just a touch interception issue. The pointerEvents="none" fix alone cannot solve this because it only affects touch delivery, not how iOS presents the PHPickerViewController.

Root Cause Analysis

The issue is a view controller hierarchy problem caused by the interaction between ReanimatedModal's dismissal and PHPickerViewController presentation on iOS 18.

The chain of events:

The AttachmentPicker's Popover is a fullscreen <Modal transparent> (ReanimatedModal/index.tsx:214-216), which creates a native RCTFabricModalHostViewController presented with UIModalPresentationOverFullScreen (RCTModalHostViewComponentView.mm:71-74).
When the user taps "Choose from Gallery", selectItem() (index.native.tsx:450-477) starts a multi-phase dismissal:
- Reanimated exit animation plays (~200ms slideOutDown)
- Animation completes → onCloseCallBack sets state → React re-render
- modalVisibility becomes false → native <Modal visible={false}> → iOS calls dismissViewControllerAnimated
- Native dismiss completion fires onDismiss → onModalHide() propagates to AttachmentPicker
- setTimeout(200ms) → launchImageLibrary
react-native-image-picker calls RCTPresentedViewController() (RCTUtils.mm:659-673) to find the topmost VC, then presents PHPickerViewController from it (ImagePickerManager.mm:121-127).
The problem on iOS 18: After dismissing the UIModalPresentationOverFullScreen modal VC, the root view controller's safe area insets / presentation context may not be fully restored. When PHPickerViewController is presented from this root VC, it inherits a broken layout context, causing the status bar and navbar overlap.
Additionally, getImagePickerOptions() (index.native.tsx:68-84) does not set a presentationStyle option. The native code defaults to UIModalPresentationFullScreen via RCTConvert (RCTConvert.mm:514-523), but PHPickerViewController on iOS 18 internally uses UISheetPresentationController which may interact poorly with the stale layout state of the presenting VC.

Why `pointerEvents="none"` alone isn't enough

The pointerEvents="none" change addresses one symptom (the loading overlay intercepting touches) but doesn't address the core issue: the PHPickerViewController is being presented from a view controller whose layout context is in a bad state after the UIModalPresentationOverFullScreen modal dismissal.

Recommended approaches

Explicitly set presentationStyle: 'formSheet' or 'pageSheet' in getImagePickerOptions() — this gives the picker its own self-contained presentation context, independent of the presenting VC's layout state. The react-native-image-picker TypeScript types support this option (presentationStyle?: 'currentContext' | 'fullScreen' | 'pageSheet' | 'formSheet' | 'popover' | 'overFullScreen' | 'overCurrentContext').
Increase the setTimeout delay (the reverted 500ms change) — this gives iOS more time to settle the VC hierarchy after dismissal. Fragile but pragmatic.
Use InteractionManager.runAfterInteractions() instead of a fixed setTimeout — waits for RN interactions to complete, though it doesn't guarantee the native VC hierarchy is fully settled.
A combination: keep pointerEvents="none" for touch safety + set presentationStyle in picker options + potentially increase the delay.

The strongest signal from bernhardoj's screenshot is that this is a VC presentation issue on iOS 18, not purely a touch interception issue. The fix needs to address how/when PHPickerViewController is presented, not just how touches are delivered.

MelvinBot assigned aimane-chnaif Mar 3, 2026

MelvinBot requested a review from a team March 3, 2026 07:42

MelvinBot mentioned this pull request Mar 3, 2026

[$250] iOS image picker is unresponsive #83049

Open

7 tasks

aimane-chnaif reviewed Mar 3, 2026

View reviewed changes

Revert setTimeout change in AttachmentPicker, keep original 200ms tim…

014c257

…eout Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot and others added 2 commits March 3, 2026 08:14

Merge remote-tracking branch 'origin/claude-fixIosImagePickerUnrespon…

95c04b6

…sive' into claude-fixIosImagePickerUnresponsive Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

Conversation

MelvinBot commented Mar 3, 2026

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov bot commented Mar 3, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

aimane-chnaif Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented Mar 3, 2026

Change 1: setTimeout 200ms → 500ms (index.native.tsx)

Change 2: pointerEvents="none" wrapper (FullScreenLoaderContext.tsx)

Summary

Uh oh!

aimane-chnaif Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

aimane-chnaif Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented Mar 3, 2026

Uh oh!

aimane-chnaif commented Mar 3, 2026

Uh oh!

MelvinBot commented Mar 3, 2026

Uh oh!

bernhardoj commented Mar 3, 2026

Uh oh!

aimane-chnaif commented Mar 3, 2026

Uh oh!

MelvinBot commented Mar 3, 2026

Root Cause Analysis

Why pointerEvents="none" alone isn't enough

Recommended approaches

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Mar 3, 2026 •

edited by github-actions bot

Loading

Change 1: `setTimeout` 200ms → 500ms (`index.native.tsx`)

Change 2: `pointerEvents="none"` wrapper (`FullScreenLoaderContext.tsx`)

Why `pointerEvents="none"` alone isn't enough