bug: CDVOrientation screenOrientation INVALID when trying to set orientation

[kevinainleywalker]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.4.7
  @capacitor/core: 2.4.7
  @capacitor/android: 2.4.7
  @capacitor/ios: 2.4.7

Installed Dependencies:

  @capacitor/cli: 3.0.0-rc.0
  @capacitor/android: 3.0.0-rc.0
  @capacitor/ios: 3.0.0-rc.0
  @capacitor/core: 3.0.0-rc.0

Platform(s)

IOS

Current Behavior

When setting the orientation (using the [email protected] plugin), the orientation does not change and the following error is reported in the xcode log:

To Native Cordova -> CDVOrientation screenOrientation INVALID ["options": [3, portrait]]

Expected Behavior

The orientation of the app should change to the requested orientation

Code Reproduction

Demo Project

In the app component of this demo ionic capacitor project (updated to capacitor 3 RC) the component calls this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE); which generates the same error and doesn't change orientation:

To Native Cordova -> CDVOrientation screenOrientation INVALID ["options": [12, landscape]]

Other Technical Details

npm --version output: 6.14.11

node --version output: v14.15.5

pod --version output (iOS issues only): 1.10.1

Additional Context

using ionic with the following plugins:

ionic info

Ionic:

   Ionic CLI                     : 6.12.3
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1102.1 
   @angular-devkit/schematics    : 11.2.1
   @angular/cli                  : 11.2.1
   @ionic/angular-toolkit        : 2.3.3 

Capacitor:

   Capacitor CLI   : 3.0.0-rc.0
   @capacitor/core : 3.0.0-rc.0

Installed Plugins: 
   [email protected]
  @ionic-native/[email protected]

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[kevinainleywalker]

Updated with the code reproduction demo project

[Sampath-Lokuge]

@kevinainleywalker Here it says not to use the Cordova plugin. So how did you do it on Android then? #2977 (comment)

[kevinainleywalker]

@Sampath-Lokuge it says not to use it unless you have to change orientation programmatically, which I do. It's still the recommended method on the ionic capacitor docs and works perfectly on capacitor v2.4.7.

I have other issues with android so I have not made it far enough to confirm that it works on that platform unfortunately.

[Sampath-Lokuge]

Hi @jcesarmobile
Can you tell me how to do this with the Android app? i.e. using Capacitor to set the orientation for the whole app once.
I saw your feedback here for iOS #2977 (comment). But how about Android?

[jcesarmobile]

@Sampath-Lokuge, please don't ping me
@Sampath-Lokuge, please, don't use issues to ask questions, we have enabled github discussions on the repository to let users ask questions there https://github.com/ionic-team/capacitor/discussions
There is also a Capacitor section on Ionic forums https://forum.ionicframework.com/c/capacitor/26

If you ask on any of them, I'll gladly answer you there when I see it (I check both of them from time to time, so might take a while until I see it)

[Sampath-Lokuge]

Ok sure. Done: #4377

[Oscar2av]

I am using Ionic/Capacitor and Vuejs, I also had the same problem with the plugin for iOS. This is what I did and it solved the problem.

To fix the bug to be able to lock the screen to the specified orientation on iOS:

1. Open AppDelegate.swift for your app. You can find this file inside ios/App/App/AppDelegate.swift
2. Add the following code:

var orientationLock = UIInterfaceOrientationMask.all

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
return self.orientationLock
}

@objc func setOrientationLock(_ notification: Notification)
{
if let data = notification.userInfo as? [String: Int]
{
for (_, mask) in data
{
switch mask
{
case 1: self.orientationLock = UIInterfaceOrientationMask.portrait
break;
case 2: self.orientationLock = UIInterfaceOrientationMask.portraitUpsideDown
break;
case 3: self.orientationLock = UIInterfaceOrientationMask.landscapeRight
break;
case 4: self.orientationLock = UIInterfaceOrientationMask.landscapeLeft
break;
case 5: self.orientationLock = UIInterfaceOrientationMask.landscape
break;
default: self.orientationLock = UIInterfaceOrientationMask.all
}
}
}
}

3. In the same file locate: "func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {"
4. Add the following code inside the function before the "return true" statement:
NotificationCenter.default.addObserver(self, selector: #selector(self.setOrientationLock), name: NSNotification.Name(rawValue: "CAPOrientationLocked"), object: nil)
5. ionic build, ionic cap copy, ionic cap sync and problem FIXED!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.