Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
joewalnes opened this issue Mar 29, 2015 · 11 comments
Closed
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@joewalnes
Copy link

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

@jlevine22
Copy link
Contributor

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

@donyu donyu added Good first issue Interested in collaborating? Take a stab at fixing one of these issues. module request and removed module request Good first issue Interested in collaborating? Take a stab at fixing one of these issues. labels Apr 1, 2015
@randomer
Copy link

randomer commented Apr 5, 2015

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

@clayallsopp
Copy link
Contributor

@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
Copy link

randomer commented Apr 5, 2015

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

@brentvatne
Copy link
Collaborator

@randomer - agreed, that would be nice

@joewalnes
Copy link
Author

@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
Copy link
Contributor

@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
Copy link
Contributor

ide commented Apr 8, 2015

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
Copy link

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

@brentvatne brentvatne changed the title Create API to listen to device orientation change events [Orientation] Create API to listen to device orientation change events May 31, 2015
@cgarvis
Copy link

cgarvis commented Jun 10, 2015

👍

@brentvatne
Copy link
Collaborator

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 😸

@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests