Change the orientation of a page

[GastonVottero]

Is your feature request related to a problem? Please describe.

I need my application to work in Portrait and a particular activity in Landscape and that it be permanent, that is, it does not change due to device rotation

Describe the solution you'd like

being able to define a page with a specific orientation different from the other pages of the application and blocking its change when moving the device.

Describe alternatives you've considered

I used the "nativescript-orientation" plugin to perform this action but after migrating to Nativescript 8 I realase that the plugin became a paid plugin. I cannot afford the required prices and am looking for an alternative that will allow me to do so.

Anything else?

No response

Please accept these terms

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• I agree to follow this project's Code of Conduct

[vacalaw]

here is a solution that I found and works for me:

I created a util.js file and put this.

import { Application,  isAndroid } from '@nativescript/core';

export function toggleOrientation(orientation, lockOrientation) {
    (global).lockOrientation = lockOrientation === true;
    console.log('toggleOrientation:', orientation, ' lock:', lockOrientation);
    const valueKey = 'orientation';
    switch (orientation) {
        case 'landscape':
            (global).shouldRotate = true;
            if (global.isAndroid) {
                (Application.android.foregroundActivity).setRequestedOrientation(android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            } else {
                UIDevice.currentDevice.setValueForKey(NSNumber.numberWithInt(UIInterfaceOrientation.LandscapeRight), valueKey);
            }
            break;
        case 'portrait':
            (global).shouldRotate = false;
            if (isAndroid) {
                (Application.android.foregroundActivity).setRequestedOrientation(android.content.pm.ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            } else {
                UIDevice.currentDevice.setValueForKey(NSNumber.numberWithInt(UIInterfaceOrientation.Portrait), valueKey);
            }
            break;
        default:
            (global).shouldRotate = false;
            if (isAndroid) {
                (Application.android.foregroundActivity).setRequestedOrientation(android.content.pm.ActivityInfo.SCREEN_ORIENTATION_USER);
            } else {
                UIDevice.currentDevice.setValueForKey(NSNumber.numberWithInt(UIInterfaceOrientation.Unknown), valueKey);
            }
            break;
    }
}

and used like this

toggleOrientation('landscape', true);
toggleOrientation(); // to clear orientation

[AdamAtri]

How is shouldRotate supposed to work? I don't see that anywhere in the {N} source, and it is only set here. where is it getting used? Same with lockOrientation for that matter

[vacalaw]

what I understand is if the "shouldRotate" is true and the device is in portrait and you put the device upside down is going to rotate the view

[rajeshjadidminc]

I have tried this approach it's working till ios 15 but its not working on ios 16.1

So, I have tried the below code for ios 16.1 but getting an empty array in conectedScene.

if (UIDevice.currentDevice.systemVersion.startsWith("16.1")) {
const array = Array.from(
UIApplication.sharedApplication.connectedScenes
);
const windowScene = array[0] as UIWindowScene;
console.log("windowScene 0:", array);
console.log("windowScene 1:", windowScene);
if (windowScene != null) {
var nav =
UIApplication.sharedApplication.keyWindow?.rootViewController;
console.log("nav:", nav);
if (nav != null) {
console.log("nav:", nav);
// Tell the os that we changed orientations so it knows to call GetSupportedInterfaceOrientations again
nav.setNeedsUpdateOfSupportedInterfaceOrientations();
var value: UIInterfaceOrientationMask =
UIInterfaceOrientationMask.LandscapeLeft;
console.log("value:", value);
windowScene.requestGeometryUpdateWithPreferencesErrorHandler(
new UIWindowSceneGeometryPreferencesIOS(value[1]),
(error) => {
console.log("error:", error);
}
);
}
}

Please help to resolve this issue.

[carminda]

Hi! This is the implementation that worked for me:

const application = require('@nativescript/core/application');
const device = UIDevice.currentDevice;

if(global.android)
      device.setValueForKey(newOrientation, "orientation");
    else {
      try {
        const systemVersion = device.systemVersion;
        const iosVersion = parseInt(systemVersion, 10);
        if (application.ios && application.ios.nativeApp && iosVersion >= 16) {
            // if the device is iOS and the major version is 16 or higher
            let viewController = application.ios.rootController;
            while (viewController && viewController.presentedViewController) {
              viewController = viewController.presentedViewController;
            }
            viewController.setNeedsUpdateOfSupportedInterfaceOrientations();
            const window = application.ios.window;
            const windowScene = window.windowScene;
            if (windowScene instanceof UIWindowScene) {
              let prefs = new UIWindowSceneGeometryPreferencesIOS({interfaceOrientations: _currentOrientationMaskIos});
              windowScene.requestGeometryUpdateWithPreferencesErrorHandler(prefs, null);
            } else {
              return;
            }
        } else {
              // Fallback to previous approach for older iOS versions
              UIDevice.currentDevice.setValueForKey(newOrientation, "orientation");
          }
        
      } catch (error) {
        console.log(error);
      }
    }

[vallemar]

Also, you can use this plugin https://github.com/NativeScript-Use/NativeScript-Use/tree/main/packages/nativescript-orientation and lock orientation as:

orientation.disableRotation();