How to adjust the content of a layout depending on screen orientation using nativescript


Using nativescript-orientation plugin

It fetches the orientation only by calling (getorientation) so how can we understand that when i need to call getorientation method.

Is there a way by which it can detect change in screen orientation[working for entire app] and can reflect the changes on GUI instantly without waiting for getOrientation call.



by adding OrientationChangedEventDatafrom Module in main.ts

I can see the orientation change is detected everytime the device changes

app.on(app.orientationChangedEvent, (args: OrientationChangedEventData) => {
    console.log("orientation change");
    let newwidth = screen.mainScreen.widthDIPs,
    newheight = screen.mainScreen.heightDIPs;
    if (isIOS) {
        newwidth = screen.mainScreen.heightDIPs;
        newheight = screen.mainScreen.widthDIPs;
}) ;

But how can i change the orientation of stackLayout horizontal to vertical for all pages depending on change in screen orientation…do i need to capture the event change in each page…how to achieve it…

please suggest


nativescript-orientation plugin is the key which you already knew. orientation for stacklayout can be a attribute of CSS class.


As suggested ,added orientation attribute in StackLayout but no change

Css Class

.portrait :host StackLayout {
orientation: vertical ;
background-color: red ;
.landscape :host StackLayout {
  orientation: horizontal ;
  background-color: green ;

html file

 <GridLayout row="1" rows="*,*" columns="*,*" class="form">
                <StackLayout  >
                    <TextField  (textChange)="textChangeM($event)" autocorrect="false" autocapitalization="true" backgroundcolor="#ffffff"
                        width="99%" height="100%" hint="First Name" class="input"></TextField>
                        <TextField f (textChange)="textChangeM($event)" autocorrect="false" autocapitalization="true" backgroundcolor="#ffffff"
                        width="99%" height="100%" hint="Last Name" class="input"></TextField>


I think in ts file …i need to capture the orientation change event…something like this

 onOrientationChange(args: application.OrientationChangedEventData) {
        console.log("********************************" + args.newValue + "*****************************");

    invalidate(orientation: string) {
        if ( {
            if (orientation === DeviceOrientation.portrait) {


how to set stacklayout orientation in ts file because i don’t see any property called orientation


It works just fine, make sure you added all the dependent plugins.