Nativescript: layoutChangedEvent does not fire on iOS Page

[hettiger]

Environment

| Model | OS version | Preview app version | Runtime version
| -- | -- | -- | --
| iPhone X | iOS 12.2.0 | 1.19.0 | 5.2.0

{
  "@angular/animations": "7.2.4",
  "@angular/common": "7.2.4",
  "@angular/compiler": "7.2.4",
  "@angular/core": "7.2.4",
  "@angular/forms": "7.2.4",
  "@angular/http": "7.2.4",
  "@angular/platform-browser": "7.2.4",
  "@angular/platform-browser-dynamic": "7.2.4",
  "@angular/router": "7.2.4",
  "@progress-nativechat/nativescript-nativechat": "2.0.3",
  "kinvey-nativescript-sdk": "3.12.3",
  "nativescript-accelerometer": "2.0.1",
  "nativescript-angular": "7.2.1",
  "nativescript-background-http": "3.3.1",
  "nativescript-camera": "4.1.1",
  "nativescript-fresco": "5.2.0",
  "nativescript-geolocation": "4.4.2",
  "nativescript-imagepicker": "6.0.6",
  "nativescript-intl": "3.0.0",
  "nativescript-iqkeyboardmanager": "1.4.0",
  "nativescript-social-share": "1.5.1",
  "nativescript-theme-core": "1.0.4",
  "nativescript-ui-autocomplete": "3.11.0",
  "nativescript-ui-calendar": "3.10.0",
  "nativescript-ui-chart": "3.11.1",
  "nativescript-ui-dataform": "3.10.0",
  "nativescript-ui-gauge": "3.8.0",
  "nativescript-ui-listview": "5.1.1",
  "nativescript-ui-sidedrawer": "5.1.0",
  "nativescript-vue": "2.0.2",
  "reflect-metadata": "0.1.13",
  "rxjs": "6.4.0",
  "rxjs-compat": "6.4.0",
  "tns-core-modules": "5.2.0",
  "zone.js": "0.8.29"
}

Describe the bug

The layoutChanged event does not fire on the iOS platform.
On Android the event fires as expected.

To Reproduce

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnDestroy {

    constructor(private page: Page) {
        page.on(Page.layoutChangedEvent, this.onLayoutChanged, this);
    }

    ngOnDestroy(): void {
        this.page.off(Page.layoutChangedEvent, this.onLayoutChanged, this);
    }

    onLayoutChanged(): void {
        alert('onLayoutChanged fired');
    }
}

Expected behavior

An alert saying »onLayoutChanged fired« should appear when opening the app.

Sample project

https://play.nativescript.org/?template=play-ng&id=Zc20JX

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @hettiger,
Thank you for the provided sample project. I was able to recreate the issue and will mark it as a bug that we will investigate further.

[NathanaelA]

Just a FYI; this issue also occurs in a NS Core application. So it is a framework issue, not an angular specific issue.
Sample project https://github.com/NathanaelA/event-order

[MartoYankov]

@NathanaelA Yep, it's logged in the framework repo, not in the angular one. We are not treating this as a major problem since the event doesn't fire only on the Frame, Page and TabView components and you currently can't change these components layout parameters either way. Afaik, the event fires correctly on all other components correctly.

[NathanaelA]

1. Well that is good to know it does fire on sub-components properly... I'll have to make a note on my https://nativescript.rocks/compat/nativescript/ as I list this as one of the issues that is broken on iOS but works on Android.

2. I just wanted to make sure since the original example was NS-Angular; that anyone else following up on this issue to fix it (since it is marked as a Good First Issue) realizes this is a framework issue and not an angular issue. :grinning:

3. As for my sample app; that app was made to test the event order of a page; so I could update my blog article http://fluentreports.com/blog/?p=191 to have the latest event order since they changed a while back, but I was unaware that they changed... The only reason I'm at this bug is because I noticed the issue and was about to report the bug and saw their was already an issue for it. :grinning: