Environment

• CLI: 5.0.0

• Cross-platform modules: 5.0.1

• Android Runtime: 5.0.0

• iOS Runtime: 5.0.0

• Plugin(s):
  "nativescript-iqkeyboardmanager": latest
  "nativescript-loading-indicator-new": "^2.1.0",
  "nativescript-loading-screen": "^1.0.6",
  "nativescript-material-icons": "^1.0.3",
  "nativescript-ngx-fonticon": "^4.1.0",
  "nativescript-plugin-firebase": "^7.2.0",
  "nativescript-sqlite": "^2.2.3",
  "nativescript-sse": "^4.0.2"

• NativeScript-Angular: 6.2.0

• Angular: 6.1.0

Describe the bug
I have a layout that consists of a ScrollView with embedded StackLayout and GridLayout. The GridLayout is repeated with ngFor:

<ScrollView #messagesView id="messagesView">
  <StackLayout id="stackLayout" style="padding-bottom: 10;" id="stackLayout">
    <GridLayout *ngFor="let message of messages" columns="auto, * , auto">
        <Label *ngIf="sentByMe(message)" col="2" [text]="message[2]" textAlignment="right" style="margin-top: 10; margin-right: 10; padding: 5; background-color: #11a1ce; color: white;"></Label>
        <Label *ngIf="!sentByMe(message)" col="0" [text]="message[2]" textAlignment="left" style="margin-top: 10; margin-left: 10; padding: 5; background-color: white;"></Label>
    </GridLayout>
  </StackLayout>
</ScrollView>

This works fine on first rendering, but as soon as I add new items to the array (messages), I notice an UI bug: An empty element is added at the bottom (I can see it due to the space that it covers) and the text of the message appears at the very beginning of the scrollview. I didn't find any other option than scrolling to the top of the scrollView, add the item and then scroll back to the bottom. Only in this case, the new item is correctly placed at the end of the scrollview. But this is annoying as you can see the "jump" (due to the fact that I even need a small delay of around 100 ms with setTimeout):

if (isIOS) {
  if (parseInt(device.osVersion, 10) > 10) {
    this.messagesView.nativeElement.scrollToVerticalOffset(0, false);
  } else {               
this.messagesView.nativeElement.scrollToVerticalOffset(this.messagesView.nativeElement.scrollableHeight - 1, false);
  }
}

const messageText = this.messageToSend;
const newMessage = [ 0, 0, this.messageToSend, Date.now().toString(), this.id, this.loginService.userid, 1 ];
const newMessagesArrayLength = this.messages.push(newMessage);

if (isIOS) {
  setTimeout(() => {
    this.ngZone.run(() => {            
this.messagesView.nativeElement.scrollToVerticalOffset(this.messagesView.nativeElement.scrollableHeight, false);
    });
  }, 100);
}

Is there any chance to force re-rendering of ScrollView without scrolling to top/bottom?

To Reproduce
See above.

Expected behavior
The item should be added and ScrollView should be updates correctly with the new item at the end.

Sample project

Additional context
Only happens on iOS. I have to use this construction of layouts as using a ListView causes other issues with the keyboard hiding content on iOS.