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,53 +13,53 @@
 
 var Platform = require('Platform');
 var UIManager = require('UIManager');
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 
 var invariant = require('fbjs/lib/invariant');
 
-var dimensions = UIManager.Dimensions;
-
-// 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) {
-  // parse/stringify => Clone hack
-  dimensions = JSON.parse(JSON.stringify(dimensions));
-
-  var windowPhysicalPixels = dimensions.windowPhysicalPixels;
-  dimensions.window = {
-    width: windowPhysicalPixels.width / windowPhysicalPixels.scale,
-    height: windowPhysicalPixels.height / windowPhysicalPixels.scale,
-    scale: windowPhysicalPixels.scale,
-    fontScale: windowPhysicalPixels.fontScale,
-  };
-  if (Platform.OS === 'android') {
-    // Screen and window dimensions are different on android
-    var screenPhysicalPixels = dimensions.screenPhysicalPixels;
-    dimensions.screen = {
-      width: screenPhysicalPixels.width / screenPhysicalPixels.scale,
-      height: screenPhysicalPixels.height / screenPhysicalPixels.scale,
-      scale: screenPhysicalPixels.scale,
-      fontScale: screenPhysicalPixels.fontScale,
-    };
-
-    // delete so no callers rely on this existing
-    delete dimensions.screenPhysicalPixels;
-  } else {
-    dimensions.screen = dimensions.window;
-  }
-  // delete so no callers rely on this existing
-  delete dimensions.windowPhysicalPixels;
-}
-
+var dimensions = {};
 class Dimensions {
   /**
-   * This should only be called from native code.
+   * 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}): bool {
+  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 (dims && dims.windowPhysicalPixels) {
+      // parse/stringify => Clone hack
+      dims = JSON.parse(JSON.stringify(dims));
+
+      var windowPhysicalPixels = dims.windowPhysicalPixels;
+      dims.window = {
+        width: windowPhysicalPixels.width / windowPhysicalPixels.scale,
+        height: windowPhysicalPixels.height / windowPhysicalPixels.scale,
+        scale: windowPhysicalPixels.scale,
+        fontScale: windowPhysicalPixels.fontScale,
+      };
+      if (Platform.OS === 'android') {
+        // Screen and window dimensions are different on android
+        var screenPhysicalPixels = dims.screenPhysicalPixels;
+        dims.screen = {
+          width: screenPhysicalPixels.width / screenPhysicalPixels.scale,
+          height: screenPhysicalPixels.height / screenPhysicalPixels.scale,
+          scale: screenPhysicalPixels.scale,
+          fontScale: screenPhysicalPixels.fontScale,
+        };
+
+        // delete so no callers rely on this existing
+        delete dims.screenPhysicalPixels;
+      } else {
+        dims.screen = dims.window;
+      }
+      // delete so no callers rely on this existing
+      delete dims.windowPhysicalPixels;
+    }
+
     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
@@ -1231,7 +1250,7 @@ RCT_EXPORT_METHOD(takeSnapshot:(id /* NSString or NSNumber */)target
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject)
 {
-  [self addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
+  [self addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
 
     // Get view
     UIView *view;
@@ -1367,21 +1386,31 @@ RCT_EXPORT_METHOD(clearJSResponder)
      allJSConstants[name] = constantsNamespace;
   }];
 
+  _currentInterfaceOrientation = [RCTSharedApplication() statusBarOrientation];
   [allJSConstants addEntriesFromDictionary:@{
     @"customBubblingEventTypes": bubblingEvents,
     @"customDirectEventTypes": directEvents,
-    @"Dimensions": @{
-      @"window": @{
-        @"width": @(RCTScreenSize().width),
-        @"height": @(RCTScreenSize().height),
-        @"scale": @(RCTScreenScale()),
-      },
-    },
+    @"Dimensions": RCTExportedDimensions(NO)
   }];
 
   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)