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] supportedInterfaceOrientations #2031

Closed
DaleJefferson opened this Issue Jul 17, 2015 · 27 comments

Comments

Projects
None yet
@DaleJefferson
Contributor

DaleJefferson commented Jul 17, 2015

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

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jul 17, 2015

Contributor

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

Contributor

yamill commented Jul 17, 2015

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

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Jul 17, 2015

Contributor

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

Contributor

sahrens commented Jul 17, 2015

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

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jul 17, 2015

Contributor

@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}];
  }
Contributor

yamill commented Jul 17, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Jul 17, 2015

Collaborator

@yamill publish that module to npm?

Collaborator

ide commented Jul 17, 2015

@yamill publish that module to npm?

@yamill

This comment has been minimized.

Show comment
Hide comment
@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Jul 17, 2015

Collaborator

Thanks for taking the initiative @yamill, awesome!

Collaborator

ide commented Jul 17, 2015

Thanks for taking the initiative @yamill, awesome!

@jaysalvat

This comment has been minimized.

Show comment
Hide comment
@jaysalvat

jaysalvat Jul 19, 2015

Contributor

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.

Contributor

jaysalvat commented Jul 19, 2015

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

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jul 20, 2015

Contributor

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

Contributor

yamill commented Jul 20, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 20, 2015

Collaborator

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

Collaborator

brentvatne commented Jul 20, 2015

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

@yamill

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jul 20, 2015

Contributor

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 👍

Contributor

yamill commented Jul 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@dsibiski

dsibiski Jul 20, 2015

Contributor

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

Contributor

dsibiski commented Jul 20, 2015

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

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 20, 2015

Collaborator

Nice one @yamill! 🍕 for you

Collaborator

brentvatne commented Jul 20, 2015

Nice one @yamill! 🍕 for you

@brentvatne brentvatne closed this Jul 20, 2015

@DaleJefferson

This comment has been minimized.

Show comment
Hide comment
@DaleJefferson

DaleJefferson Jul 20, 2015

Contributor

Why has this issue been closed?

Contributor

DaleJefferson commented Jul 20, 2015

Why has this issue been closed?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 20, 2015

Collaborator

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

Collaborator

brentvatne commented Jul 20, 2015

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

@DaleJefferson

This comment has been minimized.

Show comment
Hide comment
@DaleJefferson

DaleJefferson Jul 21, 2015

Contributor

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.

Contributor

DaleJefferson commented Jul 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 21, 2015

Collaborator

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

Collaborator

brentvatne commented Jul 21, 2015

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

@brentvatne brentvatne reopened this Jul 21, 2015

@DaleJefferson

This comment has been minimized.

Show comment
Hide comment
@DaleJefferson

DaleJefferson Jul 21, 2015

Contributor

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.

Contributor

DaleJefferson commented Jul 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 21, 2015

Collaborator

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 😄

Collaborator

brentvatne commented Jul 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Jul 21, 2015

Contributor

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.

Contributor

sahrens commented Jul 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ptmt

ptmt Sep 21, 2015

Contributor

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.

Contributor

ptmt commented Sep 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 21, 2015

Collaborator

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.

Collaborator

ide commented Sep 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ptmt

ptmt Sep 21, 2015

Contributor

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

Contributor

ptmt commented Sep 21, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Mar 16, 2016

Contributor

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.

Contributor

mkonicek commented Mar 16, 2016

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.

@mkonicek mkonicek closed this Mar 16, 2016

@masterkrang

This comment has been minimized.

Show comment
Hide comment
@masterkrang

masterkrang Apr 8, 2016

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 🎱

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

This comment has been minimized.

Show comment
Hide comment
@wellyshen

wellyshen Mar 7, 2017

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

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

@soutot

This comment has been minimized.

Show comment
Hide comment
@soutot

soutot Mar 21, 2017

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

soutot commented Mar 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@swaroopa94

swaroopa94 Apr 28, 2017

Same issue in 0.43.0 any updates how to solve this

swaroopa94 commented Apr 28, 2017

Same issue in 0.43.0 any updates how to solve this

@facebook facebook locked as resolved and limited conversation to collaborators Jul 22, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.