[iOS]: presentation: 'modal' in native-stack locks navigation after navigating to another modal screen too fast

[vzhovnitsky]

Description

After we close modal screen with gesture and try to open another modal fast enough navigation within the stack locks and does not seem to work.

Screenshots

ios-modal-bug.mp4

Steps To Reproduce

Open screen with presentation: 'modal', then close it with gesture, then try to open another screen with presentation: 'modal'

Expected behavior

Open new modal as intended

Actual behavior

Locks navigation within stack

Reproduction

https://snack.expo.dev/@vzhovnitsky/cranky-apples

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
@react-navigation/native	6.0.8
@react-navigation/native-stack	6.4.0
react-native	0.66.4
expo	44.0.0

[WoLewicki]

Can you check if #1326 fixes the problem and does not introduce any new ones?

[andre161292]

Seems to still happen. At https://snack.expo.dev/swfnLagOD with the updated fix included (Version 3.13.1), this happens even faster.
The proposed workaround from react-navigation/react-navigation#10324 (comment) also still circumvents the problem, so it seems being the same issue.

[WoLewicki]

I tested it on the newest main and it works ok for me @andre161292. Can you show e.g. a video on which it does not work correctly?

[andre161292]

@WoLewicki Well... at first i thought you're right (and for a second i thought that even the original demo now works).
But i was simply too slow. You have to be really fast, hammering the buttons again after the modal dialog disappears. Then the issue still exists in both demos.
Btw. iOS Version is 15.5.

Video.mp4

[WoLewicki]

Are you able to reproduce it without Expo?

[andre161292]

Yes i'm able to. I found this thread, because i faced the issue in one of our companies apps. But as it's an unreleased app, i cannot share footage of it - that's why i went with the Expo demo.

[WoLewicki]

@andre161292 I can see that you are running it on iPad, so seems like it is a reason why it does not work, since dismissing a modal on iPad seems to work a bit differently when clicking outside of its area. Can you confirm that the issue happens only on iPads?

[andre161292]

@WoLewicki I'm sorry to say, but it's also happening to me on an iPhone (iOS 15.5 as well) - both in Expo and in our app.

[kkafar]

@andre161292, @vzhovnitsky

I took a look into this issue and:

1. I was not able to reproduce this issue on Paper (and I assumed that you are using Paper as Fabric was not really the thing in February then this issue was created). I tested on both iPhone simulator and physical device with iOS 15.2... --> sadly I couldn't do much in this case.
2. On the other hand, I was able to reproduce (pretty easily) this buggy behaviour on Fabric and I issued fix: set VCs of views from recycling pool as UIAdaptivePresentationControllerDelegate #1535 which should fix the problem.

But, just to be sure, let me know whether you use new architecture or not.

[andre161292]

@kkafar, @WoLewicki First of all, thank you both for looking into this issue and @kkafar for working on a fix!

We're not using Fabric :/ We're using RN with RNUI.
If it helps any further, this is our dependency-list (plus internal ones):

    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/datetimepicker": "^6.0.1",
    "@react-native-community/hooks": "^2.8.1",
    "@react-native-community/netinfo": "^8.1.0",
    "@react-native-picker/picker": "^2.4.1",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "axios": "^0.26.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "i18next": "^21.6.14",
    "intl": "^1.2.5",
    "json2typescript": "^1.5.0-rc.0",
    "lodash": "^4.17.21",
    "luxon": "^2.3.1",
    "react": "17.0.2",
    "react-i18next": "^11.16.2",
    "react-intl": "^5.25.0",
    "react-native": "0.67.2",
    "react-native-document-picker": "^8.0.0",
    "react-native-email-link": "^1.14.0",
    "react-native-file-viewer": "^2.1.5",
    "react-native-fs": "^2.19.0",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-get-random-values": "^1.7.2",
    "react-native-keychain": "^8.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "2.2.4",
    "react-native-safe-area-context": "^4.2.1",
    "react-native-screens": "^3.15.0",
    "react-native-share": "^7.4.1",
    "react-native-shimmer-placeholder": "^2.0.8",
    "react-native-ui-lib": "^6.11.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-vector-icons": "^9.1.0",
    "rxjs": "^7.5.5",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zustand": "^4.0.0-rc.1"

I know some dependencies are outdated, but we're already working on upgrading to the latest React Native version.