How to detect device orientation change

2 posts, 1 answers
  1. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 20 Sep Link to this post

    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

  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 21 Sep Link to this post

    Hi 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 code 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
        */
        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
        */
        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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top