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
This commit is contained in:
Andrei Coman
2016-09-06 03:54:27 -07:00
committed by Facebook Github Bot 4
parent 5d240a8ed3
commit f07ca31303
5 changed files with 164 additions and 25 deletions

View File

@@ -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'),