fix(ios-layouts): switch contentInsetAdjustmentBehavior on ScrollView (#5411)

* fix(layouts): switch contentInsetAdjustmentBehavior on ScrollView

* chore(ui-tests-app): add test for ScrollView as a root Page element

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

@@ -12,5 +12,7 @@ export function pageLoaded(args: EventData) {
 export function loadExamples() {
     const examples = new Map<string, string>();
     examples.set("scrolling-and-sizing", "scroll-view/scrolling-and-sizing");
+    examples.set("safe-area-root-element", "scroll-view/safe-area-root-element");
+    examples.set("safe-area-sub-element", "scroll-view/safe-area-sub-element");
     return examples;
 }

apps/app/ui-tests-app/scroll-view/safe-area-root-element.xml

@@ -0,0 +1,15 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <ScrollView>
+        <StackLayout>
+            <GridLayout height="30" backgroundColor="red" />
+            <GridLayout height="30" backgroundColor="yellow" />
+            <GridLayout height="30" backgroundColor="green" />
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/scroll-view/safe-area-sub-element.xml

@@ -0,0 +1,17 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout>
+        <ScrollView height="50" verticalAlignment="top">
+            <StackLayout>
+                <GridLayout height="30" backgroundColor="red" />
+                <GridLayout height="30" backgroundColor="yellow" />
+                <GridLayout height="30" backgroundColor="green" />
+            </StackLayout>
+        </ScrollView>
+    </GridLayout>
+</Page>

tns-core-modules/ui/core/view-base/view-base.d.ts

@@ -372,6 +372,10 @@ export abstract class ViewBase extends Observable {
     public _isPaddingRelative: boolean;
     public _styleScope: any;
 
+    /**
+     * @private
+     */
+    public _automaticallyAdjustsScrollViewInsets: boolean;
     /**
      * @private
      */

tns-core-modules/ui/core/view-base/view-base.ts

@@ -199,6 +199,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
     public _suspendedUpdates: { [propertyName: string]: Property<ViewBase, any> | CssProperty<Style, any> | CssAnimationProperty<Style, any> };
     public _suspendNativeUpdatesCount: SuspendType;
     public _isStyleScopeHost: boolean;
+    public _automaticallyAdjustsScrollViewInsets: boolean;
 
     // Dynamic properties.
     left: Length;

tns-core-modules/ui/core/view/view.ios.ts

@@ -592,6 +592,8 @@ export namespace ios {
 
     export function updateAutoAdjustScrollInsets(controller: UIViewController, owner: View): void {
         const scrollable = isContentScrollable(controller, owner);
+
+        owner._automaticallyAdjustsScrollViewInsets = scrollable;
         controller.automaticallyAdjustsScrollViewInsets = scrollable;
     }
 

tns-core-modules/ui/scroll-view/scroll-view.ios.ts

@@ -1,11 +1,14 @@
 import { ScrollEventData } from ".";
 import { View, layout, ScrollViewBase, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";
+import { ios as iosUtils } from "../../utils/utils";
 // HACK: Webpack. Use a fully-qualified import to allow resolve.extensions(.ios.js) to
 // kick in. `../utils` doesn't seem to trigger the webpack extensions mechanism.
 import * as uiUtils from "tns-core-modules/ui/utils";
 
 export * from "./scroll-view-common";
 
+const majorVersion = iosUtils.MajorVersion;
+
 class UIScrollViewDelegateImpl extends NSObject implements UIScrollViewDelegate {
     private _owner: WeakRef<ScrollView>;
 
@@ -120,6 +123,16 @@ export class ScrollView extends ScrollViewBase {
         const child = this.layoutView;
         this._contentMeasuredWidth = this.effectiveMinWidth;
         this._contentMeasuredHeight = this.effectiveMinHeight;
+
+        // `_automaticallyAdjustsScrollViewInsets` is set to true only if the first child 
+        // of UIViewController (Page, TabView e.g) is UIScrollView (ScrollView, ListView e.g).
+        // On iOS 11 by default UIScrollView automatically adjusts the scroll view insets, but they s
+        if (majorVersion > 10 && !this.parent._automaticallyAdjustsScrollViewInsets) {
+            // Disable automatic adjustment of scroll view insets when ScrollView 
+            // is not the first child of UIViewController.
+            this.nativeViewProtected.contentInsetAdjustmentBehavior = 2;
+        }
+
         if (child) {
             let childSize: { measuredWidth: number; measuredHeight: number };
             if (this.orientation === "vertical") {