The whole screen locks after selecting a MenuOption on RN 0.66

[noway]

Hello, I'm experiencing a bug where the whole screen gets locked after I select a MenuOption on iOS on RN 0.66.

"react-native-popup-menu": "^0.15.12",

$ react-native info
yarn exec v1.22.17
info Fetching system and libraries information...
System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 99.48 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.4.0 - /var/folders/nr/07dzcbh17770_2dx8d770tth0000gn/T/yarn--1643947782084-0.14132620059290057/node
    Yarn: 1.22.17 - /var/folders/nr/07dzcbh17770_2dx8d770tth0000gn/T/yarn--1643947782084-0.14132620059290057/yarn
    npm: 8.3.1 - /opt/homebrew/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /Users/ilia/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /opt/homebrew/opt/openjdk@11/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
✨  Done in 4.62s.

I've been debugging what can fix it, and so far re-mounting the following <View in <MenuProvider (https://github.com/instea/react-native-popup-menu/blob/master/src/MenuProvider.js#L216) helps:

diff --git a/node_modules/react-native-popup-menu/src/MenuProvider.js b/node_modules/react-native-popup-menu/src/MenuProvider.js
index 7a545dd..5c10bb6 100644
--- a/node_modules/react-native-popup-menu/src/MenuProvider.js
+++ b/node_modules/react-native-popup-menu/src/MenuProvider.js
@@ -38,6 +38,7 @@ export default class MenuProvider extends Component {
       _notify: force => this._notify(force),
     };
     this.menuCtx = { menuRegistry: this._menuRegistry, menuActions }
+    this.state = {}
   }
 
   _handleBackButton = () => {
@@ -212,8 +213,8 @@ export default class MenuProvider extends Component {
     const { style, customStyles } = this.props;
     debug('render menu', this.isMenuOpen(), this._ownLayout);
     return (
-        <View style={styles.flex1} onLayout={this._onLayout}>
+        <View style={{flex:1}} onLayout={this._onLayout} key={this.state.nonce} >
           <View style={[
             styles.flex1,
             customStyles.menuContextWrapper,
@@ -237,6 +238,7 @@ export default class MenuProvider extends Component {
               ref={this._onPlaceholderRef}
               />
           </SafeAreaView>
         </View>
       </PopupMenuContext.Provider>
     );
@@ -266,6 +268,7 @@ export default class MenuProvider extends Component {
       menu.instance.props.onBackdropPress();
     }
     this.closeMenu();
+    this.setState({nonce:Date.now()})
   }
 
   _isInitialized() {

This un-locks the screen when I click on backdrop. But still this doesn't fix the MenuOption selection, and unfortunately this patch also remounts the whole app and causes all sorts of issues because of that.

Does anyone happen to run into the same issue and know a fix?

Cheers.

[hemel-cse]

+1 Same issue.

[noway]

I did solve this issue somehow, but I can't bring myself to remember how. I would need to go over my commits.

[adamgorMSFT]

@noway hey I am trying to solve a similar issue now. Do you think you could take a look at your past commits and see if you can offer any extra hints, tips, or thoughts? It would be greatly appreciated. 👍

[adamgorMSFT]

FYI to anyone else. We found a temporary workaround for our scenario by setting the NATIVE_DRIVER to false inside react-native-popup-menu via a patch-package

It appears that the BackDrop close promise never completes, Thus causing a return Promise.all([hideMenu, hideBackdrop]) to never return (inside the _beforeClose of MenuProvider)

The only thing in the close function is an AnimatedTiming. And something about the nativedriver is causing it to have issues for us in some instances. Since it's not a big deal to not use the nativedriver for this, that's what we are going to do for now until more thorough investigation takes place.

[noway]

I have a suspicion that react-navigation might have been involved also. But not fully sure. Missing event rings a bell - that could have been an issue.

One thing to test is whether it happens on debug or production build. I remember that being different somehow.

[s0lus]

Same for me, but on android.

In case if your app depending on react-native-gesture-handler, try to wrap your app entry point as suggested there https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot#update-your-js-code