When coverScreen={true}, app does not respond to touches

Environment

System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 52.64 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.3.0 - /var/folders/dm/6q5tjg9j7bx3kfcy_1yqx9zr0000gn/T/yarn--1610046361449-0.8891466775189378/node
    Yarn: 1.22.10 - /var/folders/dm/6q5tjg9j7bx3kfcy_1yqx9zr0000gn/T/yarn--1610046361449-0.8891466775189378/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2
      System Images: android-29 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.3/12C33 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.14.0
    react-native: 0.63.4 => 0.63.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

iOS Only

Versions

• Android: N/A
• iOS: 13, 14.1, 14.3
• react-native-modal: 11.4.0 - 11.61
• react-native: 0.63.4
• react: 16.13

Description

Sometimes my iOS simulator get’s into a state where I am not able to interact with my app WHILE a modal is open with coverScreen={true}.

• I’m unable to determine what sequence of actions I must perform to get the application into this state. It seems like a dice-roll every time I open a modal until it finally happens, after which the app is stuck in this state.
• Hot reloading does not fix
• Restarting the app from the RN dev console does not fix
• Closing and re-opening the app does not fix
• At the OS level I also lose the ability to swipe-up from the bottom to switch applications
• If a timer or other event causes the modal to become invisible, the app will begin responding again
• Setting coverScreen={true} and hot reloading will cause the app respond to again

Reproducible Demo

See the video below this short code-snippet.

const styles = StyleSheet.create({
  root: {
    alignItems: "center",
    justifyContent: "center",
  },
});

const BaseModal = (props) => {
  return (
    <Modal
      style={[styles.root, props.style]}
      isVisible={props.open}
      animationIn="fadeIn"
      animationOut="fadeOut"
      backdropColor={Colors.black}
      backdropOpacity={0.9}
      onBackdropPress={props.close}
      // coverScreen={true} (default) causes iOS simulator to become unresponsive sometimes
      // coverScreen={true}
    >
      {props.children}
    </Modal>
  );
};

https://user-images.githubusercontent.com/16328067/103937478-6ca31e00-50ee-11eb-84e6-714a074d76c8.mov

[mmazzarolo]

@kidroca https://github.com/react-native-modal/react-native-modal/issues/615

[kidroca]

I’ve hit the same issue (iOS simulator, haven’t tried real device yet) where my modal would open but then after it closes the app would not respond to any touches. Adding coverScreen={false} “fixes” the problem

I’ve now tried the Modal component included in react-native and I see the same issue when I use presentationStyle="overFullScreen" - the modal seems to close, but then the app does not respond to touches. While if I use presentationStyle="fullScreen" the screen would turn black after the modal is closed

I’ve started stripping dependencies hoping to find an issue with a specific library like using navigation, screens, gesture handler, but even replacing my app with the sample code from this page recreates the problem https://reactnative.dev/docs/modal#onrequestclose - once I’ve closed the modal tapping anywhere on screen does nothing

• react-native: v0.66.1
• react-native-modal: v13.0.0

I’ll try to find or open a ticket about this on react-native’s repository