Update Dimensions when device orientation changes

Reviewed By: nicklockwood

Differential Revision: D2939877

fb-gh-sync-id: ec6161448bff34c07b93f19e1ee953657675bad5
shipit-source-id: ec6161448bff34c07b93f19e1ee953657675bad5

Libraries/Utilities/Dimensions.js

@@ -13,20 +13,28 @@
 
 var Platform = require('Platform');
 var UIManager = require('UIManager');
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 
 var invariant = require('fbjs/lib/invariant');
 
-var dimensions = UIManager.Dimensions;
+var dimensions = {};
-
+class Dimensions {
+  /**
+   * This should only be called from native code by sending the
+   * didUpdateDimensions event.
+   *
+   * @param {object} dims Simple string-keyed object of dimensions to set
+   */
+  static set(dims: {[key:string]: any}): void {
     // We calculate the window dimensions in JS so that we don't encounter loss of
     // precision in transferring the dimensions (which could be non-integers) over
     // the bridge.
-if (dimensions && dimensions.windowPhysicalPixels) {
+    if (dims && dims.windowPhysicalPixels) {
       // parse/stringify => Clone hack
-  dimensions = JSON.parse(JSON.stringify(dimensions));
+      dims = JSON.parse(JSON.stringify(dims));
 
-  var windowPhysicalPixels = dimensions.windowPhysicalPixels;
+      var windowPhysicalPixels = dims.windowPhysicalPixels;
-  dimensions.window = {
+      dims.window = {
         width: windowPhysicalPixels.width / windowPhysicalPixels.scale,
         height: windowPhysicalPixels.height / windowPhysicalPixels.scale,
         scale: windowPhysicalPixels.scale,
@@ -34,8 +42,8 @@ if (dimensions && dimensions.windowPhysicalPixels) {
       };
       if (Platform.OS === 'android') {
         // Screen and window dimensions are different on android
-    var screenPhysicalPixels = dimensions.screenPhysicalPixels;
+        var screenPhysicalPixels = dims.screenPhysicalPixels;
-    dimensions.screen = {
+        dims.screen = {
           width: screenPhysicalPixels.width / screenPhysicalPixels.scale,
           height: screenPhysicalPixels.height / screenPhysicalPixels.scale,
           scale: screenPhysicalPixels.scale,
@@ -43,23 +51,15 @@ if (dimensions && dimensions.windowPhysicalPixels) {
         };
 
         // delete so no callers rely on this existing
-    delete dimensions.screenPhysicalPixels;
+        delete dims.screenPhysicalPixels;
       } else {
-    dimensions.screen = dimensions.window;
+        dims.screen = dims.window;
       }
       // delete so no callers rely on this existing
-  delete dimensions.windowPhysicalPixels;
+      delete dims.windowPhysicalPixels;
     }
 
-class Dimensions {
-  /**
-   * This should only be called from native code.
-   *
-   * @param {object} dims Simple string-keyed object of dimensions to set
-   */
-  static set(dims: {[key:string]: any}): bool {
     Object.assign(dimensions, dims);
-    return true;
   }
 
   /**
@@ -83,4 +83,9 @@ class Dimensions {
   }
 }
 
+Dimensions.set(UIManager.Dimensions);
+RCTDeviceEventEmitter.addListener('didUpdateDimensions', function(update) {
+  Dimensions.set(update);
+});
+
 module.exports = Dimensions;

React/Modules/RCTUIManager.m

@@ -201,17 +201,14 @@ static UIViewAnimationOptions UIViewAnimationOptionsFromRCTAnimationType(RCTAnim
   NSDictionary *_componentDataByName;
 
   NSMutableSet<id<RCTComponent>> *_bridgeTransactionListeners;
+
+  UIInterfaceOrientation _currentInterfaceOrientation;
 }
 
 @synthesize bridge = _bridge;
 
 RCT_EXPORT_MODULE()
 
-/**
- * Declared in RCTBridge.
- */
-extern NSString *RCTBridgeModuleNameForClass(Class cls);
-
 - (void)didReceiveNewContentSizeMultiplier
 {
   __weak RCTUIManager *weakSelf = self;
@@ -225,6 +222,23 @@ extern NSString *RCTBridgeModuleNameForClass(Class cls);
   });
 }
 
+- (void)interfaceOrientationWillChange:(NSNotification *)notification
+{
+  UIInterfaceOrientation nextOrientation =
+    [notification.userInfo[UIApplicationStatusBarOrientationUserInfoKey] integerValue];
+
+  // Update when we go from portrait to landscape, or landscape to portrait
+  if ((UIInterfaceOrientationIsPortrait(_currentInterfaceOrientation) &&
+      !UIInterfaceOrientationIsPortrait(nextOrientation)) ||
+      (UIInterfaceOrientationIsLandscape(_currentInterfaceOrientation) &&
+      !UIInterfaceOrientationIsLandscape(nextOrientation))) {
+    [_bridge.eventDispatcher sendDeviceEventWithName:@"didUpdateDimensions"
+                                                body:RCTExportedDimensions(YES)];
+  }
+
+  _currentInterfaceOrientation = nextOrientation;
+}
+
 - (void)invalidate
 {
   /**
@@ -298,6 +312,11 @@ extern NSString *RCTBridgeModuleNameForClass(Class cls);
                                            selector:@selector(didReceiveNewContentSizeMultiplier)
                                                name:RCTAccessibilityManagerDidUpdateMultiplierNotification
                                              object:_bridge.accessibilityManager];
+
+  [[NSNotificationCenter defaultCenter] addObserver:self
+                                           selector:@selector(interfaceOrientationWillChange:)
+                                               name:UIApplicationWillChangeStatusBarOrientationNotification
+                                             object:nil];
 }
 
 - (dispatch_queue_t)methodQueue
@@ -1367,21 +1386,31 @@ RCT_EXPORT_METHOD(clearJSResponder)
      allJSConstants[name] = constantsNamespace;
   }];
 
+  _currentInterfaceOrientation = [RCTSharedApplication() statusBarOrientation];
   [allJSConstants addEntriesFromDictionary:@{
     @"customBubblingEventTypes": bubblingEvents,
     @"customDirectEventTypes": directEvents,
-    @"Dimensions": @{
+    @"Dimensions": RCTExportedDimensions(NO)
-      @"window": @{
-        @"width": @(RCTScreenSize().width),
-        @"height": @(RCTScreenSize().height),
-        @"scale": @(RCTScreenScale()),
-      },
-    },
   }];
 
   return allJSConstants;
 }
 
+static NSDictionary *RCTExportedDimensions(BOOL rotateBounds)
+{
+  RCTAssertMainThread();
+
+  // Don't use RCTScreenSize since it the interface orientation doesn't apply to it
+  CGRect screenSize = [[UIScreen mainScreen] bounds];
+  return @{
+    @"window": @{
+        @"width": @(rotateBounds ? screenSize.size.height : screenSize.size.width),
+        @"height": @(rotateBounds ? screenSize.size.width : screenSize.size.height),
+        @"scale": @(RCTScreenScale()),
+    },
+  };
+}
+
 RCT_EXPORT_METHOD(configureNextLayoutAnimation:(NSDictionary *)config
                   withCallback:(RCTResponseSenderBlock)callback
                   errorCallback:(__unused RCTResponseSenderBlock)errorCallback)