[Viewport] Add utility to get viewport dimensions

Libraries/Utilities/Viewport.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Viewport
+ * @flow
+ */
+'use strict';
+
+var NativeModules = require('NativeModules');
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+var RCTDimensionManager = NativeModules.DimensionManager;
+
+var logError = require('logError');
+
+var DEVICE_DIMENSIONS_EVENT = 'dimensionsDidChange';
+
+/**
+ * ViewPortDimensions class gives access to the viewport's height and width.
+ *
+ * This could be used if someone wanted an image which stretched the width of
+ * the device.
+ *
+ * Note: The values returned here are all ready in terms of the pixel ratio of
+ * the device. For example, the iPhone 6 renders 750x1334 pixels. However, it has
+ * a pixel ratio of two. Therefore the return values of these functions will
+ * all ready be modified by the pixel ratio. In the iPhone 6's case this means
+ * that the resolution that gets returned will be 375x667.
+ */
+var Viewport = {};
+
+if (RCTDimensionManager) {
+  var _dimensionSubscriptions = {};
+
+  Viewport.addEventListener = function(
+    eventName: ChangeEventName,
+    handler: Function
+  ): void {
+    _dimensionSubscriptions[handler] = RCTDeviceEventEmitter.addListener(
+      DEVICE_DIMENSIONS_EVENT,
+      handler
+    );
+  };
+
+  Viewport.removeEventListener = function(
+    eventName: ChangeEventName,
+    handler: Function
+  ): void {
+    if (!_dimensionSubscriptions[handler]) {
+      return;
+    }
+    _dimensionSubscriptions[handler].remove();
+    _dimensionSubscriptions[handler] = null;
+  };
+
+  Viewport.getDimensions = function(
+    handler: Function
+  ) {
+    RCTDimensionManager.getCurrentDimensions(handler, logError);
+  }
+}
+
+module.exports = Viewport;

Libraries/react-native/react-native.js

@@ -56,6 +56,7 @@ var ReactNative = Object.assign(Object.create(require('React')), {
   StatusBarIOS: require('StatusBarIOS'),
   StyleSheet: require('StyleSheet'),
   VibrationIOS: require('VibrationIOS'),
+  Viewport: require('Viewport'),
 
   // Plugins
   DeviceEventEmitter: require('RCTDeviceEventEmitter'),

React/Modules/RCTDimensionManager.h

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTBridgeModule.h"
+
+@interface RCTDimensionManager : NSObject<RCTBridgeModule>
+
+@end

React/Modules/RCTDimensionManager.m

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTDimensionManager.h"
+#import "RCTBridge.h"
+#import "RCTEventDispatcher.h"
+#import "RCTUtils.h"
+
+static NSDictionary *RCTCurrentDimensions()
+{
+    static NSDictionary *dimensions;
+
+    CGSize frameSize = [UIScreen mainScreen].applicationFrame.size;
+    if ((NSFoundationVersionNumber <= NSFoundationVersionNumber_iOS_7_1)
+            && UIInterfaceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation)) {
+        frameSize = CGSizeMake(frameSize.height, frameSize.width);
+    }
+
+    dimensions = @{
+        @"width": [NSNumber numberWithFloat:frameSize.width],
+        @"height": [NSNumber numberWithFloat:frameSize.height]
+    };
+
+    return dimensions;
+}
+
+
+@implementation RCTDimensionManager
+{
+    NSDictionary *_lastKnownDimensions;
+}
+
+@synthesize bridge = _bridge;
+
+#pragma mark - Lifecycle
+
+- (instancetype)init
+{
+    if ((self = [super init])) {
+        _lastKnownDimensions = RCTCurrentDimensions();
+
+        [[NSNotificationCenter defaultCenter] addObserver:self
+                                                 selector:@selector(deviceOrientationDidChangeNotification:)
+                                                     name:UIDeviceOrientationDidChangeNotification
+                                                   object:nil];
+    }
+
+    return self;
+}
+
+- (void)dealloc
+{
+    [[NSNotificationCenter defaultCenter] removeObserver:self];
+}
+
+#pragma mark - Notification methods
+
+- (void)deviceOrientationDidChangeNotification:(NSNotification*)note
+{
+    _lastKnownDimensions = RCTCurrentDimensions();
+    [_bridge.eventDispatcher sendDeviceEventWithName:@"dimensionsDidChange" body:_lastKnownDimensions];
+}
+
+#pragma mark - Public API
+/**
+ * Get the current dimensions of the viewport
+ */
+- (void)getCurrentDimensions:(RCTResponseSenderBlock)callback
+                       error:(__unused RCTResponseSenderBlock)error
+{
+    RCT_EXPORT();
+    _lastKnownDimensions = RCTCurrentDimensions();
+
+    callback(@[_lastKnownDimensions]);
+}
+
+
+@end

React/React.xcodeproj/project.pbxproj

@@ -59,6 +59,7 @@
 		83CBBA691A601EF300E9B192 /* RCTEventDispatcher.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CBBA661A601EF300E9B192 /* RCTEventDispatcher.m */; };
 		83CBBA981A6020BB00E9B192 /* RCTTouchHandler.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */; };
 		83CBBACC1A6023D300E9B192 /* RCTConvert.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CBBACB1A6023D300E9B192 /* RCTConvert.m */; };
+		EBA277681ACB4502008D277F /* RCTDimensionManager.m in Sources */ = {isa = PBXBuildFile; fileRef = EBA277671ACB4502008D277F /* RCTDimensionManager.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -190,6 +191,8 @@
 		83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTouchHandler.m; sourceTree = "<group>"; };
 		83CBBACA1A6023D300E9B192 /* RCTConvert.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTConvert.h; sourceTree = "<group>"; };
 		83CBBACB1A6023D300E9B192 /* RCTConvert.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert.m; sourceTree = "<group>"; };
+		EBA277661ACB44EC008D277F /* RCTDimensionManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDimensionManager.h; sourceTree = "<group>"; };
+		EBA277671ACB4502008D277F /* RCTDimensionManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTDimensionManager.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -242,6 +245,8 @@
 				13B07FEE1A69327A00A75B9A /* RCTTiming.m */,
 				13E067481A70F434002CDEE1 /* RCTUIManager.h */,
 				13E067491A70F434002CDEE1 /* RCTUIManager.m */,
+				EBA277661ACB44EC008D277F /* RCTDimensionManager.h */,
+				EBA277671ACB4502008D277F /* RCTDimensionManager.m */,
 			);
 			path = Modules;
 			sourceTree = "<group>";
@@ -503,6 +508,7 @@
 				14435CE51AAC4AE100FC20F4 /* RCTMap.m in Sources */,
 				134FCB3E1A6E7F0800051CC8 /* RCTWebViewExecutor.m in Sources */,
 				13B0801C1A69489C00A75B9A /* RCTNavItem.m in Sources */,
+				EBA277681ACB4502008D277F /* RCTDimensionManager.m in Sources */,
 				83CBBA691A601EF300E9B192 /* RCTEventDispatcher.m in Sources */,
 				13E0674A1A70F434002CDEE1 /* RCTUIManager.m in Sources */,
 				13B0801B1A69489C00A75B9A /* RCTNavigatorManager.m in Sources */,

website/server/extractDocs.js

@@ -125,6 +125,7 @@ var apis = [
   '../Libraries/Components/StatusBar/StatusBarIOS.ios.js',
   '../Libraries/StyleSheet/StyleSheet.js',
   '../Libraries/Vibration/VibrationIOS.ios.js',
+  '../Libraries/Utilities/ViewPortDimensions.js',
 ];
 
 var styles = [