Alert disappears when modal gets hidden (re-rendered with visible=false)

[sryze]

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
      Memory: 318.71 MB / 16.00 GB
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 11.0.0 - /usr/local/bin/node
      Yarn: 1.12.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
      react-native: 0.57.4 => 0.57.4
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

On iOS when an alert is shown on top of a modal and you hide the modal (by changing its visible prop via state) the alert also gets dismissed at the same time.

Reproducible Demo

Demo project:

demo.zip

Video of the bug:

https://drive.google.com/file/d/1eV7p9F_GLZDMWeoVZJrkcGqOXhL8ViYR/view?usp=sharing

[sryze]

This issue affects modal view controllers in general, not just alerts.

[sryze]

I did some debugging and found that because the UIAlertController is presented on top of a modal it becomes the presentedViewController of the modal's RCTModalHostViewController. When a modal gets dimissed RCTModalHostViewManager calls:

// viewController == RCTModalHostViewController instance
[viewController dismissViewControllerAnimated:animated completion:completionBlock];

which hides the alert view controller and the modal view controller remains visible. The documentation for dismissViewController:animated: says:

Dismisses the view controller that was presented modally by the view controller.

i.e. it dismisses the view controller presented by the receiver (RCTModalHostViewController in this case).

I think as a solution UIAlertController should be presented not by the modal but by a higher level view controller, so that when an alert is shown the modal will be dismissed automatically (not certain about the last part).

[sryze]

This patch fixes the dismissal of modals when there are view controllers presented on top of them:

--- a/node_modules/react-native/React/Views/RCTModalHostViewManager.m
+++ b/node_modules/react-native/React/Views/RCTModalHostViewManager.m
@@ -89,7 +89,13 @@ RCT_EXPORT_MODULE()
   if (_dismissalBlock) {
     _dismissalBlock([modalHostView reactViewController], viewController, animated, completionBlock);
   } else {
-    [viewController dismissViewControllerAnimated:animated completion:completionBlock];
+    if (viewController.presentedViewController && viewController.presentingViewController) {
+      // Ask the presenting view controller to dismiss any view controllers presented on top of the modal host
+      // together with the host itself.
+      [viewController.presentingViewController dismissViewControllerAnimated:animated completion:completionBlock];
+    } else {
+      [viewController dismissViewControllerAnimated:animated completion:completionBlock];
+    }
   }
 }