add listview support for safe area

e2e/safe-area/app/home/home-page.xml

@@ -7,6 +7,7 @@
     <StackLayout>
         <Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page"></Button>
         <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
+        <Button text="ListView Examples" tap="onNavigate" route="listview/listview-page" />
         <Button text="Component Examples" tap="onNavigate" route="component/component-page"></Button>
         <Button text="WrapLayout Examples" tap="onNavigate" route="wraplayout/wraplayout-page"></Button>
     </StackLayout>

e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml

@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ListView Examples"></Label>
+    </ActionBar>
+
+    <fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
+</Page>

e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml

@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ListView Examples"></Label>
+    </ActionBar>
+
+    <fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
+</Page>

e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml

@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ListView Examples"></Label>
+    </ActionBar>
+
+    <fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
+</Page>

e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml

@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ListView Examples"></Label>
+    </ActionBar>
+
+    <fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
+</Page>

e2e/safe-area/app/listview/action-bar/listview-page.xml

@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ListView Examples"></Label>
+    </ActionBar>
+
+    <fragments:listview-fragment></fragments:listview-fragment>
+</Page>

e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts

@@ -0,0 +1,8 @@
+import { Page } from "ui/page";
+
+import { ListViewViewModel } from "./listview-fragment-view-model";
+
+export function onLoaded(args) {
+    const page = <Page>args.object;
+    page.bindingContext = new ListViewViewModel();
+}

e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml

@@ -0,0 +1,55 @@
+<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+    <ListView row="0" col="0" items="{{ items }}" loaded="onLoaded"  backgroundColor="SkyBlue">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="0" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Indigo">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="0" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="Crimson">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="1" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="Chocolate">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="1" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Cornsilk">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="1" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="BurlyWood">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="2" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="GoldenRod">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="2" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Khaki">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+
+    <ListView row="2" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="IndianRed">
+        <ListView.itemTemplate>
+            <Label text="{{ text }}"></Label>
+        </ListView.itemTemplate>
+    </ListView>
+</GridLayout>

e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts

@@ -0,0 +1,18 @@
+import { Observable } from "data/observable";
+
+export class ListViewViewModel extends Observable {
+    items: Array<any>;
+
+    constructor() {
+        super();
+
+        this.items = [];
+
+        for (let i = 0; i < 50; i++) {
+            this.items.push({
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque enim mi, id ultrices felis maximus vel.",
+                shortText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            });
+        }
+    }
+}

e2e/safe-area/app/listview/fragments/listview-fragment.ts

@@ -0,0 +1,8 @@
+import { Page } from "ui/page";
+
+import { ListViewViewModel } from "./listview-fragment-view-model";
+
+export function onLoaded(args) {
+    const page = <Page>args.object;
+    page.bindingContext = new ListViewViewModel();
+}

e2e/safe-area/app/listview/fragments/listview-fragment.xml

@@ -0,0 +1,5 @@
+<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
+    <ListView.itemTemplate>
+        <Label text="{{ text }}"></Label>
+    </ListView.itemTemplate>
+</ListView>

e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts

@@ -0,0 +1,8 @@
+import { Page } from "ui/page";
+
+import { ListViewViewModel } from "./listview-fragment-view-model";
+
+export function onLoaded(args) {
+    const page = <Page>args.object;
+    page.bindingContext = new ListViewViewModel();
+}

e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml

@@ -0,0 +1,15 @@
+<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="Olive">
+    <ListView.itemTemplate>
+        <GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="Olive">
+            <Label row="0" col="0" text="overflowing text, overflowing text"></Label>
+            <Label row="0" col="1" text="overflowing text, overflowing text"></Label>
+            <Label row="0" col="2" text="overflowing text, overflowing text"></Label>
+            <Label row="1" col="0" text="overflowing text, overflowing text"></Label>
+            <Label row="1" col="1" text="overflowing text, overflowing text"></Label>
+            <Label row="1" col="2" text="overflowing text, overflowing text"></Label>
+            <Label row="2" col="0" text="overflowing text, overflowing text"></Label>
+            <Label row="2" col="1" text="overflowing text, overflowing text"></Label>
+            <Label row="2" col="2" text="overflowing text, overflowing text"></Label>
+        </GridLayout>
+    </ListView.itemTemplate>
+</ListView>

e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts

@@ -0,0 +1,8 @@
+import { Page } from "ui/page";
+
+import { ListViewViewModel } from "./listview-fragment-view-model";
+
+export function onLoaded(args) {
+    const page = <Page>args.object;
+    page.bindingContext = new ListViewViewModel();
+}

e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml

@@ -0,0 +1,9 @@
+<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
+    <ListView.itemTemplate>
+        <StackLayout orientation="horizontal" backgroundColor="Olive">
+            <Label text="{{ shortText }}"></Label>
+            <Label text="{{ shortText }}"></Label>
+            <Label text="{{ shortText }}"></Label>
+        </StackLayout>
+    </ListView.itemTemplate>
+</ListView>

e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts

@@ -0,0 +1,8 @@
+import { Page } from "ui/page";
+
+import { ListViewViewModel } from "./listview-fragment-view-model";
+
+export function onLoaded(args) {
+    const page = <Page>args.object;
+    page.bindingContext = new ListViewViewModel();
+}

e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml

@@ -0,0 +1,9 @@
+<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
+    <ListView.itemTemplate>
+        <StackLayout backgroundColor="Olive">
+            <Label text="{{ text }}"></Label>
+            <Label text="{{ text }}"></Label>
+            <Label text="{{ text }}"></Label>
+        </StackLayout>
+    </ListView.itemTemplate>
+</ListView>

e2e/safe-area/app/listview/listview-page.ts

@@ -0,0 +1,8 @@
+import { View, EventData } from "tns-core-modules/ui/core/view";
+
+export function onNavigate(args: EventData) {
+    const view = args.object as View;
+    const route = view["route"];
+
+    view.page.frame.navigate(route);
+}

e2e/safe-area/app/listview/listview-page.xml

@@ -0,0 +1,28 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments"
+    navigatingTo="onNavigatingTo">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ListView Examples"></Label>
+    </ActionBar>
+
+    <StackLayout>
+        <StackLayout>
+            <Label text="Pages w/ ActionBar"></Label>
+            <Button text="ListView" tap="onNavigate" route="listview/action-bar/listview-page" />
+            <Button text="ListView Nested VStack" tap="onNavigate" route="listview/action-bar/listview-nested-vstack-page" />
+            <Button text="ListView Nested HStack" tap="onNavigate" route="listview/action-bar/listview-nested-hstack-page" />
+            <Button text="ListView Nested Grid 3x3" tap="onNavigate" route="listview/action-bar/listview-nested-grid-3x3-page" />
+            <Button text="Grid 3x3 Nested ListView" tap="onNavigate" route="listview/action-bar/grid-3x3-nested-listview-page" />
+        </StackLayout>
+        <StackLayout>
+            <Label text="Pages w/o ActionBar"></Label>
+            <Button text="ListView" tap="onNavigate" route="listview/no-action-bar/listview-page" />
+            <Button text="ListView Nested VStack" tap="onNavigate" route="listview/no-action-bar/listview-nested-vstack-page" />
+            <Button text="ListView Nested HStack" tap="onNavigate" route="listview/no-action-bar/listview-nested-hstack-page" />
+            <Button text="ListView Nested Grid 3x3" tap="onNavigate" route="listview/no-action-bar/listview-nested-grid-3x3-page" />
+            <Button text="Grid 3x3 Nested ListView" tap="onNavigate" route="listview/no-action-bar/grid-3x3-nested-listview-page" />
+        </StackLayout>
+    </StackLayout>
+</Page>

e2e/safe-area/app/listview/no-action-bar/grid-3x3-nested-listview-page.xml

@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
+</Page>

e2e/safe-area/app/listview/no-action-bar/listview-nested-grid-3x3-page.xml

@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments"
+    actionBarHidden="true">
+
+    <fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
+</Page>

e2e/safe-area/app/listview/no-action-bar/listview-nested-hstack-page.xml

@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments"
+    actionBarHidden="true">
+
+    <fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
+</Page>

e2e/safe-area/app/listview/no-action-bar/listview-nested-vstack-page.xml

@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments"
+    actionBarHidden="true">
+
+    <fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
+</Page>

e2e/safe-area/app/listview/no-action-bar/listview-page.xml

@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="listview/fragments"
+    actionBarHidden="true">
+
+    <fragments:listview-fragment></fragments:listview-fragment>
+</Page>

tns-core-modules/ui/layouts/layout-base.ios.ts

@@ -7,7 +7,7 @@ const majorVersion = iosUtils.MajorVersion;
 
 export class LayoutBase extends LayoutBaseCommon {
     nativeViewProtected: UIView;
-    
+
     public addChild(child: View): void {
         super.addChild(child);
         this.requestLayout();
@@ -33,26 +33,28 @@ export class LayoutBase extends LayoutBaseCommon {
 
     public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
         // if (!CGRectEqualToRect(nativeView.frame, frame)) {
-            // if (traceEnabled()) {
+        // if (traceEnabled()) {
-            //     traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
+        //     traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
-            // }
+        // }
-            // this._cachedFrame = frame;
+        // this._cachedFrame = frame;
-            // if (this._hasTransfrom) {
+        // if (this._hasTransfrom) {
-            //     // Always set identity transform before setting frame;
+        //     // Always set identity transform before setting frame;
-            //     const transform = nativeView.transform;
+        //     const transform = nativeView.transform;
-            //     nativeView.transform = CGAffineTransformIdentity;
+        //     nativeView.transform = CGAffineTransformIdentity;
-            //     nativeView.frame = frame;
+        //     nativeView.frame = frame;
-            //     nativeView.transform = transform;
+        //     nativeView.transform = transform;
-            // }
+        // }
-            // else {
+        // else {
-            //     nativeView.frame = frame;
+        //     nativeView.frame = frame;
-            // }
+        // }
 
-            nativeView.frame = frame;
+        nativeView.frame = frame;
+        const locationOnScreen = this.getLocationInWindow();
+
+        if (locationOnScreen) {
 
             const safeArea = this.getSafeArea();
             const fullscreen = this.getFullscreenArea();
-            const locationOnScreen = this.getLocationInWindow();
             const onScreenLeft = layout.toDevicePixels(layout.round(locationOnScreen.x));
             const onScreenTop = layout.toDevicePixels(layout.round(locationOnScreen.y));
 
@@ -88,6 +90,7 @@ export class LayoutBase extends LayoutBaseCommon {
                 const frameNew = CGRectMake(layout.toDeviceIndependentPixels(newLeft), layout.toDeviceIndependentPixels(newTop), layout.toDeviceIndependentPixels(newWidth), layout.toDeviceIndependentPixels(newHeight));
                 nativeView.frame = frameNew;
             }
+        }
 
             // if (leftInset || topInset) {
             //     const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset));
@@ -96,14 +99,14 @@ export class LayoutBase extends LayoutBaseCommon {
             //     nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
             // }
             // else {
-                const boundsOrigin = nativeView.bounds.origin;
+            const boundsOrigin = nativeView.bounds.origin;
-                nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
+            nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
             // }
-        // }
+            // }
-
+            
-            return nativeView.frame;
+        return nativeView.frame;
     }
-    
+
     [clipToBoundsProperty.getDefault](): boolean {
         return false;
     }

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

@@ -7,6 +7,7 @@ import { StackLayout } from "../layouts/stack-layout";
 import { ProxyViewContainer } from "../proxy-view-container";
 import { profile } from "../../profiling";
 import * as trace from "../../trace";
+import { ios as iosUtils } from "../../utils/utils";
 
 export * from "./list-view-common";
 
@@ -22,6 +23,7 @@ interface ViewItemIndex {
 }
 
 type ItemView = View & ViewItemIndex;
+const majorVersion = iosUtils.MajorVersion;
 
 class ListViewCell extends UITableViewCell {
     public static initWithEmptyBackground(): ListViewCell {
@@ -378,6 +380,81 @@ export class ListView extends ListViewBase {
         });
     }
 
+    public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
+        // if (!CGRectEqualToRect(nativeView.frame, frame)) {
+            // if (traceEnabled()) {
+            //     traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
+            // }
+            // this._cachedFrame = frame;
+            // if (this._hasTransfrom) {
+            //     // Always set identity transform before setting frame;
+            //     const transform = nativeView.transform;
+            //     nativeView.transform = CGAffineTransformIdentity;
+            //     nativeView.frame = frame;
+            //     nativeView.transform = transform;
+            // }
+            // else {
+            //     nativeView.frame = frame;
+            // }
+
+            nativeView.frame = frame;
+
+            const safeArea = this.getSafeArea();
+            const fullscreen = this.getFullscreenArea();
+            const locationOnScreen = this.getLocationInWindow();
+            const onScreenLeft = layout.toDevicePixels(layout.round(locationOnScreen.x));
+            const onScreenTop = layout.toDevicePixels(layout.round(locationOnScreen.y));
+
+            let left = layout.toDevicePixels(frame.origin.x);
+            let top = layout.toDevicePixels(frame.origin.y);
+            let width = layout.toDevicePixels(frame.size.width);
+            let height = layout.toDevicePixels(frame.size.height);
+
+            if (majorVersion > 10) {
+                // this._ios.insetsContentViewsToSafeArea = false;
+
+                let newLeft = left;
+                let newTop = top;
+                let newWidth = width;
+                let newHeight = height;
+
+                if (left !== 0 && onScreenLeft <= layout.toDevicePixels(safeArea.origin.x)) {
+                    newLeft = layout.toDevicePixels(fullscreen.origin.x);
+                    newWidth = width + onScreenLeft;
+                }
+
+                if (top !== 0 && onScreenTop <= layout.toDevicePixels(safeArea.origin.y)) {
+                    newTop = layout.toDevicePixels(fullscreen.origin.y);
+                    newHeight = height + onScreenTop;
+                }
+
+                if (width && width < layout.toDevicePixels(fullscreen.size.width) && onScreenLeft + width >= layout.toDevicePixels(safeArea.origin.x) + layout.toDevicePixels(safeArea.size.width)) {
+                    newWidth = newWidth + (layout.toDevicePixels(fullscreen.size.width) - (onScreenLeft + width));
+                }
+
+                if (height && height < layout.toDevicePixels(fullscreen.size.height) && onScreenTop + height >= layout.toDevicePixels(safeArea.origin.y) + layout.toDevicePixels(safeArea.size.height)) {
+                    newHeight = newHeight + (layout.toDevicePixels(fullscreen.size.height) - (onScreenTop + height));
+                }
+
+                const frameNew = CGRectMake(layout.toDeviceIndependentPixels(newLeft), layout.toDeviceIndependentPixels(newTop), layout.toDeviceIndependentPixels(newWidth), layout.toDeviceIndependentPixels(newHeight));
+                nativeView.frame = frameNew;
+            }
+
+            // if (leftInset || topInset) {
+            //     const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset));
+            //     nativeView.frame = frameNew;
+            //     const boundsOrigin = nativeView.bounds.origin;
+            //     nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
+            // }
+            // else {
+                const boundsOrigin = nativeView.bounds.origin;
+                nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
+            // }
+        // }
+
+            return nativeView.frame;
+    }
+
     private _layoutCell(cellView: View, indexPath: NSIndexPath): number {
         if (cellView) {
             const rowHeight = this._effectiveRowHeight;