React-native-navigation: Overlay display over ActionSheet

[kolos507]

Issue Description

Overlay display over ActionSheet, after close modal with focused TextInput

Steps to Reproduce / Code Snippets / Screenshots

ActionSheet displays over Overlay.

1. Create a modal screen that includes TextInput by calling Navigation.showModal();
2. Set focus in TextInput;
3. Dismiss the modal screen by calling Navigation.dismissAllModals() or Navigation.dismissModal();
4. RESULT - ActionSheet displays under Overlay.

Navigation.showOverlay({
    component: {
      id: 'OVERLAY',
      name: OVERLAY,
      options: {
        overlay: {
          interceptTouchOutside: false,
          handleKeyboardEvents: true,
        },
      },
    },
  });

---

Environment

• React Native Navigation version: 2.18.0
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator & Device, iOS 12.2, Debug & Release

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[LRNZ09]

I'm having the same issue on 2.20.2

[ahwatts]

I'm having this issue with 2.19.0.

[ahwatts]

In fact, you don't even need to show a modal to do this. Focusing on a text input in the root window will trigger this behavior, too.

As best as we can tell, what seems to be going on is that the handleKeyboardEvents option adds a call to makeKeyWindow to the showOverlay call. Apparently, iOS displays the bottom sheet business on top of whichever window is the key window. When you focus on a text input that is not in the overlay window, that window becomes the key window, and the overlay resigns that status. Thereafter, if you trigger bottom sheet behavior (or a share dialog), it gets drawn on top of the new key window, and underneath the overlay.

Unfortunately, I don't know nearly enough about iOS UI business or ObjC to even come up with a solution. It strikes me that exploiting the rule that bottom sheets display over the key window is the wrong approach (because of this behavior), but I have no idea how one might control the depth of the bottom sheet beyond that rule.

[ahwatts]

This might be old news, but it appears the "key window" rule is from the RCTActionSheetManager calling RCTPresentedViewController():

https://github.com/facebook/react-native/blob/master/Libraries/ActionSheetIOS/RCTActionSheetManager.m#L76

This will then return the key window's controller:

https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.m#L492-L516

[ahwatts]

I sort of solved it by patching react-native, but I'm not sure my solution is robust enough. I filed a bug report there to see what they have to say:

https://github.com/facebook/react-native/issues/25132

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[LRNZ09]

Still relevant.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[nenjamin2405]

This issue is still happening in "react-native-navigation": "^6.9.0". I used handleKeyboardEvents: true, so the actionsheet (for example, an actionsheet from Select Avatar) appears over the overlay initially, but after I trigger a keyboard open via text input, the overlay appears over actionsheet