How to detect device orientation change

[Stan]

I need to detect the correct screen width so that I will know what to load, but my console log is reporting the screen size opposite of the orientation? Or it's reporting what it was after the orientation changed. I'm just using the Hello World template.

What do I need to do with the code files below? Thanks so much...

package.json

{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.NewApp",
"tns-ios": {
"version": "3.2.0"
}
},
"dependencies": {
"nativescript-theme-core": "~1.0.2",
"tns-core-modules": "~3.2.0"
}
}

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" unloaded="pageUnloaded" class="page">
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

main-page.js

var createViewModel = require("./main-view-model").createViewModel;
var application=require('application');
var platformModule = require("tns-core-modules/platform");

function setOrientation(args){
    // Will console out the new Orientation
    console.log("setOrientation called: " + args.newValue);
    
    console.log("setOrientation Screen width: " + platformModule.screen.mainScreen.widthPixels);
    console.log("setOrientation Screen height: " + platformModule.screen.mainScreen.heightPixels);
    console.log("setOrientation Screen scale: " + platformModule.screen.mainScreen.scale);    
}

exports.pageUnloaded = function() {
    application.off(application.orientationChangedEvent, setOrientation);
    console.log("Page unloaded!");
}

function onNavigatingTo(args) {
    console.log("onLoad Screen width: " + platformModule.screen.mainScreen.widthPixels);
    console.log("onLoad Screen height: " + platformModule.screen.mainScreen.heightPixels);
    console.log("onLoad Screen scale: " + platformModule.screen.mainScreen.scale);    

    application.on(application.orientationChangedEvent, setOrientation);
    //setOrientation(args);
    var page = args.object;
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

CONSOLE LOG file

Start App at Portrait Mode

CONSOLE LOG file:///app/main-page.js:20:16: onLoad Screen width: 750
CONSOLE LOG file:///app/main-page.js:21:16: onLoad Screen height: 1334
CONSOLE LOG file:///app/main-page.js:22:16: onLoad Screen scale: 2
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: landscape
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 750
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 1334
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
[App] if we're in the real pre-commit handler we can't actually add any new fences due to CA restriction
Sep 20 17:25:00 --- last message repeated 1 time ---
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: portrait
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 1334
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 750
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
[App] if we're in the real pre-commit handler we can't actually add any new fences due to CA restriction
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: landscape
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 750
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 1334
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
[App] if we're in the real pre-commit handler we can't actually add any new fences due to CA restriction
Sep 20 17:27:35 --- last message repeated 1 time ---
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: portrait
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 1334
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 750
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
[App] if we're in the real pre-commit handler we can't actually add any new fences due to CA restriction

===

Start App at Landscape Mode

CONSOLE LOG file:///app/main-page.js:20:16: onLoad Screen width: 750
CONSOLE LOG file:///app/main-page.js:21:16: onLoad Screen height: 1334
CONSOLE LOG file:///app/main-page.js:22:16: onLoad Screen scale: 2
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: landscape
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 750
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 1334
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: portrait
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 1334
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 750
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
[App] if we're in the real pre-commit handler we can't actually add any new fences due to CA restriction
CONSOLE LOG file:///app/main-page.js:7:16: setOrientation called: landscape
CONSOLE LOG file:///app/main-page.js:9:16: setOrientation Screen width: 750
CONSOLE LOG file:///app/main-page.js:10:16: setOrientation Screen height: 1334
CONSOLE LOG file:///app/main-page.js:11:16: setOrientation Screen scale: 2
[App] if we're in the real pre-commit handler we can't actually add any new fences due to CA restriction

[Nikolay Tsonev]

Stan,

You could use orientationChangedEvent, which will allow you to handle the change of the orientation. Regarding that to get the dimensions of the screen you could use platform module, where you could get main screen height and width.

Keep in mind that for iOS it will return the older values for the width and height. In the sample you could review how to solve this.

TypeScript

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {OrientationChangedEventData} from "application"
import * as app from "application";
import {screen, isIOS} from "platform"
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    /*
    This gets a reference this page's <Page> UI component. You can
    view the API reference of the Page to see what's available at
    https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html
    */
    let page = <Page>args.object;
    app.on(app.orientationChangedEvent, (args:OrientationChangedEventData)=>{
        console.log("orientation change");
        console.log(args.eventName);
        console.log(args.newValue);
        let newwidth = screen.mainScreen.widthDIPs,
        newheight = screen.mainScreen.heightDIPs;
        if(isIOS){
            newwidth = screen.mainScreen.heightDIPs;
            newheight = screen.mainScreen.widthDIPs;
        }
        console.log(newwidth);
        console.log(newheight);
    })

    page.bindingContext = new HelloWorldModel();
}

JavaScript 

var main_view_model_1 = require("./main-view-model");
var app = require("application");
var platform_1 = require("platform");
// Event handler for Page "navigatingTo" event attached in main-page.xml
function navigatingTo(args) {
    /*
    This gets a reference this page's <Page> UI component. You can
    view the API reference of the Page to see what's available at
    https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html
    */
    var page = args.object;
    app.on(app.orientationChangedEvent, function (args) {
        console.log("orientation change");
        console.log(args.eventName);
        console.log(args.newValue);
        var newwidth = platform_1.screen.mainScreen.widthDIPs, newheight = platform_1.screen.mainScreen.heightDIPs;
        if (platform_1.isIOS) {
            newwidth = platform_1.screen.mainScreen.heightDIPs;
            newheight = platform_1.screen.mainScreen.widthDIPs;
        }
        console.log(newwidth);
        console.log(newheight);
    });

    page.bindingContext = new main_view_model_1.HelloWorldModel();
}
exports.navigatingTo = navigatingTo;

Hope this helps.

Regards,
nikolay.tsonev
Progress Telerik