How to track change in the orientation?

[d3mac123]

I am reading the docs but this paragraph seems to be missing something:
This function (if exists) will be ran when the page is first opened so you can set any needed defaults. (This is ran at the same time as the PageNavigatedTo event) This function (if exists) will be ran each time the orientation changes. Unfortunately at this moment some items can't be controlled by CSS like orientation on ScrollView, so this allows you to control change those things when the orientation changes.

Which function is that (mentioned in bold above)? Any examples?

[Nathanael Anderson]

exports.orientation(args) if you have a orientation function exported from your page; it will run that.

[d3mac123]

Not sure I understood it (sorry). I added the line to my page:
exports.orientation(args)
...ran the code and the page did not render anymore.

What I need is something (I believe) pretty simple:

• if the page is in landscape mode, I set the compass variable to -15
• if the page is in portrait mode, I set the compass variable to 0

I added the following code to the page:
var orientation = require('nativescript-orientation');
orientation.enableRotation();
console.log(orientation.getOrientation());

All I need now is a function that controls the orientation event.

[Nathanael Anderson]

See the demo: https://github.com/NathanaelA/nativescript-orientation/blob/master/demo/app/main-page.js#L38 it shows the function and how you need to use it...

[Dragomir Ivanov]

Having the same issue as @d3mac123, however I am using Angular2 flavor of NativeScript. Where exactly this orientation callback needs to be registered? Is it on the component class?

[Nathanael Anderson]

In angular; I honestly don't know. I expect it to be part of the actual page exports; so where ever you would put the "onNavigatingTo" type events...

[Dragomir Ivanov]

In Angular we are using @angular/router or NativeScripts own RounterExtensions so no onNabigatingTo is used explicitly. Can't you use a function that sets that callback:

    setOnOrientation(function(args) {
    });

You can do it either way, in order to keep compatibility. Much less "black magic".

[Ihor Khomiak]

@d3mac123 and @Dragomir-Ivanov, you don't need 'nativescript-orientation' package to track a change in the orientation.
Please see the code:

import * as app from "tns-core-modules/application";
...
constructor() {
    app.on("orientationChanged", this.onOrientationChanged);
}

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

[Nathanael Anderson]

@Ihor912 is correct, @d3mac123 & @Dragomir-Ivanov in the later versions of the framework the Orientation event was built in. So you can easily use it in Angular app. Back when this plugin was created that event didn't exist.

[Nathanael Anderson]

I should clarify one item, the ns-orientation plugin actually has the correct orientation, where NativeScript cab be wrong on certain devices. In additon ns-orientation allows you to force a certain orientations and/or lock the orientation programatically .