[Orientation] Create API to listen to device orientation change events

[joewalnes]

Ability to read device orientation and register a listener for when it changes.

[jlevine22]

+1. Would also be nice to control orientation on a per route basis in a Navigator

[randomer]

Also, it would be nice to be able to "lock" the screen programatically.

[clayallsopp]

@joewalnes Is this sort of API what you're looking for? (generally mirrors the UIDevice API)

DeviceIOS = {
  Orientation : {
    Unknown
    Portrait
    PortraitUpsideDown
    LandscapeLeft
    LandscapeRight
    FaceUp
    FaceDown
  }
  getCurrentOrientation
  addChangeListener
}

// Flux-esque change callback:
DeviceIOS.addChangeListener(() => {
  var currentRotation = RotationStore.getCurrentRotation() // one of DeviceIOS.Orientation
})

@jlevine22 you mean force certain routes to be either landscape or portrait?

@randomer unfortunately locking the screen is a private API, can't be used in production apps: http://stackoverflow.com/questions/18388150/lock-screen-on-device-programmatically

[randomer]

Well, actually I meant locking the orientation, not the screen. Sorry for the confusion

[brentvatne]

@randomer - agreed, that would be nice

[joewalnes]

@clayallsopp The API looks like a good start. My concern would be the race condition due to the async nature of ReactNative.

For example, in between reading the initial device rotation and registering a change listener, the rotation may have been changed on the main thread so an event would be missed.

[clayallsopp]

@joewalnes is this a thing we're worried about? It looks like AppStateIOS has exactly the same problem (it is initially undefined, and at some async point it gets its value from the native code)

[ide]

the pattern I use is to treat these states as eventually consistent in my application code. implementing the JS portion of the module then involves three parts:

1. passing the initial value from Obj-C to JS when the module is first -[init]'d. this ensures that JS always has access to a state value (e.g. app state, device orientation, screen size) even if it is potentially stale.
2. subscribing to updates from Obj-C via the DeviceEventEmitter. this runs the first time the JS module is set up.
3. asynchronously fetching the latest value from Obj-C. this also runs the first time the JS module is set up.

the race condition is still there, but it usually isn't an issue as long as the JS app is guaranteed to catch up to the native state. when the race condition is an issue (e.g. you need to make some method calls that only make sense in certain states) then I write a bit of Obj-C that handles the native notifications synchronously.

[andoriyu]

@clayallsopp That said if you look into Stringwire app you will see that their streaming view is locked in landscape. However, I suspect they just rotated elements to look like it's landscape. (look at animation when you push/pop view from display)

[cgarvis]

👍

[brentvatne]

Related to #2031, @yamill's project https://github.com/yamill/react-native-orientation looks like a good place to look for this - API needs a bit of work but he is on that and you can submit a PR there if you are so inclined 😸