fix(ios): resize of scrollview content breaks layout (#6965)

apps/app/ui-tests-app/scroll-view/layout-outside-scroll-view-model.ts

@@ -0,0 +1,29 @@
+import { Observable } from "tns-core-modules/data/observable";
+import { ScrollView } from "tns-core-modules/ui/scroll-view";
+
+export class LayoutOutsideScrollViewModel extends Observable {
+    content: string = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium," +
+    "totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " +
+    "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos " +
+    "qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, " +
+    "adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. " +
+    "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? " +
+    "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, " +
+    "vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?";
+    isVisible: boolean = true;
+
+    onChangeVisibility() {
+        this.isVisible = !this.isVisible;
+        this.notifyPropertyChange("isVisible", this.isVisible);
+    }
+
+    onScrollToBottom(args) {
+        const scrollView = <ScrollView>args.object.page.getViewById("scroll-view");
+        scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, false);
+    }
+
+    onScrollToTop(args) {
+        const scrollView = <ScrollView>args.object.page.getViewById("scroll-view");
+        scrollView.scrollToVerticalOffset(0, false);
+    }
+}

apps/app/ui-tests-app/scroll-view/layout-outside-scroll.ts

@@ -0,0 +1,11 @@
+import { EventData as ObservableEventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { LayoutOutsideScrollViewModel } from "./layout-outside-scroll-view-model";
+
+var viewModel = new LayoutOutsideScrollViewModel();
+
+export function pageLoaded(args: ObservableEventData) {
+    var page = <Page>args.object;
+
+    page.bindingContext = viewModel;
+}

apps/app/ui-tests-app/scroll-view/layout-outside-scroll.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page">
+    <ScrollView id="scroll-view">
+        <StackLayout>
+            <GridLayout rows="auto, auto, auto" backgroundColor="lightgray">
+                <Button row="0" text="Change w/ Visibility" tap="{{ onChangeVisibility }}"></Button>
+                <Button row="1" text="Scroll To Bottom" tap="{{ onScrollToBottom }}"></Button>
+                <Label row="2" visibility="{{ isVisible ? 'visible' : 'collapsed' }}" text="{{ content }}" color="black"></Label>
+            </GridLayout>
+
+            <GridLayout height="2000" backgroundColor="yellow"></GridLayout>
+
+            <GridLayout rows="auto, auto, auto" backgroundColor="lightgray">
+                <Button row="0" text="Change w/ Visibility" tap="{{ onChangeVisibility }}"></Button>
+                <Button row="1" text="Scroll To Top" tap="{{ onScrollToTop }}"></Button>
+                <Label row="2" visibility="{{ isVisible ? 'visible' : 'collapsed' }}" text="{{ content }}" color="black"></Label>
+            </GridLayout>
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/scroll-view/main-page.ts

@@ -16,5 +16,6 @@ export function loadExamples() {
     examples.set("safe-area-sub-element", "scroll-view/safe-area-sub-element");
     examples.set("safe-area-images", "scroll-view/safe-area-images");
     examples.set("safe-area-images-overflow", "scroll-view/safe-area-images-overflow");
+    examples.set("layout-outside-scroll", "scroll-view/layout-outside-scroll");
     return examples;
 }