Skip to content
Permalink
Browse files
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
  • Loading branch information
radex authored and facebook-github-bot committed Mar 4, 2020
1 parent b58e176 commit 80e6d672f32fdc860c73eabcc63763dcab3c6269
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 28 deletions.
@@ -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];
@@ -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>
@@ -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
@@ -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;

This comment has been minimized.

Copy link
@endpress

endpress Jul 14, 2020

The semicolon seems redundant

{
_statusBarStyle = style;
_statusBarHidden = hidden;
_statusBarAnimation = animation;
if (animate) {
[UIView animateWithDuration:0.150 animations:^{
[self setNeedsStatusBarAppearanceUpdate];
}];
} else {
[self setNeedsStatusBarAppearanceUpdate];
}
}

@end
@@ -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)
@@ -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;
@@ -51,7 +51,5 @@
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>

0 comments on commit 80e6d67

Please sign in to comment.