iOS Modal dismiss causes strange navigation stack pop

[Jpoliachik]

Description

Showing a Modal, then updating state to set visible: false at the same time as we use expo-router to navigate to a new screen, we see a slight pause and noticeable glitch, then the screen where the modal was shown gets popped off the navigation stack when it should not.

See app/child/index.tsx in the repro:

setModalVisible(false);
router.navigate("/child/secondchild");

Which causes this issue:

ios-modalbug.mov

This only happens on iOS, and it only happens when dismissing a Modal at the same time as navigating to a new route.

The only workaround I found for now is to use FullWindowOverlay on iOS instead of Modal.

Steps to reproduce

Minimal repro from a fresh create-expo-app can be found here, with a video showing the issue:

https://github.com/Jpoliachik/RNModalNavigateBug

Snack or a link to a repository

https://github.com/Jpoliachik/RNModalNavigateBug

Screens version

4.4.0

React Native version

0.76.6

Platforms

iOS

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kkafar]

@Jpoliachik I'll into it, but much simpler workaround be most likely just to delay the navigation call by a frame, e.g. by using it in setTimeout or something.

[kkafar]

I confirm that the issue is reproducible.

[kkafar]

Should be fixed with #2671

I'll release another beta by the end of the Friday

[Jpoliachik]

Thanks @kkafar!

[kkafar]

4.7.0-beta.3 is on npm fyi

[RohovDmytro]

@kkafar The beta.3 still causes an issue for me. Here a quick video from Android:

video_2025-02-09_17-17-52.mp4

The video does not highlight a gesture animation, so to be clear I was applying a gesture swipe from left edge of the screen all the time. At first, only a single screen was dismissed (that's what expected). Last time the swipe caused both screen to be dismissed.

It seems like the one of the screens was dismissed due to touch on a backdrop and the second one due to a swipe gesture.

Also, might be worth pointing out that the presentation mode for the screen stack is formSheet.

[RohovDmytro]

I think what happens is that if the swipe back gesture starts on a backdrop, that triggers closing of a modal, and then the swipe back gesture happens which closes the second modal.

I can see a solution to close a modal not upon onPressIn (what happens now). Closing the modal during onPressOut will leave space to cancel navigation action if it would be already handled by back gesture / view gets unmounted.

[kkafar]

@RohovDmytro the original issue is iOS specific and I consider it solved. The issue you describe seems to relate to different platform and different behaviour. Please open separate issue & describe the problem there.