From 28824f8eb3a06a3a2e7b3046f3df591e75516dbf Mon Sep 17 00:00:00 2001
From: Daniel Friesen <daniel@nadir-seen-fire.com>
Date: Fri, 20 Oct 2017 18:55:17 -0700
Subject: [PATCH] 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    | 61 +++++++++++++++++++++++++++++
 RNTester/js/RNTesterList.android.js |  4 ++
 RNTester/js/RNTesterList.ios.js     |  5 +++
 3 files changed, 70 insertions(+)
 create mode 100644 RNTester/js/DimensionsExample.js

diff --git a/RNTester/js/DimensionsExample.js b/RNTester/js/DimensionsExample.js
new file mode 100644
index 000000000..9560a43d3
--- /dev/null
+++ b/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" />; }
+  },
+];
diff --git a/RNTester/js/RNTesterList.android.js b/RNTester/js/RNTesterList.android.js
index 5f5e4e6c8..eee084dd0 100644
--- a/RNTester/js/RNTesterList.android.js
+++ b/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'),
diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js
index a547363cb..b01a54d79 100644
--- a/RNTester/js/RNTesterList.ios.js
+++ b/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'),