René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"ScrollView with GridLayout does not correctly update on IOS","articleBody":"**Environment**\r\n - CLI: 5.0.0\r\n - Cross-platform modules: 5.0.1\r\n - Android Runtime: 5.0.0\r\n - iOS Runtime: 5.0.0\r\n - Plugin(s):\r\n\"nativescript-iqkeyboardmanager\": latest\r\n\"nativescript-loading-indicator-new\": \"^2.1.0\",\r\n\"nativescript-loading-screen\": \"^1.0.6\",\r\n\"nativescript-material-icons\": \"^1.0.3\",\r\n\"nativescript-ngx-fonticon\": \"^4.1.0\",\r\n\"nativescript-plugin-firebase\": \"^7.2.0\",\r\n\"nativescript-sqlite\": \"^2.2.3\",\r\n\"nativescript-sse\": \"^4.0.2\"\r\n\r\n - NativeScript-Angular: 6.2.0\r\n - Angular: 6.1.0\r\n \r\n**Describe the bug**\r\nI have a layout that consists of a ScrollView with embedded StackLayout and GridLayout. The GridLayout is repeated with ngFor:\r\n```\r\n\u003cScrollView #messagesView id=\"messagesView\"\u003e\r\n  \u003cStackLayout id=\"stackLayout\" style=\"padding-bottom: 10;\" id=\"stackLayout\"\u003e\r\n    \u003cGridLayout *ngFor=\"let message of messages\" columns=\"auto, * , auto\"\u003e\r\n        \u003cLabel *ngIf=\"sentByMe(message)\" col=\"2\" [text]=\"message[2]\" textAlignment=\"right\" style=\"margin-top: 10; margin-right: 10; padding: 5; background-color: #11a1ce; color: white;\"\u003e\u003c/Label\u003e\r\n        \u003cLabel *ngIf=\"!sentByMe(message)\" col=\"0\" [text]=\"message[2]\" textAlignment=\"left\" style=\"margin-top: 10; margin-left: 10; padding: 5; background-color: white;\"\u003e\u003c/Label\u003e\r\n    \u003c/GridLayout\u003e\r\n  \u003c/StackLayout\u003e\r\n\u003c/ScrollView\u003e\r\n```\r\nThis 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):\r\n\r\n```\r\nif (isIOS) {\r\n  if (parseInt(device.osVersion, 10) \u003e 10) {\r\n    this.messagesView.nativeElement.scrollToVerticalOffset(0, false);\r\n  } else {               \r\nthis.messagesView.nativeElement.scrollToVerticalOffset(this.messagesView.nativeElement.scrollableHeight - 1, false);\r\n  }\r\n}\r\n\r\nconst messageText = this.messageToSend;\r\nconst newMessage = [ 0, 0, this.messageToSend, Date.now().toString(), this.id, this.loginService.userid, 1 ];\r\nconst newMessagesArrayLength = this.messages.push(newMessage);\r\n\r\nif (isIOS) {\r\n  setTimeout(() =\u003e {\r\n    this.ngZone.run(() =\u003e {            \r\nthis.messagesView.nativeElement.scrollToVerticalOffset(this.messagesView.nativeElement.scrollableHeight, false);\r\n    });\r\n  }, 100);\r\n}\r\n```\r\n\r\nIs there any chance to force re-rendering of ScrollView without scrolling to top/bottom?\r\n\r\n**To Reproduce**\r\nSee above.\r\n\r\n**Expected behavior**\r\nThe item should be added and ScrollView should be updates correctly with the new item at the end.\r\n\r\n**Sample project**\r\n\r\n**Additional context**\r\nOnly 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.\r\n","author":{"url":"https://github.com/cremfert","@type":"Person","name":"cremfert"},"datePublished":"2018-11-07T11:27:20.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4},"url":"https://github.com/1593/nativescript-angular/issues/1593"}