[expo-screen-orientation] Screen orientation does not lock or trigger with EAS Build

[brycnguyen]

Summary

On a built app with EAS build, calling https://docs.expo.dev/versions/latest/sdk/screen-orientation/#screenorientationlockasyncorientationlock does not trigger the screen to rotate and lock on iOS. When the app isn't built with EAS build, and created with expo build, the screen orientation lock async function works.

Could possibly be related to: https://github.com/expo/expo/issues/11558

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

43

Environment

Expo CLI 4.12.10 environment info: System: OS: macOS 11.6 Shell: 5.8 - /bin/zsh Binaries: Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node Yarn: 3.0.2 - ~/.nvm/versions/node/v14.15.1/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 30, 31 Build Tools: 29.0.2, 30.0.2, 31.0.0 System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Android TV Intel x86 Atom, android-31 | ARM 64 v8a, android-31 | Intel x86 Atom_64, android-31 | Google TV Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play ARM 64 v8a, android-31 | Google Play Intel x86 Atom_64 IDEs: Android Studio: 4.1 AI-201.8743.12.41.6953283 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild npmPackages: expo: ^43.0.0 => 43.0.1 react: 17.0.1 => 17.0.1 react-dom: 17.0.1 => 17.0.1 react-native: 0.64.2 => 0.64.2 react-native-web: 0.17.1 => 0.17.1 npmGlobalPackages: expo-cli: 4.12.10 Expo Workflow: bare

Reproducible demo or steps to reproduce from a blank project

1. Create a build with EAS Build for iOS
2. Call the function https://docs.expo.dev/versions/latest/sdk/screen-orientation/#screenorientationlockasyncorientationlock
3. Foregrounding/backgrounding the app and calling the function again does not trigger the screen to lock orientation.

[ironforward]

also using EAS and experiencing this behavior.

i can call ScreenOrientation.unlockAsync() and then ScreenOrientation.getPlatformOrientationLockAsync() will return

{
  screenOrientationArrayIOS: [
    1, // Orientation.PORTRAIT_UP
    3, // Orientation.LANDSCAPE_LEFT
    4, // Orientation.LANDSCAPE_RIGHT
  ]
}

however, the screen will not rotate when tilting the phone -- made sure portrait lock was turned off on the phone too.

calling ScreenOrientation.lockAsync(OrientationLock.LANDSCAPE_RIGHT) does not have any effect either, but no errors are thrown.

app.json does have "orientation": "portrait"; however, the expo-screen-orientation docs say it will override this and, at least from what it's returning in the getPlatformOrientationLockAsync, it does seem to think it's overriding it.

edit: also did set expo.ios.requireFullScreen = true as the expo-screen-orientation docs say to do.

[ironforward]

a quick update, setting the expo.ios.infoPlist option in app.json to support landscape like so:

"infoPlist": {
    "UISupportedInterfaceOrientations": [
        "UIInterfaceOrientationLandscapeRight",
        "UIInterfaceOrientationLandscapeLeft",
        "UIInterfaceOrientationPortrait"
    ],
    "UISupportedInterfaceOrientations~ipad": [
      "UIInterfaceOrientationLandscapeRight",
      "UIInterfaceOrientationLandscapeLeft",
      "UIDeviceOrientationPortrait",
      "UIDeviceOrientationPortraitUpsideDown"
    ]
}

does enable rotating the screen into landscape.

however, expo-screen-orientation still fails to override the orientation locks at runtime to disable landscape orientation when it is not wanted.

so, i think this at least rules out landscape being disabled in the build settings as the reason that expo-screen-orientation could not allow landscape orientation, since it now cannot disallow landscape at runtime either.

[fwidtmann]

Is there any update? We need to lock orientation to landscape in one view! (expo go works, but with expo run:ios or eas build its not working)

Or are there any workarounds?

[silberistgold]

Experiencing the same issue. Used to work before transitioning to eas build, but now calling ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT) does nothing.

[fwidtmann]

@silberistgold if you remove orientation option in app.json, it will work again... but its no good solution

[silberistgold]

I see. Could be viable workaround to remove "orientation": "portrait" from app.json and then do ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP) immediately after app start (e.g. in an effect in App.tsx). I will test this and share my findings.

[richardwu]

The issue I'm experiencing is that while removing "orentation": "portrait" allows you to lock on first load, it fails to work after backgrounding/foregrounding the app, as noted here https://github.com/expo/expo/issues/11558. A fix seemed to have pushed out and should be live in SDK 43, but it doesn't seem to be working for me.

[ironforward]

Surprisingly even though the expo-screen-orientation library fails to detect orientation changes, DeviceMotion does not.

So, as a workaround for now if you only need 1 or a few screens to rotate like i did, you can listen for orientation changes from DeviceMotion in the expo-sensors library and rotate the screen yourself using reanimated (or whatever your animation library of choice is).

[richardwu]

Surprisingly even though the expo-screen-orientation library fails to detect orientation changes, DeviceMotion does not.

So, as a workaround for now if you only need 1 or a few screens to rotate like i did, you can listen for orientation changes from DeviceMotion in the expo-sensors library and rotate the screen yourself using reanimated (or whatever your animation library of choice is).

My current workaround does exactly this (rotate the content), but the downside is the status/notif bar remains in portrait mode, which is annoying for some users.

[silberistgold]

I can confirm that the workaround mentioned above is working for me. App correctly stays locked in PORTRAIT_UP until I unlock or lock to a different orientation. Also no issues after backgrounding/foregrounding the app. I am using SDK 43 managed.

[fwidtmann]

@silberistgold can you provide a code example? you use https://docs.expo.dev/versions/latest/sdk/devicemotion/ ?

[watchinharrison]

@fwidtmann I think @silberistgold was referring to their workaround which I can also confirm works, removing the orientation config from app.json/app.config.js. And controlling the lock from within the app using expo-screen-orientation. Seems having the config is what breaks the functionality of expo-screen-orientation on EAS build.

[fwidtmann]

@watchinharrison but if we remove orientation from app.json, there is no lock.

i think @silberistgold got it work with orientation in app.json, just switching from expo-screen-orientation to DeviceMotion?

[silberistgold]

@watchinharrison exactly.

I removed "orientation": "portrait" from app.json and lock the orientation on app start using ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP). Then later I unlock/relock again using ScreenOrientation as needed.

[fwidtmann]

@silberistgold ah ok, thank you

[mercpls]

Still seeing this issue in Expo SDK44. Did an upgrade from 42 -> 43 -> 44. Readded Expo updates and still do not have any orientation working.

[brycnguyen]

Another alternative if you are using eas is to create a config-plugin to work with https://github.com/yamill/react-native-orientation. I've moved completely off expo-screen-orientation because of this bug.

[ErikTromp]

I am having this issue too. @brycnguyen I also wasn't able to turn this into a config-plugin properly, do you have some pointers?

[navuyi]

I was having issues with changing screen orientation as well. For me it was related to switching between background and foreground and rebooting the app after some time of inactivity (spent in background). The goal was to switch from landscape (which was desired only for one view - video playback) back to portrait mode. Switching the screen orientation combined with app reload resulted in weird and undesired changes of screen orientation to landscape where it should be portrait.

I removed "orientation" key from app.json and updated expo SDK from 42 to 43. It helped. I also use orientation lock in on the app load so it stays in portrait mode. Then I switch to landscape during the video playback.

[brycnguyen]

@ErikTromp, you can try my attempt at the plugin here: https://github.com/LyraHealth/react-native-orientation-plugin or modify it so that it works for your app. Let me know if it works for you. Thanks!

[ErikTromp]

@brycnguyen thanks, that helps!

[Livijn]

I tried adding this and got an error when running eas:

        "UISupportedInterfaceOrientations": [
          "UIInterfaceOrientationPortrait"
        ],
        "UISupportedInterfaceOrientations~ipad": [
          "UIDeviceOrientationPortrait"
        ]

ios.requireFullScreen: iPad multitasking requires all UISupportedInterfaceOrientations~ipad orientations to be defined in the Info.plist. The Info.plist currently defines values that are incompatible with multitasking, these will be overwritten to prevent submission failure. Existing: UIDeviceOrientationPortrait

[jennkirchner]

We've seen screen orientation issues in 42, resolved in 43, and then reintroduced in 44. In our case we set app.config.js orientation: 'landscape' and lock the position in App.js using AppLoading component startAsync prop. In this case, we see the screen rotate erratically

[hugoh59]

Same issue here in 44.

[lewis221]

facing the same issue in 44

[tenfef]

Same issue here in 44...

[ErikTromp]

For people looking for a solution, I ejected Expo and went with this one https://github.com/LyraHealth/react-native-orientation-plugin

[oanacioarawaterford]

I'm experiencing this issue after upgrading to sdk 45. I tried the proposed workaround (remove the orientation setup from app.json and use ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT) but it's not working on iOS. On Android it seems to be ok.

[oanacioarawaterford]

@ErikTromp the plugin is not working for me. I get an error when building the Android app

Build file '/home/expo/workingdir/build/node_modules/react-native-orientation/android/build.gradle' line: 19
[stderr] 
* What went wrong:
[stderr] 
A problem occurred evaluating project ':react-native-orientation'.
[stderr] 
> Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

[brycnguyen]

This is an issue with https://github.com/yamill/react-native-orientation/issues/407. @oanacioarawaterford. You can probably apply the patch there in order to fix it.