React-native-navigation: Change orientation on iOS doesn't work (2.17.0)

[zabojad]

Issue Description

Changing/setting the orientation with RNN API does not seem to work on iOS.

I have an application which is portrait only, except on one screen where both "portrait" and "landscape" are allowed.

To implement this orientation setting, I do a setStackRoot to that screen with the following options:

{
    layout: {
        orientation: ["portrait","landscape"],
    }
}

This orientation setting is correctly handled on Android but is not handled at all on iOS. On iOS, the orientation stays on "portrait" only.

My iOS app orientation settings in xcode were "portrait" only for my app. I tried to set it to "portrait"/"landscape left"/"landscape right". But as I want only one screen to be in both landscape and portrait, I've changed my setRoot call to start my app in "portrait" only:

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    id: IDs.DRAWER,
                    name: MySideMenu,
                }
            },
            center: {
                stack: {
                    id: IDs.MGX_STACK,
                    children: [{
                        component: {
                            name: MyHome,
                            options: {
                                layout: {
                                    orientation: ["portrait"],
                                }
                            }
                        },  
                    }],
                    options: {
                        layout: {
                            orientation: ["portrait"],
                        }
                    }
                }
            },
        },
    }
})

And there too this setting is ignored. My app is now always in both portrait and landscape...

What's wrong? I can't believe this orientation feature is broken on iOS, so what am I doing wrong/missing?

Steps to Reproduce / Code Snippets / Screenshots

Simply change the orientation of one screen from portrait to both portrait and landscape on iOS.

---

Environment

• React Native Navigation version: 2.17.0
• React Native version: 0.57.1
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): device, iOS 12.0.1, debug

[j0nd0n7]

I see the same issue on iOS.
The same settings works fine on Android. Hope this is solved soon.

[rawrmaan]

I'm on 2.17.0 and I'm NOT seeing this issue. You two should try setting the orientation in Navigation.setDefaultOptions instead of Navigation.setRoot, as follows:

Navigation.setDefaultOptions({
  layout: {
    orientation: ['portrait', 'landscape']
  }
})

Make sure you do this BEFORE calling Navigation.setRoot.

EDIT: Oops, I definitely did not read your issue closely enough. I would recommend setting your app to handle all orientations, and then use the react-native-orientation package to lock your app's orientation on a screen-by-screen basis in your component's constructor/componentWillUnmount. See some of the functions it offers below:

lockToPortrait(): void
lockToLandscape(): void
lockToLandscapeLeft(): void
lockToLandscapeRight(): void
unlockAllOrientations(): void

[zabojad]

@yogevbd the issue should be solved by #4995 but I'm still experiencing it with RNN v 2.20.1.

I'm my case, the orientation is set once to ['portrait'] in the default options at app startup. For one page, I need both portraitand landscape. I tell rnn about that by navigating to that page with:

Navigation.setStackRoot(
    "stack-id",
    [
        {
            component: {
                name: 'MyHomeCmp',
            }
        },
        {
            component: {
                name: 'MyPageWithBothOrientations',
                options: {
                    layout: {
                        orientation: ['portrait','landscape'],
                    }
                }
            }
        }
    ]
)

After that call, the 'MyPageWithBothOrientations' screen never allows switching to landscape on iOS. On Android, it works as expected...

Why would that not be working ?

Note that in XCode, the app orientation is set to Portrait only because I do not want it to start with a splashscreen in landscape...

[zabojad]

The only way to workaround this issue so far has been to use react-native-orientation. It's a pity because it should not be needed with RNN... Plus I hope it won't interfere with RNN in any way...

[szalaybalazs]

I am experiencing the same issues and unfortunatly react-native-orientation does not work either. It doesn’t lock the screen to the desired orientation, only rotates it but then I am still able to change the orientation of the screen.
Any ideas?

[stanislav-halyn]

I have the same issue as @szalaybalazs has. Is there any solution ?

[bozaigao]

I have the same issue ,first officer has declare that:Changing orientation dynamically through Navigation.mergeOption() is supported only on Android.also you can't use react-native-orientation to change your orientation on iOS, but you can use my method to Changing orientation dynamically on iOS:
1: in your rn you should add:

Navigation.setDefaultOptions({
        layout: {
            orientation: Platform.OS === 'ios' ? ['portrait', 'landscape'] : ['portrait']
        }
    }); 

2: in your iOS AppDelegate.h you should add:

@property(nonatomic,assign)BOOL allowRotation;//是否允许转向

3: in your iOS AppDelegate.m you should add:

//控制旋转屏幕
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  if (_allowRotation == YES) {
      return UIInterfaceOrientationMaskLandscapeRight;
  }else{
      return (UIInterfaceOrientationMaskPortrait);
  }
}

4: crate a React module to implement setLandscape and setPortrait method:

RCT_EXPORT_METHOD(setLandscape)
{
  dispatch_async(dispatch_get_main_queue(), ^{
      AppDelegate * appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;

      appDelegate.allowRotation = YES;
         NSNumber *resetOrientationTarget = [NSNumber numberWithInt:UIInterfaceOrientationUnknown];

           [[UIDevice currentDevice] setValue:resetOrientationTarget forKey:@"orientation"];



           NSNumber *orientationTarget = [NSNumber numberWithInt:UIInterfaceOrientationLandscapeLeft];

           [[UIDevice currentDevice] setValue:orientationTarget forKey:@"orientation"];
   });

}


RCT_EXPORT_METHOD(setPortrait)
{
  dispatch_async(dispatch_get_main_queue(), ^{
      AppDelegate * appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;

      appDelegate.allowRotation = NO;
           NSNumber *resetOrientationTarget = [NSNumber numberWithInt:UIInterfaceOrientationUnknown];

                [[UIDevice currentDevice] setValue:resetOrientationTarget forKey:@"orientation"];



                NSNumber *orientationTarget = [NSNumber numberWithInt:UIInterfaceOrientationPortrait];

                [[UIDevice currentDevice] setValue:orientationTarget forKey:@"orientation"];
   });

}

5: then in rn you can use :

// change orientation to landscape
NativeModules.NativeController.setLandscape();
// change orientation to portrait
NativeModules.NativeController.setPortrait();