React-native-navigation: [Android] - Cannot set app orientation to portrait after installing RNN

Created on 12 Jul 2019 · 8Comments · Source: wix/react-native-navigation

Issue Description

After upgrading to RNN v2.22.3 I can no longer force my (Android) app to stay in portrait mode. I have set everything within the iOS and Android files according to the RN docs, and this issue only appeared after installing the newest version of this library. Any help is appreciated.

Steps to Reproduce / Code Snippets / Screenshots

Install the newest version of this library and lock orientation for iOS and Android.
Observe the ability to switch the app into landscape mode.

Steps to lock in Android:

Add to android:screenOrientation="portrait" to your tag within AndroidManifest.xml:

Ex:

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:screenOrientation="portrait"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:fullBackupContent="false"
      android:theme="@style/AppTheme">

Rebuild!

Steps for iOS:

Set device orientation within Xcode:
Rebuild!

Environment

React Native Navigation version: 2.22.3
React Native version: 59.10
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Device, all OS

🏚 stale

Source

Xesme

👍3

Most helpful comment

The only way I've made it work, was to add layout: { orientation: ['portrait'] } to the options on every single screen I use in the app.

First I tried putting the layout option in the options of the stack or bottomTabs of my root, but, that did not help.

IMHO, it's really an anti-pattern that RNN does not obey the restrictions you set in the AndroidManifest. Especially when the equivalent setting on iOS is actually working as expected with RNN, I think it should be the same on Android.

Example:

export class MyScreen extends Component<Props, State> {
  static options = (): Options => ({
    topBar: {
      visible: false,
      drawBehind: true,
    },
    statusBar: {
      style: 'light',
    },
    layout: {
      orientation: ['portrait'],
    },
  })

esbenvb on 26 Jul 2019

👍5

All 8 comments

I've been having a similar issue. Unable to force orientation to portrait, even though I've added all the orientation configurations for each platform in their respective files. I've also added RNN specific orientation configuration, which still hasn't managed to force the application to stay in portrait mode.

andrewsadowski on 22 Jul 2019

👍2

The only way I've made it work, was to add layout: { orientation: ['portrait'] } to the options on every single screen I use in the app.

First I tried putting the layout option in the options of the stack or bottomTabs of my root, but, that did not help.

Example:

export class MyScreen extends Component<Props, State> {
  static options = (): Options => ({
    topBar: {
      visible: false,
      drawBehind: true,
    },
    statusBar: {
      style: 'light',
    },
    layout: {
      orientation: ['portrait'],
    },
  })

esbenvb on 26 Jul 2019

👍5

Thanks! This worked for me. I wish it didn't have to be defined in each screen, since there is a way to set orientation natively. Seems like a bug, but this work around works for the time being.

Important to note:
In addition to setting it on every screen, if you are using Navigation.setRoot(), you will need to set it here as well to prevent landscape mode as well.

Xesme on 30 Jul 2019

@Xesme actually you can fix it once and for all...

Run this right before setting your root view

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

esbenvb on 31 Jul 2019

👍2

Please close if the above solved your problem :)

esbenvb on 4 Aug 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.