Allow <Modal /> to be presented in different orientations

Reviewed By: javache

Differential Revision: D3760002

fbshipit-source-id: 01f5c246fb0fc041ec2d63b4ef80de858fb6fdf2

React/Views/RCTModalHostView.h

@@ -27,6 +27,9 @@
 
 @property (nonatomic, weak) id<RCTModalHostViewInteractor> delegate;
 
+@property (nonatomic, copy) NSArray<NSString *> *supportedOrientations;
+@property (nonatomic, copy) RCTDirectEventBlock onOrientationChange;
+
 - (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
 
 @end

React/Views/RCTModalHostView.m

@@ -16,6 +16,8 @@
 #import "RCTUIManager.h"
 #import "UIView+React.h"
 
+#import <UIKit/UIKit.h>
+
 @implementation RCTModalHostView
 {
   __weak RCTBridge *_bridge;
@@ -23,6 +25,7 @@
   RCTModalHostViewController *_modalViewController;
   RCTTouchHandler *_touchHandler;
   UIView *_reactSubview;
+  UIInterfaceOrientation _lastKnownOrientation;
 }
 
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
@@ -52,9 +55,30 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:coder)
 {
   if (_reactSubview && _isPresented) {
     [_bridge.uiManager setFrame:newBounds forView:_reactSubview];
+    [self notifyForOrientationChange];
   }
 }
 
+- (void)notifyForOrientationChange
+{
+  if (!_onOrientationChange) {
+    return;
+  }
+
+  UIInterfaceOrientation currentOrientation = [[UIApplication sharedApplication] statusBarOrientation];
+  if (currentOrientation == _lastKnownOrientation) {
+    return;
+  }
+  _lastKnownOrientation = currentOrientation;
+
+  BOOL isPortrait = currentOrientation == UIInterfaceOrientationPortrait || currentOrientation == UIInterfaceOrientationPortraitUpsideDown;
+  NSDictionary *eventPayload =
+  @{
+    @"orientation": isPortrait ? @"portrait" : @"landscape",
+    };
+  _onOrientationChange(eventPayload);
+}
+
 - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
 {
   RCTAssert(_reactSubview == nil, @"Modal view can only have one subview");
@@ -95,6 +119,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:coder)
   if (!_isPresented && self.window) {
     RCTAssert(self.reactViewController, @"Can't present modal view controller without a presenting view controller");
 
+    _modalViewController.supportedInterfaceOrientations = [self supportedOrientationsMask];
     if ([self.animationType isEqualToString:@"fade"]) {
       _modalViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
     } else if ([self.animationType isEqualToString:@"slide"]) {
@@ -136,4 +161,31 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:coder)
   _modalViewController.modalPresentationStyle = transparent ? UIModalPresentationCustom : UIModalPresentationFullScreen;
 }
 
+- (UIInterfaceOrientationMask)supportedOrientationsMask
+{
+  if (_supportedOrientations.count == 0) {
+    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
+      return UIInterfaceOrientationMaskAll;
+    } else {
+      return UIInterfaceOrientationMaskPortrait;
+    }
+  }
+
+  UIInterfaceOrientationMask supportedOrientations = 0;
+  for (NSString *orientation in _supportedOrientations) {
+    if ([orientation isEqualToString:@"portrait"]) {
+      supportedOrientations |= UIInterfaceOrientationMaskPortrait;
+    } else if ([orientation isEqualToString:@"portrait-upside-down"]) {
+      supportedOrientations |= UIInterfaceOrientationMaskPortraitUpsideDown;
+    } else if ([orientation isEqualToString:@"landscape"]) {
+      supportedOrientations |= UIInterfaceOrientationMaskLandscape;
+    } else if ([orientation isEqualToString:@"landscape-left"]) {
+      supportedOrientations |= UIInterfaceOrientationMaskLandscapeLeft;
+    } else if ([orientation isEqualToString:@"landscape-right"]) {
+      supportedOrientations |= UIInterfaceOrientationMaskLandscapeRight;
+    }
+  }
+  return supportedOrientations;
+}
+
 @end

React/Views/RCTModalHostViewController.h

@@ -13,4 +13,6 @@
 
 @property (nonatomic, copy) void (^boundsDidChangeBlock)(CGRect newBounds);
 
+@property (nonatomic, assign) UIInterfaceOrientationMask supportedInterfaceOrientations;
+
 @end

React/Views/RCTModalHostViewController.m

@@ -9,6 +9,8 @@
 
 #import "RCTModalHostViewController.h"
 
+#import "RCTModalHostView.h"
+
 @implementation RCTModalHostViewController
 {
   CGRect _lastViewFrame;
@@ -38,16 +40,6 @@
   }
 }
 
-- (UIInterfaceOrientationMask)supportedInterfaceOrientations
-{
-  // Picking some defaults here, we should probably make this configurable
-  if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
-    return UIInterfaceOrientationMaskAll;
-  } else {
-    return UIInterfaceOrientationMaskPortrait;
-  }
-}
-
 - (UIStatusBarStyle)preferredStatusBarStyle
 {
   return _preferredStatusBarStyle;

React/Views/RCTModalHostViewManager.m

@@ -95,5 +95,7 @@ RCT_EXPORT_MODULE()
 RCT_EXPORT_VIEW_PROPERTY(animationType, NSString)
 RCT_EXPORT_VIEW_PROPERTY(transparent, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onShow, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(supportedOrientations, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)
 
 @end