Does anybody know how to detect orientation change for Nativescript?

Question

I have created two xml files for a screen. one named "login-page.port.xml" and the other one is "login-page.land.xaml".

Is there a way to programmatically detect orientation change within the application?

Thanks, Keks

Answer 1

Yes, there is a way to detect orientation change in the application. The easiest method is in the page you want to get the orientation; add the loaded and unloaded events to your page.xml files:

<Page loaded="pageLoaded" unloaded="pageUnloaded">

In your page.js file; add code like this:

var application=require('application');
exports.pageLoaded = function() {
  application.on(application.orientationChangedEvent, setOrientation);
};

exports.pageUnloaded = function() {
  application.off(application.orientationChangedEvent, setOrientation);
}

function setOrientation(args) {
   // Will console out the new Orientation
   console.log(args.newValue);
}

A couple notes; 1. You want to add & remove the event listener as you enter and exit the page; otherwise the listener is global and will continue to fire when the orientation changes even when you are on another page. 2. You can add multiple listeners to this event, so again if you don't remove the listener, then each time you re-load this page you will add ANOTHER copy of this listener to the group and so it will fire as many times as you have added it. 3. On android in v1.6.1 their is a bug in the orientation firing. https://github.com/NativeScript/NativeScript/issues/1656 (Basically if you start in Landscape, rotate it won't detect it. The issue has the patch that I've applied manually to my code).

---

Now Looking at your actual example; are you aware that at least as of version 1.6.x of NativeScript it will only load the XML for which ever orientation it currently is set as; but it will NOT load the other orientation's xml when you rotate. So, if you are in Landscape; enter the screen then rotate it will still be using the Landscape xml file.

---

Now with all that said you might seriously consider looking at the nativescript-orientation plugin which I am the author of, this plugin simplifies dealing with screen orientation and allows you to only have ONE .xml file and then change things via css.

Answer 2

For those using angular2-nativescript typescript

Please refer to the on method found in the documentation

on(event: "orientationChanged", callback: function, thisArg?: any): any Defined in application/application.d.ts:232 This event is raised the orientation of the current device has changed.

Parameters

event: "orientationChanged"

callback: function

(args: OrientationChangedEventData): void Parameters

args: OrientationChangedEventData

Returns void Optional thisArg: any

Returns any

Example in use:

@Component({
    selector: "Test"
    //templateUrl, styleUrls, etc... 
})
export class TestComponent{
   constructor(){
     on("orientationChanged", this.onOrientationChanged)
   }

   public onOrientationChanged = (evt) => {
      console.log("Orientation has changed !");
      console.log(evt.eventName); // orientationChanged
      console.log(evt.newValue); //landscape or portrait
    };

}