Listen to device orientation changes

Summary:
Similar to iOS, send device orientation changes events. This does not have the
`getCurrentOrientation` method, because it's not used. If necessary, we'll
add it separately.
This also adds a simple example for testing.

We listen to orientation changes in `onGlobalLayout`, and check if the rotation of the device has changed. If it has, we emit the event.
But:
- `onGlobalLayout` (and `onConfigurationChanged` - which is the method usually used for checking for device orientation changes) is *not* called when the device goes from landscape
  to reverse landscape (same with portrait), as that is not a relayout / configuration change. We could detect if this happens with the help of an `OrientationEventListener`. However, this listener notifies you if the degree
  of the phone changes by a single degree, which means that you need to know by how many degrees the phone needs to change in order for the orientation to change. I haven't looked into how accurate this could be, but I suspect that in practice it would cause a lot of bugs. A simple `abgs` and google search reveals that everybody uses a different margin for detecting a rotation change (from 30 to 45 degrees), so I suspect that this won't work
  as expected in practice. Therefore, we're not using this here, and we're sticking to what android provides via `onConfigurationChanged`. If we find that we have issues because users need to know when the user goes
  from landscape to reverse landscape, then we'll have to revisit this.

Reviewed By: foghina

Differential Revision: D3797521

fbshipit-source-id: 62508efd342a9a4b41b42b6138c73553cfdefebc

Examples/UIExplorer/android/app/src/main/AndroidManifest.xml

@@ -23,7 +23,9 @@
       android:theme="@style/Theme.ReactNative.AppCompat.Light" >
     <activity
         android:name=".UIExplorerActivity"
-        android:label="@string/app_name" >
+        android:label="@string/app_name"
+        android:screenOrientation="fullSensor"
+        android:configChanges="orientation|screenSize" >
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />

Examples/UIExplorer/js/OrientationChangeExample.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2013-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.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule OrientationChangeExample
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  DeviceEventEmitter,
+  Text,
+  View,
+} = ReactNative;
+
+import type EmitterSubscription from 'EmitterSubscription';
+
+class OrientationChangeExample extends React.Component {
+  _orientationSubscription: EmitterSubscription;
+
+  state = {
+    currentOrientation: '',
+    orientationDegrees: 0,
+    isLandscape: false,
+  };
+
+  componentDidMount() {
+    this._orientationSubscription = DeviceEventEmitter.addListener(
+      'namedOrientationDidChange', this._onOrientationChange,
+    );
+  }
+
+  componentWillUnmount() {
+    this._orientationSubscription.remove();
+  }
+
+  _onOrientationChange = (orientation: Object) => {
+    this.setState({
+      currentOrientation: orientation.name,
+      orientationDegrees: orientation.rotationDegrees,
+      isLandscape: orientation.isLandscape,
+    });
+  }
+
+  render() {
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state)}</Text>
+      </View>
+    );
+  }
+}
+
+exports.title = 'OrientationChangeExample';
+exports.description = 'listening to orientation changes';
+exports.examples = [
+  {
+    title: 'OrientationChangeExample',
+    description: 'listening to device orientation changes',
+    render() { return <OrientationChangeExample />; },
+  },
+];

Examples/UIExplorer/js/UIExplorerList.android.js

@@ -22,14 +22,12 @@
  */
 'use strict';
 
-const React = require('React');
-
 export type UIExplorerExample = {
-  key: string;
-  module: React.Component;
+  key: string,
+  module: Object,
 };
 
-var ComponentExamples: Array<UIExplorerExample> = [
+const ComponentExamples: Array<UIExplorerExample> = [
   {
     key: 'ActivityIndicatorExample',
     module: require('./ActivityIndicatorExample'),
@@ -108,7 +106,7 @@ var ComponentExamples: Array<UIExplorerExample> = [
   },
 ];
 
-const APIExamples = [
+const APIExamples: Array<UIExplorerExample> = [
   {
     key: 'AccessibilityAndroidExample',
     module: require('./AccessibilityAndroidExample'),
@@ -177,6 +175,10 @@ const APIExamples = [
     key: 'NetInfoExample',
     module: require('./NetInfoExample'),
   },
+  {
+    key: 'OrientationChangeExample',
+    module: require('./OrientationChangeExample'),
+  },
   {
     key: 'PanResponderExample',
     module: require('./PanResponderExample'),

Examples/UIExplorer/js/UIExplorerList.ios.js

@@ -23,8 +23,8 @@
 'use strict';
 
 export type UIExplorerExample = {
-  key: string;
-  module: Object;
+  key: string,
+  module: Object,
 };
 
 const ComponentExamples: Array<UIExplorerExample> = [
@@ -235,6 +235,10 @@ const APIExamples: Array<UIExplorerExample> = [
     key: 'NetInfoExample',
     module: require('./NetInfoExample'),
   },
+  {
+    key: 'OrientationChangeExample',
+    module: require('./OrientationChangeExample'),
+  },
   {
     key: 'PanResponderExample',
     module: require('./PanResponderExample'),