Implement a JSTester example for the Dimensions API

Summary:
JSTester is missing a page for the Dimensions API. This also makes it hard to test out some things in the tester app that affect the app's frame when you need to know how they affect the dimensions.

![screenshot_1508500992](https://user-images.githubusercontent.com/53399/31820157-d28dc1cc-b554-11e7-84a1-4bb39204adab.png)
![simulator screen shot - iphone 7 plus - 2017-10-20 at 05 03 08](https://user-images.githubusercontent.com/53399/31820158-d2a52204-b554-11e7-9eb4-84c757830871.png)

* [INTERNAL] [ENHANCEMENT] [JSTester] - Dimensions example added to JSTester
Closes https://github.com/facebook/react-native/pull/16473

Differential Revision: D6117984

Pulled By: hramos

fbshipit-source-id: 8f42ca7aaf42b76f8b9771317ce82a2cfce47ffa

RNTester/js/DimensionsExample.js

@@ -0,0 +1,61 @@
+/**
+ * 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 DimensionsExample
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  Dimensions,
+  Text,
+  View
+} = ReactNative;
+
+class DimensionsSubscription extends React.Component<{dim: string}, {dims: Object}> {
+  state = {
+    dims: Dimensions.get(this.props.dim),
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener('change', this._handleDimensionsChange);
+  }
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener('change', this._handleDimensionsChange);
+  }
+
+  _handleDimensionsChange = (dimensions) => {
+    this.setState({
+      dims: dimensions[this.props.dim],
+    });
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.dims)}</Text>
+      </View>
+    );
+  }
+}
+
+exports.title = 'Dimensions';
+exports.description = 'Dimensions of the viewport';
+exports.examples = [
+  {
+    title: 'window',
+    render(): React.Element<any> { return <DimensionsSubscription dim="window" />; }
+  },
+  {
+    title: 'screen',
+    render(): React.Element<any> { return <DimensionsSubscription dim="screen" />; }
+  },
+];

RNTester/js/RNTesterList.android.js

@@ -160,6 +160,10 @@ const APIExamples: Array<RNTesterExample> = [
     key: 'DatePickerAndroidExample',
     module: require('./DatePickerAndroidExample'),
   },
+  {
+    key: 'Dimensions',
+    module: require('./DimensionsExample'),
+  },
   {
     key: 'GeolocationExample',
     module: require('./GeolocationExample'),

RNTester/js/RNTesterList.ios.js

@@ -271,6 +271,11 @@ const APIExamples: Array<RNTesterExample> = [
     module: require('./ClipboardExample'),
     supportsTVOS: false,
   },
+  {
+    key: 'Dimensions',
+    module: require('./DimensionsExample'),
+    supportsTVOS: true,
+  },
   {
     key: 'GeolocationExample',
     module: require('./GeolocationExample'),