[Orientation] supportedInterfaceOrientations

[DaleLJefferson]

React Native needs some way to allow for setting a preferred orientation on a screen by screen basis.

My use case is I have an iPhone app that should be portrait except for the video and picture screens which should allow rotation to landscape.

- (NSUInteger)supportedInterfaceOrientations{
    return UIInterfaceOrientationMaskPortrait;
}

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/#//apple_ref/occ/instm/UIViewController/supportedInterfaceOrientations

Looks like this could be related to #426

[yamill]

I definitely need the same too. Any API coming soon for this?

[sahrens]

Right now it's just manual - there are orientation events you can listen to
and rotate and re-layout your components themselves :(
On Fri, Jul 17, 2015 at 8:11 PM Yamill Vallecillo notifications@github.com
wrote:

I definitely need the same too. Any API coming soon for this?

—
Reply to this email directly or view it on GitHub
#2031 (comment)
.

[yamill]

@sahrens Aww. It would be nice to make a module for handling preferred orientation for a screen.

I have something like this right now that listens for orientation changes. If there is something in the api to listen without a module that would be great.

  - (void)deviceOrientationDidChange:(NSNotification *)notification
  {
    UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];

    NSString *orientationStr;
    switch (orientation) {
      case UIDeviceOrientationPortrait:
        orientationStr = @"PORTRAIT";
        break;
      case UIDeviceOrientationPortraitUpsideDown:
      case UIDeviceOrientationLandscapeLeft:
      case UIDeviceOrientationLandscapeRight:

        orientationStr = @"LANDSCAPE";
        break;
      default:
        orientationStr = @"UNKNOWN";
        break;
    }

    [_bridge.eventDispatcher sendDeviceEventWithName:@"orientationDidChange"
                                                body:@{@"orientation": orientationStr}];
  }

[ide]

@yamill publish that module to npm?

[yamill]

@ide @sahrens published 😄

https://www.npmjs.com/package/react-native-orientation

[ide]

Thanks for taking the initiative @yamill, awesome!

[jaysalvat]

Hi, I solve this without any installation with a trick like this.

onLayoutChange: function (e) {
    var layout = e.nativeEvent.layout;

    this.setSate({ orientation: (layout.width < layout.height ? 'portrait' : 'landscape') });
},

render: function () {
    return (
        <View style={ styles.container } onLayout={ this.onLayoutChange }>
             // ---
        </View>
    );
},

But I think this is not what @dalejefferson is looking for. He is looking for orientation lock/unlock pages.
Right? I would be interested in too.

[yamill]

@jaysalvat nice solution!

Yeah I'm interested in that orientation lock/unlock on pages too. If someone would like to to contribute a PR to react-native-orientation I'd gladly accept it.

[brentvatne]

@dsibiski - maybe this is something that we could extract out of the Playground app?

[yamill]

Thanks @brentvatne for the suggestion 👏 I just extracted @dsibiski implementation from the playground app!

I added a new function shouldRotate() to the module to allow this functionality.

This should hopefully solve all of our troubles 👍

[dsibiski]

Nice! I was going to look into this soon, good work @yamill 👍 cc/ @brentvatne

[brentvatne]

Nice one @yamill! 🍕 for you

[DaleLJefferson]

Why has this issue been closed?

[brentvatne]

@dalejefferson - @yamill's library https://github.com/yamill/react-native-orientation allows you to do this. Is there a use case that it doesn't handle for you?

[DaleLJefferson]

Thanks for all the suggestions on this, I will definitely be checking out @yamill's library.

Maybe I was not clear in my original message. My issue was not that I did not know how to write this code, or how to use a 3rd party library. My suggestion was, this should be built into React Native since it's a fundamental part of the iOS SDK.

By closing this issue are you saying you do not believe this should be part of React Native?

I don't think I've ever created an iPhone app that did not use this feature, if this is not going to be built in we should point people to a 3rd party solution.

[brentvatne]

@dalejefferson - sounds good, I'll reopen so we can discuss integrating something into core. Can you propose an API for it? Also, given that you have a lot of experience using it in your apps, if you can provide some of the use cases that you've come across (aside from those that you mentioned in the original post) so that we can consider how the API would work against them, that would be great.

The reason I closed in the first place is that a community library is a great place to quickly iterate on an API. If we include it in the core, there's a lot more to consider - we have to be careful to do a very good job upfront or worry about needing to support / deprecate the API in the future. We also keep all of the discussions in one place - on that repo - where it doesn't get drowned out by the other issue discussions. Sorry if the closing seemed a bit trigger-happy, I was trying to clean up issues today and it looked like this has been resolved.

[DaleLJefferson]

I'm leading a team of developers working on a number of large React Native apps at the moment and we have discovered the back of orientation/ resize support.

Use cases are:

iPhone app that should display in portrait in all screens except videos and pictures.
iPad app that should display a menu on the left in landscape and hide it in portrait.
Universal app that does the whole split view controller thing, of showing master on iPhone and master detail on iPad. With the new IOS 9 side by side apps and resizing this is even more important.

Maybe I should create a new issue suggesting a new module that supports these use cases and to start discussing an api.

[brentvatne]

Awesome @dalejefferson - if you could create a new issue with the information above and proposing integrating a module into core that would be excellent! This one works well as a historical record of a solution to the problem but perhaps not the solution going forward. When you create it, just reference this from it and I'll close this one after 😄

[sahrens]

Agreed we should have support in core - looking forward to API and PR proposals.

On Jul 21, 2015, at 8:23 AM, Brent Vatne notifications@github.com wrote:

Awesome @dalejefferson - if you could create a new issue with the information above and proposing integrating a module into core that would be excellent! This one works well as a historical record of a solution to the problem but perhaps not the solution going forward. When you create it, just reference this from it and I'll close this one after

—
Reply to this email directly or view it on GitHub.

[ptmt]

I have the related problem yamill/react-native-orientation#3. Our layout heavily depends on Dimensions module which initialized only on start as a constant. Is there are some current progress on it? If not, what is the best way to implement to break as little things as possible?

Now I have a dirty method in UIManager (obtaining frame size and passing it via callback) and since it asynchronous to be able use it in styles, I use Dimensions as a part of the global state and special action to handle this. Listen on Orientation Changes -> Obtain the current dimensions -> Dispatch Action -> Rerender layout.

Also useful for Split View on iPad Air 2 / Pro.

[ide]

Could you use an onLayout listener on your root View component? This to me feels like it has a characteristics of what you want: the actual size of your React frame instead of the device dimensions (which never change unless you move the app from one device to another) and supports these cases like Split View. The biggest issue with onLayout on the root is that you need to thread the onLayout prop down through all of the composite components until you can assign it to a primitive View component, but it should be more correct than Dimensions.

[ptmt]

@ide, you're totally right! 👍 The most obvious and working example was always before my eyes (UIExplorer/onLayout complied with iPad support works awesome). Sorry to interrupt the thread. I hope everyone who google react-native split mode find solution here as well.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/orientation-supportedinterfaceorientations

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix. We rely on the community to provide
bugfixes as the core team is focused on performance.

[masterkrang]

Just a note about discovering this thread: confused as to whether this would be included in the core or not. Also agree with @dalejefferson, seems like keeping it open is a good idea. Sure, reading through the thread it looks like using @yamill's library is the best bet, however, if that isn't true tomorrow, this thread being closed could actually be misleading. Going to check out @yamill's library now 🎱

[wellyshen]

@yamill 's library is not working on RN 0.42.0, I'm looking for a new solution, anyone suggest for it?

[soutot]

Do we have any updates on this? I am also not able to use react-native-orientation since the screen is not being locked

[swaroopa94]

Same issue in 0.43.0 any updates how to solve this