UIViewController-based status bar management (#25919)

Summary:
{emoji:26a0} This is a follow up to #25425 -- which isn't merged yet… See https://github.com/facebook/react-native/pull/25919/files/2a286257a6553a80a34e2b1f1ad94fc7bae36ea3..125aedbedc234c65c8d1b2133b79e926ad6cf145 for actual diff

Currently, StatusBar native module manages the status bar on iOS globally, using `UIApplication.` APIs. This is bad because:

- those APIs have been deprecated for 4 years
- Apple really, really wants you to have an explicitly defined view controller, and control the status bar there
- it [breaks external native components](#25181 (comment))
- it's [not compatible with iPadOS 13 multi window support](#25181 (comment))

for those reasons I we should transition towards view controller-based status bar management.

With that, there is a need to introduce a default React Native root view controller, so I added `RCTRootViewController`. Using it is completely opt-in and there is no breaking change here. However I believe this should be a part of the template for new RN iOS apps.

Additionally, I added `RCTRootViewControllerProtocol` with hooks needed for RCTStatusBarManager to control the status bar. This means apps that want to have total control over their view controller can still opt in to react native VC-based status bar by conforming their root view controller to this protocol.

## Changelog

[iOS] [Added] - Added `RCTRootViewController` and `RCTRootViewControllerProtocol`
[iOS] [Fixed] - `UIViewControllerBasedStatusBarAppearance=YES` no longer triggers an error as long as you use `RCTRootViewController`
[iOS] [Fixed] - Status bar style is now correctly changed in multi-window iPadOS 13 apps if you use `RCTRootViewController` and set `UIViewControllerBasedStatusBarAppearance=YES`
Pull Request resolved: #25919

Test Plan: - Open RNTester → StatusBar → and check that no features broke

Reviewed By: fkgozali

Differential Revision: D16957766

Pulled By: hramos

fbshipit-source-id: 9ae1384ee20a06933053c4404b8237810f1e7c2c

Author: radex

RNTester/RNTester/AppDelegate.mm

@@ -21,6 +21,7 @@
 #import <React/RCTDataRequestHandler.h>
 #import <React/RCTFileRequestHandler.h>
 #import <React/RCTRootView.h>
+#import <React/RCTRootViewController.h>
 #import <ReactCommon/BridgeJSCallInvoker.h>
 
 #import <cxxreact/JSExecutor.h>
@@ -89,12 +90,13 @@ - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWith
 
   UIView *rootView = [[RCTFabricSurfaceHostingProxyRootView alloc] initWithBridge:_bridge moduleName:@"RNTesterApp" initialProperties:initProps];
 #else
-  UIView *rootView = [[RCTRootView alloc] initWithBridge:_bridge moduleName:@"RNTesterApp" initialProperties:initProps];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
+                                                   moduleName:@"RNTesterApp"
+                                            initialProperties:initProps];
 #endif
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
+  RCTRootViewController *rootViewController = [[RCTRootViewController alloc] initWithRootView:rootView];
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
   [self initializeFlipper:application];

RNTester/RNTester/Info.plist

@@ -56,8 +56,6 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>You need to add NSPhotoLibraryUsageDescription key in Info.plist to enable photo library usage, otherwise it is going to *fail silently*!</string>
 	<key>RN_BUNDLE_PREFIX</key>

React/Base/RCTRootViewController.h

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTBridge.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@class RCTRootView;
+
+@protocol RCTRootViewControllerProtocol <NSObject>
+
+/**
+ * RCTStatusBarManager calls this to update the status bar style.
+ *
+ * Conforming view controllers should use this to update preferred status bar style
+ */
+- (void)updateStatusBarStyle:(UIStatusBarStyle)style
+                      hidden:(BOOL)hidden
+                   animation:(UIStatusBarAnimation)animation
+                    animated:(BOOL)animate;
+
+@end
+
+@interface RCTRootViewController : UIViewController <RCTRootViewControllerProtocol>
+
+/**
+ * - Designated initializer -
+ */
+- (instancetype)initWithRootView:(RCTRootView *)rootView NS_DESIGNATED_INITIALIZER;
+
+/**
+ * The root view used by the view controller.
+ */
+@property (nonatomic, strong, readonly) RCTRootView *rootView;
+
+/**
+ * See: RCTRootViewControllerProtocol
+ */
+- (void)updateStatusBarStyle:(UIStatusBarStyle)style
+                      hidden:(BOOL)hidden
+                   animation:(UIStatusBarAnimation)animation
+                    animated:(BOOL)animate;
+
+@end
+
+NS_ASSUME_NONNULL_END

React/Base/RCTRootViewController.m

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTRootViewController.h"
+#import "RCTUtils.h"
+#import "RCTRootView.h"
+
+@implementation RCTRootViewController
+{
+    UIStatusBarStyle _statusBarStyle;
+    BOOL _statusBarHidden;
+    UIStatusBarAnimation _statusBarAnimation;
+}
+
+- (instancetype)initWithRootView:(RCTRootView *)rootView
+{
+    RCTAssertParam(rootView);
+
+    if (self = [super initWithNibName:nil bundle:nil]) {
+        _rootView = rootView;
+        _statusBarStyle = UIStatusBarStyleDefault;
+        _statusBarHidden = false;
+        _statusBarAnimation = UIStatusBarAnimationFade;
+    }
+
+    return self;
+}
+
+RCT_NOT_IMPLEMENTED(- (instancetype)initWithNibName:(NSString *)nn bundle:(NSBundle *)nb)
+RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
+
+- (void)loadView
+{
+    self.view = _rootView;
+}
+
+- (UIStatusBarStyle)preferredStatusBarStyle
+{
+    return _statusBarStyle;
+}
+
+- (BOOL)prefersStatusBarHidden
+{
+    return _statusBarHidden;
+}
+
+- (UIStatusBarAnimation)preferredStatusBarUpdateAnimation
+{
+    return _statusBarAnimation;
+}
+
+- (void)updateStatusBarStyle:(UIStatusBarStyle)style
+                      hidden:(BOOL)hidden
+                   animation:(UIStatusBarAnimation)animation
+                    animated:(BOOL)animate;
+{
+    _statusBarStyle = style;
+    _statusBarHidden = hidden;
+    _statusBarAnimation = animation;
+    if (animate) {
+        [UIView animateWithDuration:0.150 animations:^{
+            [self setNeedsStatusBarAppearanceUpdate];
+        }];
+    } else {
+        [self setNeedsStatusBarAppearanceUpdate];
+    }
+}
+
+@end

React/CoreModules/RCTStatusBarManager.mm

@@ -13,6 +13,7 @@
 #import <React/RCTLog.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTUtils.h>
+#import <React/RCTRootViewController.h>
 
 #if !TARGET_OS_TV
 #import <FBReactNativeSpec/FBReactNativeSpec.h>
@@ -144,7 +145,27 @@ - (void)applicationWillChangeStatusBarFrame:(NSNotification *)notification
   [self emitEvent:@"statusBarFrameWillChange" forNotification:notification];
 }
 
-RCT_EXPORT_METHOD(getHeight : (RCTResponseSenderBlock)callback)
+- (UIViewController<RCTRootViewControllerProtocol>*) viewControllerForReactTag:(nonnull NSNumber *)reactTag
+{
+  if (!RCTViewControllerBasedStatusBarAppearance()) {
+    return nil;
+  }
+
+  UIView *view = [self.bridge.uiManager viewForReactTag:reactTag];
+  UIViewController *viewController = view.window.rootViewController ?: RCTKeyWindow().rootViewController;
+
+  if ([viewController conformsToProtocol:@protocol(RCTRootViewControllerProtocol)]) {
+    return (UIViewController<RCTRootViewControllerProtocol>*) viewController;
+  } else {
+    RCTLogError(@"RCTStatusBarManager could not find RCTRootViewController. \
+                If UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to YES (recommended for new apps), \
+                You need to use RCTRootViewControllerProtocol-conforming view controller as app window's root view controller \
+                and must pass a node reference to `surface` argument of StatusBar methods.");
+    return nil;
+  }
+}
+
+RCT_EXPORT_METHOD(getHeight:(RCTResponseSenderBlock)callback)
 {
   callback(@[ @{
     @"height" : @(RCTSharedApplication().statusBarFrame.size.height),
@@ -155,38 +176,43 @@ - (void)applicationWillChangeStatusBarFrame:(NSNotification *)notification
                   animated:(BOOL)animated
                   reactTag:(double)reactTag)
 {
-  UIStatusBarStyle statusBarStyle = [RCTConvert UIStatusBarStyle:style];
-  if (RCTViewControllerBasedStatusBarAppearance()) {
-    RCTLogError(@"RCTStatusBarManager module requires that the \
-                UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO");
-    return;
-  }
+    //  NSNumber *reactTag = options.reactTag() ? @(options.reactTag()) : @-1;
+    UIStatusBarStyle statusBarStyle = [RCTConvert UIStatusBarStyle:style];
+    UIViewController<RCTRootViewControllerProtocol> *viewController = [self viewControllerForReactTag:@(reactTag)];
 
-  // TODO (T62270453): Add proper support for UIScenes (this requires view controller based status bar management)
+    if (viewController) {
+        [viewController updateStatusBarStyle:statusBarStyle
+                                      hidden:viewController.prefersStatusBarHidden
+                                   animation:viewController.preferredStatusBarUpdateAnimation
+                                    animated:animated];
+    } else {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdeprecated-declarations"
-  [RCTSharedApplication() setStatusBarStyle:statusBarStyle
-                                   animated:animated];
+        [RCTSharedApplication() setStatusBarStyle:statusBarStyle
+                                         animated:animated];
 #pragma clang diagnostic pop
+    }
 }
 
 RCT_EXPORT_METHOD(setHidden:(BOOL)hidden
                   withAnimation:(NSString *)withAnimation
                   reactTag:(double)reactTag)
 {
   UIStatusBarAnimation animation = [RCTConvert UIStatusBarAnimation:withAnimation];
-  if (RCTViewControllerBasedStatusBarAppearance()) {
-    RCTLogError(@"RCTStatusBarManager module requires that the \
-                UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO");
-    return;
-  }
-
-  // TODO (T62270453): Add proper support for UIScenes (this requires view controller based status bar management)
+  UIViewController<RCTRootViewControllerProtocol> *viewController = [self viewControllerForReactTag:@(reactTag)];
+
+  if (viewController) {
+    [viewController updateStatusBarStyle:viewController.preferredStatusBarStyle
+                                  hidden:hidden
+                               animation:animation
+                                animated:animation != UIStatusBarAnimationNone];
+  } else {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdeprecated-declarations"
-  [RCTSharedApplication() setStatusBarHidden:hidden
-                               withAnimation:animation];
+    [RCTSharedApplication() setStatusBarHidden:hidden
+                                 withAnimation:animation];
 #pragma clang diagnostic pop
+  }
 }
 
 RCT_EXPORT_METHOD(setNetworkActivityIndicatorVisible : (BOOL)visible)

template/ios/HelloWorld/AppDelegate.m

@@ -3,6 +3,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import <React/RCTRootViewController.h>
 
 #if DEBUG
 #import <FlipperKit/FlipperClient.h>
@@ -39,8 +40,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
+  RCTRootViewController *rootViewController = [[RCTRootViewController alloc] initWithRootView:rootView];
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
   return YES;

template/ios/HelloWorld/Info.plist

@@ -51,7 +51,5 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
 </dict>
 </plist>