From 982acdc168789d87b74cf4324963d2231ec509aa Mon Sep 17 00:00:00 2001
From: Vasil Chimev <vasil.chimev@gmail.com>
Date: Fri, 28 Sep 2018 18:21:50 +0300
Subject: [PATCH] feat(iOS): Safe Area Support (#6230)

---
 .gitignore                                    |    3 +-
 apps/app/ui-tests-app/button/background.xml   |    2 +-
 apps/app/ui-tests-app/button/issue-4287.xml   |    2 +-
 apps/app/ui-tests-app/css/clip-path.xml       |    2 +-
 .../css/margins-paddings-with-percentage.ts   |    4 +-
 apps/app/ui-tests-app/issues/issue-1639.xml   |    4 +-
 apps/app/ui-tests-app/issues/issue-3007.xml   |    2 +-
 package.json                                  |    2 +-
 tests/app/testRunner.ts                       |   12 +-
 tests/app/ui/helper.ts                        |   51 +-
 tests/app/ui/layouts/flexbox-layout-tests.ts  |  459 ++---
 tests/app/ui/layouts/grid-layout-tests.ts     |    1 -
 tests/app/ui/layouts/layout-tests-helper.ts   |   98 ++
 tests/app/ui/layouts/safe-area-tests.ts       | 1482 +++++++++++++++++
 .../ui/list-view/list-view-safe-area-tests.ts |  225 +++
 .../app/ui/list-view/list-view-view-model.ts  |   19 +
 tests/app/ui/page/page-tests-common.ts        |   46 +-
 tests/app/ui/page/page-tests.ios.ts           |  442 ++---
 .../scroll-view-safe-area-tests.ts            |  461 +++++
 tests/app/ui/styling/style-tests.ts           |  108 +-
 tests/app/ui/view/view-tests-common.ts        |    6 +-
 tests/package.json                            |    6 +-
 tns-core-modules/ui/core/view/view-common.ts  |   10 +-
 tns-core-modules/ui/core/view/view.android.ts |    6 +-
 tns-core-modules/ui/core/view/view.d.ts       |   33 +-
 tns-core-modules/ui/core/view/view.ios.ts     |  327 ++--
 .../absolute-layout/absolute-layout.ios.ts    |    5 +-
 .../ui/layouts/dock-layout/dock-layout.ios.ts |   11 +-
 .../flexbox-layout/flexbox-layout.ios.ts      |   59 +-
 .../ui/layouts/grid-layout/grid-layout.ios.ts |    6 +-
 .../ui/layouts/layout-base.ios.ts             |    8 +-
 .../layouts/stack-layout/stack-layout.ios.ts  |   26 +-
 .../ui/layouts/wrap-layout/wrap-layout.ios.ts |   46 +-
 .../ui/list-view/list-view-common.ts          |    4 +-
 .../ui/list-view/list-view.ios.ts             |    2 +
 tns-core-modules/ui/page/page.ios.ts          |   13 +-
 tns-core-modules/ui/repeater/repeater.ts      |    7 +-
 .../ui/scroll-view/scroll-view.ios.ts         |   48 +-
 .../ui/web-view/web-view-common.ts            |    4 +-
 39 files changed, 3189 insertions(+), 863 deletions(-)
 create mode 100644 tests/app/ui/layouts/layout-tests-helper.ts
 create mode 100644 tests/app/ui/layouts/safe-area-tests.ts
 create mode 100644 tests/app/ui/list-view/list-view-safe-area-tests.ts
 create mode 100644 tests/app/ui/list-view/list-view-view-model.ts
 create mode 100644 tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts

diff --git a/.gitignore b/.gitignore
index 6cd38c8e6..279bb0b08 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ e2e/**/test-results.xml
 # Webpack configuration files
 webpack.config.js
 tsconfig.esm.json
+tsconfig.tns.json
 
 # Generated files
 *.map
@@ -65,4 +66,4 @@ TestRunResult.txt
 
 tns-core-modules.base.d.ts
 tns-core-modules.d.ts
-tns-core-modules.es6.d.ts
\ No newline at end of file
+tns-core-modules.es6.d.ts
diff --git a/apps/app/ui-tests-app/button/background.xml b/apps/app/ui-tests-app/button/background.xml
index 498a79b6a..7783eefeb 100644
--- a/apps/app/ui-tests-app/button/background.xml
+++ b/apps/app/ui-tests-app/button/background.xml
@@ -1,6 +1,6 @@
 <Page>
   <GridLayout rows="240, *">
-    <GridLayout width="290" id="test-element" automationText="test-element" />
+    <GridLayout automationText="test-element" id="test-element" width="290" iosOverflowSafeArea="false"></GridLayout>
     <WrapLayout row="1">
       <Button width="40" height="40" text="r" tap="resetTap"/>
 
diff --git a/apps/app/ui-tests-app/button/issue-4287.xml b/apps/app/ui-tests-app/button/issue-4287.xml
index 7892e5857..05befc966 100644
--- a/apps/app/ui-tests-app/button/issue-4287.xml
+++ b/apps/app/ui-tests-app/button/issue-4287.xml
@@ -1,5 +1,5 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
-    <GridLayout columns="auto * auto" rows="auto *" borderWidth="1" borderColor="black">
+    <GridLayout columns="auto * auto" rows="auto *" borderWidth="1" borderColor="black" iosOverflowSafeArea="false">
         
         <StackLayout borderWidth="1" borderColor="black" verticalAlignment="top" width="150">
             <Label text="textWrap: false" horizontalAlignment="center"/>
diff --git a/apps/app/ui-tests-app/css/clip-path.xml b/apps/app/ui-tests-app/css/clip-path.xml
index fc3fb4577..6fea66758 100644
--- a/apps/app/ui-tests-app/css/clip-path.xml
+++ b/apps/app/ui-tests-app/css/clip-path.xml
@@ -1,5 +1,5 @@
 <Page>
-    <GridLayout columns="*,*" rows="*,*,*,*" automationText="clipPath">
+    <GridLayout automationText="clipPath" columns="*,*" rows="*,*,*,*" iosOverflowSafeArea="false">
         <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
             <Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
diff --git a/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
index 1996d66d4..330a70019 100644
--- a/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
+++ b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
@@ -4,7 +4,7 @@ import { EventData } from "tns-core-modules/data/observable";
 import * as button from "tns-core-modules/ui/button";
 
 const cssPercentage = `
-    Page { margin: 5% 10% 15% 8%; background-color: orange; font-size: 8; } 
+    Page { background-color: orange; font-size: 8; } 
     GridLayout { margin: 3%; background-color: lightgreen; font-size: 8; } 
     StackLayout { border-color: red; border-width: 1; } 
     StackLayout * { border-color: blue; border-width: 1; } 
@@ -16,7 +16,7 @@ const cssPercentage = `
     Button { color: black }`;
 
 const cssWithouPercentage = `
-    Page { margin:15 10 15 30; background-color: orange; font-size: 8; } 
+    Page { background-color: orange; font-size: 8; } 
     GridLayout { margin:3; background-color: lightgreen; font-size: 8; } 
     StackLayout { border-color: red; border-width: 1; } 
     StackLayout * { border-color: blue; border-width: 1; } 
diff --git a/apps/app/ui-tests-app/issues/issue-1639.xml b/apps/app/ui-tests-app/issues/issue-1639.xml
index 101362b40..f10009850 100644
--- a/apps/app/ui-tests-app/issues/issue-1639.xml
+++ b/apps/app/ui-tests-app/issues/issue-1639.xml
@@ -1,7 +1,7 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:cC="ui-tests-app/issues/component" id="main-page">
-  <StackLayout style.borderWidth="1" style.borderColor="black">
+  <StackLayout style.borderColor="black" style.borderWidth="1" iosOverflowSafeArea="false">
     <Label class="ui-tests-app-issue-1639-red" text="main-page red from app.css" textWrap="true" />
     <Label class="local-red" text="main-page red from issue-1639.css" textWrap="true" />
-   <cC:customView/>
+    <cC:customView/>
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/issue-3007.xml b/apps/app/ui-tests-app/issues/issue-3007.xml
index d72a19b93..fcadfe2d0 100644
--- a/apps/app/ui-tests-app/issues/issue-3007.xml
+++ b/apps/app/ui-tests-app/issues/issue-3007.xml
@@ -6,7 +6,7 @@
     <Label id="Label" backgroundColor="red" class="elementStyle" text="sample label" textWrap="true"/>
     <TextField id="TextField" backgroundColor="green" class="elementStyle" hint="" text="Sample textfield" />
     <TextView id="TextView" class="elementStyle" text="Sample text view" backgroundColor="yellow" editable="true" />
-    <AbsoluteLayout id="AbsoluteLayout" class="container"/>
+    <AbsoluteLayout id="AbsoluteLayout" class="container" iosOverflowSafeArea="false"></AbsoluteLayout>
   </StackLayout> 
   </ScrollView>
 </Page>
\ No newline at end of file
diff --git a/package.json b/package.json
index f67b7a8ac..2be4142f6 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "typescript": "^2.6.1"
   },
   "scripts": {
-    "setup": "npm run dev-link-tns-platform-declarations && npm run dev-link-tns-core-modules && npm run dev-link-tests && npm run dev-link-apps",
+    "setup": "npm run dev-link-tns-platform-declarations && npm run dev-link-tns-core-modules && npm run dev-link-tests && npm run dev-link-apps && npm run dev-link-e2e-modal",
     "tsc": "node  --max_old_space_size=4096 ./node_modules/typescript/bin/tsc",
     "ci": "tsc && npm run tslint && npm run ci-apps && npm run ci-e2e && npm run ci-tests",
     "ci-apps": "cd apps && npm i ../tns-core-modules ../tns-platform-declarations --save",
diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts
index 7e46aaf5a..337c33db9 100644
--- a/tests/app/testRunner.ts
+++ b/tests/app/testRunner.ts
@@ -11,7 +11,7 @@ import * as platform from "tns-core-modules/platform";
 import "./ui-test";
 import * as fs from "tns-core-modules/file-system";
 import { unsetValue } from "tns-core-modules/ui/core/properties";
-import { ad } from "tns-core-modules/utils/utils";
+import { ad, ios } from "tns-core-modules/utils/utils";
 
 Frame.defaultAnimatedNavigation = false;
 
@@ -135,6 +135,16 @@ allTests["STACKLAYOUT"] = stackLayoutTests;
 import * as flexBoxLayoutTests from "./ui/layouts/flexbox-layout-tests";
 allTests["FLEXBOXLAYOUT"] = flexBoxLayoutTests;
 
+import * as safeAreaLayoutTests from "./ui/layouts/safe-area-tests";
+import * as safeAreaListViewtTests from "./ui/list-view/list-view-safe-area-tests";
+import * as scrollViewSafeAreaTests from "./ui/scroll-view/scroll-view-safe-area-tests";
+
+if (platform.isIOS && ios.MajorVersion > 10) {
+    allTests["SAFEAREALAYOUT"] = safeAreaLayoutTests;
+    allTests["SAFEAREA-LISTVIEW"] = safeAreaListViewtTests;
+    allTests["SAFEAREA-SCROLL-VIEW"] = scrollViewSafeAreaTests;
+}
+
 import * as stylePropertiesTests from "./ui/styling/style-properties-tests";
 allTests["STYLE-PROPERTIES"] = stylePropertiesTests;
 
diff --git a/tests/app/ui/helper.ts b/tests/app/ui/helper.ts
index 7dd9851fc..5d3c4ff81 100644
--- a/tests/app/ui/helper.ts
+++ b/tests/app/ui/helper.ts
@@ -1,6 +1,7 @@
 import * as frame from "tns-core-modules/ui/frame";
 import { ViewBase, View, unsetValue, isIOS } from "tns-core-modules/ui/core/view";
 import { Page } from "tns-core-modules/ui/page";
+import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
 import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
 import { Button } from "tns-core-modules/ui/button";
 import * as TKUnit from "../TKUnit";
@@ -78,13 +79,55 @@ export function do_PageTest_WithStackLayout_AndButton(test: (views: [Page, Stack
     newPage.content = null;
 }
 
-//export function buildUIAndRunTest(controlToTest, testFunction, pageCss?, testDelay?) {
-export function buildUIAndRunTest<T extends View>(controlToTest: T, testFunction: (views: [T, Page]) => void, pageCss?) {
+export interface PageOptions {
+    pageCss?: any,
+    actionBar?: boolean,
+    actionBarFlat?: boolean,
+    actionBarHidden?: boolean,
+    tabBar?: boolean
+}
+
+//export function buildUIAndRunTest(controlToTest, testFunction, options) {
+export function buildUIAndRunTest<T extends View>(controlToTest: T, testFunction: (views: [T, Page]) => void, options?: PageOptions) {
     clearPage();
     let newPage = getCurrentPage();
 
-    newPage.css = pageCss;
-    newPage.content = controlToTest;
+    let testSubject = controlToTest as View;
+
+    if (options) {
+        if (options.pageCss) {
+            newPage.css = options.pageCss;
+        }
+
+        newPage.actionBarHidden = true;
+        newPage.actionBar.flat = false;
+
+        if (options.actionBar) {
+            newPage.actionBarHidden = false;
+            newPage.actionBar.title = "Test ActionBar";
+        }
+
+        if (options.actionBarFlat) {
+            newPage.actionBarHidden = false;
+            newPage.actionBar.title = "Test ActionBar Flat";
+            newPage.actionBar.flat = true;
+        }
+
+        if (options.actionBarHidden) {
+            newPage.actionBarHidden = true;
+        }
+
+        if (options.tabBar) {
+            const tabView = new TabView();
+            const tabEntry = new TabViewItem();
+            tabEntry.title = "Test";
+            tabEntry.view = controlToTest;
+            tabView.items = [tabEntry];
+            testSubject = tabView;
+        }
+    }
+
+    newPage.content = testSubject;
 
     testFunction([controlToTest, newPage]);
     newPage.content = null;
diff --git a/tests/app/ui/layouts/flexbox-layout-tests.ts b/tests/app/ui/layouts/flexbox-layout-tests.ts
index b0d7e6cd0..af492c352 100644
--- a/tests/app/ui/layouts/flexbox-layout-tests.ts
+++ b/tests/app/ui/layouts/flexbox-layout-tests.ts
@@ -55,14 +55,14 @@ import { View, unsetValue, Length, PercentLength } from "tns-core-modules/ui/cor
 import { Label } from "tns-core-modules/ui/label";
 import * as TKUnit from "../../TKUnit";
 import * as helper from "../helper";
-import { layout } from "tns-core-modules/utils/utils";
 import { parse } from "tns-core-modules/ui/builder";
-
-// TODO: Test the flexbox-layout-page.xml can be loaded and displayed
-
-import dipToDp = layout.toDevicePixels;
-
-const EPS = 1;
+import { dipToDp, left, top, right, bottom, height, width,
+    paddingLeft, paddingTop, paddingRight, paddingBottom,
+    equal, closeEnough, notEqual, check,
+    heightEqual, widthEqual,
+    isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith,
+    isLeftOf, isRightOf, isBelow, isAbove,
+    isLeftWith, isAboveWith, isRightWith, isBelowWith } from "./layout-tests-helper";
 
 function waitUntilTestElementLayoutIsValid(view: View, timeoutSec?: number): void {
     TKUnit.waitUntilReady(() => {
@@ -70,146 +70,11 @@ function waitUntilTestElementLayoutIsValid(view: View, timeoutSec?: number): voi
     }, timeoutSec || 1);
 }
 
-function commonAncestor(view1: View, view2: View): View {
-    let set = new Set();
-    do {
-        if (view1) {
-            if (set.has(view1)) {
-                return view1;
-            }
-            set.add(view1);
-            view1 = <View>view1.parent;
-        }
-        if (view2) {
-            if (set.has(view2)) {
-                return view2;
-            }
-            set.add(view2);
-            view2 = <View>view2.parent;
-        }
-    } while (view1 || view2);
-    return null;
-}
-
-interface Bounds {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}
-
-function bounds(view: View): Bounds {
-    return view._getCurrentLayoutBounds();
-}
-
-/**
- * Get the bounds of the child as if it was placed in the same view as its ancestor,
- * so the bounds can be compared in the same coordinate system.
- */
-function boundsToAncestor(child: View, ancestor: View = null) {
-    let currentBounds = bounds(child);
-    while (child && child !== ancestor) {
-        child = <View>child.parent;
-        let childBounds = bounds(child);
-        currentBounds.left += childBounds.left;
-        currentBounds.right += childBounds.left;
-        currentBounds.top += childBounds.top;
-        currentBounds.bottom += childBounds.top;
-    }
-    return currentBounds;
-}
-
 function baseline(view: View): number {
     // TODO: Return View's baseline!
     return 0;
 }
 
-function width(child: View): number {
-    let b = bounds(child);
-    return b.right - b.left;
-}
-
-function height(child: View): number {
-    let b = bounds(child);
-    return b.bottom - b.top;
-}
-
-function top(child: View): number { return bounds(child).top; }
-function right(child: View): number { return bounds(child).right; }
-function bottom(child: View): number { return bounds(child).bottom; }
-function left(child: View): number { return bounds(child).left; }
-
-function equal<T>(a: T, b: T, message?: string) {
-    message ? TKUnit.assertEqual(a, b, message) : TKUnit.assertEqual(a, b);
-}
-
-function closeEnough(a: number, b: number, message?: string) {
-    message ? TKUnit.assertTrue(Math.abs(a - b) <= EPS, message) : TKUnit.assertTrue(Math.abs(a - b) <= EPS);
-}
-
-function notEqual<T>(a: T, b: T, message?: string) {
-    message ? TKUnit.assertNotEqual(a, b, message) : TKUnit.assertNotEqual(a, b);
-}
-
-function check(exp: boolean, message?: string) {
-    message ? TKUnit.assert(exp, message) : TKUnit.assert(exp);
-}
-
-function widthEqual(view1: View, view2: View) {
-    equal(width(view1), width(view2), `Expected width of ${view1} to equal width of ${view2}.`);
-}
-
-function heightEqual(view1: View, view2: View) {
-    equal(height(view1), height(view2), `Expected height of ${view1} to equal height of ${view2}.`);
-}
-
-function comparableBounds(view1: View, view2: View): { bounds1: Bounds, bounds2: Bounds } {
-    let ancestor = commonAncestor(view1, view2);
-    let bounds1 = boundsToAncestor(view1, ancestor);
-    let bounds2 = boundsToAncestor(view2, ancestor);
-    return { bounds1, bounds2 };
-}
-
-function isLeftAlignedWith(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assertEqual(bounds1.left, bounds2.left, `${view1} is not left-aligned with ${view2}`);
-}
-
-function isRightAlignedWith(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assertEqual(bounds1.right, bounds2.right, `${view1} is not right-aligned with ${view2}`);
-}
-
-function isTopAlignedWith(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assertEqual(bounds1.top, bounds2.top, `${view1} is not top-aligned with ${view2}`);
-}
-
-function isBottomAlignedWith(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assertEqual(bounds1.bottom, bounds2.bottom, `${view1} is not bottom-aligned with ${view2}`);
-}
-
-function isRightOf(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assert(bounds1.left >= bounds2.right, `${view1}.left: ${bounds1.left} is not right of ${view2}.right: ${bounds2.right}`);
-}
-
-function isLeftOf(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assert(bounds1.right <= bounds2.left, `${view1}.right: ${bounds1.right} is not left of ${view2}.left: ${bounds2.left}`);
-}
-
-function isBelow(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assert(bounds1.top >= bounds2.bottom, `${view1}.top: ${bounds1.top} is not below ${view2}.bottom: ${bounds2.bottom}`);
-}
-
-function isAbove(view1: View, view2: View) {
-    let { bounds1, bounds2 } = comparableBounds(view1, view2);
-    TKUnit.assert(bounds1.bottom <= bounds2.top, `${view1}.bottom: ${bounds1.bottom} is not above ${view2}.top: ${bounds2.top}`);
-}
-
 export function testFlexboxPage() {
     let page = helper.navigateWithEntry({ moduleName: "ui/layouts/flexbox-layout-page" });
     function view(id: string) {
@@ -253,7 +118,7 @@ let getViews = (template: string) => {
 };
 
 let activity_flex_wrap = () => getViews(
-    `<FlexboxLayout id="flexbox"
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
             flexDirection="${FlexDirection.ROW}"
             flexWrap="${FlexWrap.WRAP}"
             alignContent="${AlignContent.STRETCH}"
@@ -363,7 +228,7 @@ export const testFlexWrap_wrap_reverse_flexDirection_column = test(
 );
 
 let activity_flex_item_match_parent = () => getViews(
-    `<FlexboxLayout id="flexbox"
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
             width="100%"
             verticalAlignment="top"
             flexDirection="${FlexDirection.ROW}"
@@ -389,7 +254,7 @@ export const testFlexItem_match_parent = test(
 );
 
 let activity_flex_item_match_parent_direction_column = () => getViews(
-    `<FlexboxLayout id="flexbox"
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
             height="100%"
             horizontalAlignment="left"
             flexDirection="${FlexDirection.COLUMN}"
@@ -415,7 +280,7 @@ export const testFlexItem_match_parent_flexDirection_column = test(
 );
 
 let activity_flexbox_wrap_content = () => getViews(
-    `<FlexboxLayout id="flexbox"
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
             horizontalAlignment="left"
             verticalAlignment="top"
             flexDirection="${FlexDirection.ROW}"
@@ -448,7 +313,7 @@ export const testFlexboxLayout_wrapContent = test(
 
 let activity_flexbox_wrapped_with_scrollview = () => getViews(
     `<ScrollView width="100%" verticalAlignment="top">
-        <FlexboxLayout id="flexbox"
+        <FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
                 width="360"
                 verticalAlignment="top"
                 flexDirection="${FlexDirection.ROW}"
@@ -481,7 +346,7 @@ export const testFlexboxLayout_wrapped_with_ScrollView = test(
 
 let activity_flexbox_wrapped_with_horizontalscrollview = () => getViews(
     `<ScrollView orientation="horizontal" width="100%" verticalAlignment="top">
-        <FlexboxLayout id="flexbox" horizontalAlignment="left" height="400" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+        <FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="400" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
             <Label id="text1" width="300" height="100%" text="1" backgroundColor="red" />
             <Label id="text2" width="300" height="100%" text="2" backgroundColor="green" />
             <Label id="text3" width="300" height="100%" text="3" backgroundColor="blue" />
@@ -511,7 +376,7 @@ export const testFlexboxLayout_wrapped_with_HorizontalScrollView = test(
 );
 
 let activity_justify_content_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" justifyContent="${JustifyContent.FLEX_START}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" justifyContent="${JustifyContent.FLEX_START}" backgroundColor="gray">
         <Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
         <Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
         <Label id="text3" width="60" height="60" text="3" backgroundColor="blue" />
@@ -531,7 +396,7 @@ export const testJustifyContent_flexStart = test(
 
 let activity_justify_content_with_parent_padding = () => getViews(
     `<GridLayout padding="24" width="100%" height="100%">
-        <FlexboxLayout id="flexbox" width="100%" height="100%" padding="8" flexDirection="${FlexDirection.ROW}" justifyCOntent="${JustifyContent.FLEX_START}" backgroundColor="gray">
+        <FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" padding="8" flexDirection="${FlexDirection.ROW}" justifyCOntent="${JustifyContent.FLEX_START}" backgroundColor="gray">
             <Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
             <Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
             <Label id="text3" width="60" height="60" text="3" backgroundColor="blue" />
@@ -545,8 +410,8 @@ export const testJustifyContent_flexStart_withParentPadding = test(
     ({ root, flexbox, text1, text2, text3 }) => {
         isRightOf(text2, text1);
         isRightOf(text3, text2);
-        equal(left(text1), Length.toDevicePixels(flexbox.style.paddingLeft, 0), `Expected ${text1}.left to equal ${flexbox}.paddingLeft`);
-        equal(top(text1), Length.toDevicePixels(flexbox.style.paddingTop, 0), `Expected ${text1}.top to equal ${flexbox}.paddingTop`);
+        equal(left(text1), paddingLeft(flexbox), `Expected ${text1}.left to equal ${flexbox}.paddingLeft`);
+        equal(top(text1), paddingTop(flexbox), `Expected ${text1}.top to equal ${flexbox}.paddingTop`);
     }
 );
 
@@ -567,8 +432,12 @@ export const testJustifyContent_flexEnd_withParentPadding = test(
     ({ root, flexbox, text1, text2, text3 }) => {
         isLeftOf(text2, text3);
         isLeftOf(text1, text2);
-        closeEnough(width(flexbox) - right(text3), Length.toDevicePixels(flexbox.style.paddingRight, 0));
-        closeEnough(top(text3), Length.toDevicePixels(flexbox.style.paddingTop, 0));
+        equal(top(text1), paddingTop(flexbox));
+        equal(top(text2), paddingTop(flexbox));
+        equal(top(text3), paddingTop(flexbox));
+        equal(right(text3), paddingRight(flexbox));
+        isRightWith(text2, text3, width(text3));
+        isRightWith(text1, text2, width(text2));
     }
 );
 
@@ -584,8 +453,8 @@ export const testJustifyContent_center = test(
 
         let space = width(flexbox) - width(text1) - width(text2) - width(text3);
         space = space / 2;
-        check(space - 1 <= left(text1) && left(text1) <= space + 1);
-        check(space - 1 <= width(flexbox) - right(text3) && width(flexbox) - right(text3) <= space + 1);
+        closeEnough(left(text1), paddingLeft(flexbox) + space);
+        closeEnough(right(text3), paddingRight(flexbox) - space);
     }
 );
 
@@ -595,10 +464,10 @@ export const testJustifyContent_center_withParentPadding = test(
     ({ root, flexbox, text1, text2, text3 }) => {
         isRightOf(text2, text1);
         isRightOf(text3, text2);
-        let space = width(flexbox) - width(text1) - width(text2) - width(text3) - Length.toDevicePixels(flexbox.style.paddingLeft, 0) - Length.toDevicePixels(flexbox.style.paddingRight, 0);
+        let space = width(flexbox) - width(text1) - width(text2) - width(text3);
         space = space / 2;
-        check(space - 1 <= left(text1) - Length.toDevicePixels(flexbox.style.paddingLeft, 0) && left(text1) - Length.toDevicePixels(flexbox.style.paddingLeft, 0) <= space + 1);
-        check(space - 1 <= width(flexbox) - right(text3) - Length.toDevicePixels(flexbox.style.paddingRight, 0) && width(flexbox) - right(text3) - Length.toDevicePixels(flexbox.style.paddingRight, 0) <= space + 1);
+        isLeftWith(flexbox, text1, space);
+        isRightWith(text3, flexbox, space);
     }
 );
 
@@ -627,10 +496,10 @@ export const testJustifyContent_spaceBetween_withPadding = test(
     ({ root, flexbox, text1, text2, text3 }) => {
         let space = width(flexbox) - width(text1) - width(text2) - width(text3) - dipToDp(padding) * 2;
         space = space / 2;
-        closeEnough(left(text1), dipToDp(padding));
-        closeEnough(width(flexbox) - right(text3), dipToDp(padding));
-        check(space - 1 <= left(text2) - right(text1) && left(text2) - right(text1) <= space + 1);
-        check(space - 1 <= left(text3) - right(text2) && left(text3) - right(text2) <= space + 1);
+        equal(left(text1), paddingLeft(flexbox));
+        closeEnough(right(text1) + space, left(text2));
+        closeEnough(right(text2) + space, left(text3));
+        equal(right(text3), paddingRight(flexbox));
     }
 );
 
@@ -644,12 +513,10 @@ export const testJustifyContent_spaceAround = test(
 
         let space = width(flexbox) - width(text1) - width(text2) - width(text3);
         space = space / 6; // Divide by the number of children * 2
-        check(space - 1 <= left(text1) && left(text1) <= space + 1);
-        let spaceLowerBound = space * 2 - 1;
-        let spaceUpperBound = space * 2 + 1;
-        check(spaceLowerBound <= left(text2) - right(text1) && left(text2) - right(text1) <= spaceUpperBound);
-        check(spaceLowerBound <= left(text3) - right(text2) && left(text3) - right(text2) <= spaceUpperBound);
-        check(space - 1 <= width(flexbox) - right(text3) && width(flexbox) - right(text3) <= space + 1);
+        closeEnough(left(text1), paddingLeft(flexbox) + space);
+        closeEnough(right(text1) + space * 2, left(text2));
+        closeEnough(right(text2) + space * 2, left(text3));
+        closeEnough(right(text3), paddingRight(flexbox) - space);
     }
 );
 
@@ -664,12 +531,12 @@ export const testJustifyContent_spaceAround_withPadding = test(
     ({ root, flexbox, text1, text2, text3 }) => {
         let space = width(flexbox) - width(text1) - width(text2) - width(text3) - dipToDp(padding) * 2;
         space = space / 6; // Divide by the number of children * 2
-        check(space - 1 <= left(text1) - dipToDp(padding) && left(text1) - dipToDp(padding) <= space + 1);
-        let spaceLowerBound = space * 2 - 1;
-        let spaceUpperBound = space * 2 + 1;
-        check(spaceLowerBound <= left(text2) - right(text1) && left(text2) - right(text1) <= spaceUpperBound);
-        check(spaceLowerBound <= left(text3) - right(text2) && left(text3) - right(text2) <= spaceUpperBound);
-        check(space - 1 <= width(flexbox) - right(text3) - dipToDp(padding) && width(flexbox) - right(text3) - dipToDp(padding) <= space + 1);
+        equal(top(text1), paddingTop(flexbox));
+        closeEnough(left(text1), paddingLeft(flexbox) + space);
+        closeEnough(right(text1) + space * 2, left(text2));
+        closeEnough(right(text2) + space * 2, left(text3));
+        closeEnough(right(text3), paddingRight(flexbox) - space);
+        equal(bottom(text1), paddingBottom(flexbox));
     }
 );
 
@@ -715,8 +582,8 @@ export const testJustifyContent_center_flexDirection_column = test(
 
         let space = height(flexbox) - height(text1) - height(text2) - height(text3);
         space = space / 2;
-        check(space - 1 <= top(text1) && top(text1) <= space + 1);
-        check(space - 1 <= height(flexbox) - bottom(text3) && height(flexbox) - bottom(text3) <= space + 1);
+        isBelowWith(flexbox, text1, space);
+        isAboveWith(text3, flexbox, space);
     }
 );
 
@@ -750,10 +617,10 @@ export const testJustifyContent_spaceBetween_flexDirection_column_withPadding =
     ({ root, flexbox, text1, text2, text3 }) => {
         let space = height(flexbox) - height(text1) - height(text2) - height(text3) - dipToDp(padding) * 2;
         space = space / 2;
-        closeEnough(top(text1), dipToDp(padding));
-        closeEnough(height(flexbox) - bottom(text3), dipToDp(padding));
-        check(space - 1 <= top(text2) - bottom(text1) && top(text2) - bottom(text1) <= space + 1);
-        check(space - 1 <= top(text3) - bottom(text2) && top(text3) - bottom(text2) <= space + 1);
+        equal(top(text1), paddingTop(flexbox));
+        equal(bottom(text3), paddingBottom(flexbox));
+        equal(bottom(text1) + space, top(text2));
+        equal(bottom(text2) + space, top(text3));
     }
 );
 
@@ -770,12 +637,10 @@ export const testJustifyContent_spaceAround_flexDirection_column = test(
 
         let space = height(flexbox) - height(text1) - height(text2) - height(text3);
         space = space / 6; // Divide by the number of children * 2
-        check(space - 1 <= top(text1) && top(text1) <= space + 1);
-        let spaceLowerBound = space * 2 - 1;
-        let spaceUpperBound = space * 2 + 1;
-        check(spaceLowerBound <= top(text2) - bottom(text1) && top(text2) - bottom(text1) <= spaceUpperBound);
-        check(spaceLowerBound <= top(text3) - bottom(text2) && top(text3) - bottom(text2) <= spaceUpperBound);
-        check(space - 1 <= height(flexbox) - bottom(text3) && height(flexbox) - bottom(text3) <= space + 1);
+        isBelowWith(flexbox, text1, space);
+        closeEnough(bottom(text1) + 2 * space, top(text2));
+        closeEnough(bottom(text2) + 2 * space, top(text3));
+        isAboveWith(text3, flexbox, space);
     }
 );
 
@@ -789,17 +654,24 @@ export const testJustifyContent_spaceAround_flexDirection_column_withPadding = t
     ({ root, flexbox, text1, text2, text3 }) => {
         let space = height(flexbox) - height(text1) - height(text2) - height(text3) - dipToDp(padding) * 2;
         space = space / 6; // Divide by the number of children * 2
-        check(space - 1 <= top(text1) - dipToDp(padding) && top(text1) - dipToDp(padding) <= space + 1);
-        let spaceLowerBound = space * 2 - 1;
-        let spaceUpperBound = space * 2 + 1;
-        check(spaceLowerBound <= top(text2) - bottom(text1) && top(text2) - bottom(text1) <= spaceUpperBound);
-        check(spaceLowerBound <= top(text3) - bottom(text2) && top(text3) - bottom(text2) <= spaceUpperBound);
-        check(space - 1 <= height(flexbox) - bottom(text3) - dipToDp(padding) && height(flexbox) - bottom(text3) - dipToDp(padding) <= space + 1);
+    
+        closeEnough(top(text1), paddingTop(flexbox) + space);
+        closeEnough(bottom(text1) + 2 * space, top(text2));
+        closeEnough(bottom(text2) + 2 * space, top(text3));
+        closeEnough(bottom(text3), paddingBottom(flexbox) - space);
+
+        equal(left(text1), paddingLeft(flexbox));
+        equal(left(text2), paddingLeft(flexbox));
+        equal(left(text3), paddingLeft(flexbox));
+
+        equal(right(text1), paddingRight(flexbox));
+        equal(right(text2), paddingRight(flexbox));
+        equal(right(text3), paddingRight(flexbox));
     }
 );
 
 let activity_flex_grow_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
             <Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
             <Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
             <Label id="text3" width="60" height="60" text="3" backgroundColor="blue" flexGrow="1" />
@@ -855,7 +727,7 @@ export const testFlexGrow_including_view_gone = test(
 );
 
 let activity_align_content_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
         <Label id="text1" width="120" height="120" text="1" backgroundColor="red" />
         <Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
         <Label id="text3" width="120" height="120" text="3" backgroundColor="blue" />
@@ -874,8 +746,7 @@ export const testAlignContent_stretch = test(
         isLeftAlignedWith(text3, flexbox);
         isBelow(text3, text1);
         isBelow(text3, text2);
-
-        equal(top(text3), height(flexbox) / 2);
+        equal(top(text3), top(flexbox) + height(flexbox) / 2);
     }
 );
 
@@ -891,8 +762,7 @@ export const testAlignContent_flexStart = test(
         isLeftAlignedWith(text3, flexbox);
         isBelow(text3, text1);
         isBelow(text3, text2);
-
-        equal(top(text3), height(text1));
+        equal(top(text3), top(text1) + height(text1));
     }
 );
 
@@ -905,8 +775,7 @@ export const testAlignContent_flexEnd = test(
         isAbove(text1, text3);
         isLeftAlignedWith(text1, flexbox);
         isAbove(text2, text3);
-
-        equal(bottom(text1), height(flexbox) - height(text3));
+        equal(bottom(text1), top(flexbox) + height(flexbox) - height(text3));
     }
 );
 
@@ -920,8 +789,7 @@ export const testAlignContent_flexEnd_parentPadding = test(
         isAbove(text1, text3);
         isAbove(text1, text3);
         isAbove(text2, text3);
-
-        closeEnough(bottom(text3), height(flexbox) - Length.toDevicePixels(flexbox.style.paddingBottom, 0));
+        equal(bottom(text3), paddingBottom(flexbox));
     }
 );
 
@@ -935,9 +803,7 @@ export const testAlignContent_flexEnd_parentPadding_column = test(
     ({ root, flexbox, text1, text2, text3 }) => {
         isLeftOf(text1, text3);
         isLeftOf(text2, text3);
-
-        let { bounds1, bounds2 } = comparableBounds(text3, flexbox);
-        closeEnough(bounds1.right, bounds2.right - Length.toDevicePixels(flexbox.style.paddingRight, 0));
+        equal(right(text3), paddingRight(flexbox));
     }
 );
 
@@ -951,9 +817,8 @@ export const testAlignContent_center = test(
 
         let spaceAboveAndBottom = height(flexbox) - height(text1) - height(text3);
         spaceAboveAndBottom /= 2;
-
-        check(spaceAboveAndBottom - 1 <= top(text1) && top(text1) <= spaceAboveAndBottom + 1);
-        check(height(flexbox) - spaceAboveAndBottom - 1 <= bottom(text3) && bottom(text3) <= height(flexbox) - spaceAboveAndBottom + 1);
+        isBelowWith(flexbox, text1, spaceAboveAndBottom);
+        isAboveWith(text3, flexbox, spaceAboveAndBottom);
 
         // TODO: equal(flexbox.getFlexLines().size(), is(2));
     }
@@ -997,10 +862,11 @@ export const testAlignContent_spaceAround = test(
         let spaceAround = height(flexbox) - height(text1) - height(text3);
         spaceAround /= 4; // Divide by the number of flex lines * 2
 
-        check(spaceAround - 1 <= top(text1) && top(text1) <= spaceAround + 1);
-        let spaceLowerBound = bottom(text1) + spaceAround * 2 - 1;
-        let spaceUpperBound = bottom(text1) + spaceAround * 2 + 1;
-        check(spaceLowerBound <= top(text3) && top(text3) <= spaceUpperBound);
+        isBelowWith(flexbox, text1, spaceAround);
+        isBelowWith(text1, text3, height(text1) + 2 * spaceAround);
+        isAboveWith(text3, flexbox, spaceAround);
+        isAboveWith(text1, text3, height(text3) + 2 * spaceAround);
+
         // TODO: equal(flexbox.getFlexLines().size(), is(2));
     }
 );
@@ -1021,7 +887,7 @@ export const testAlignContent_stretch_parentWrapContent = test(
         isBelow(text3, text1);
         isBelow(text3, text2);
 
-        equal(top(text3), height(text1));
+        equal(top(text3), bottom(text1));
         // TODO: equal(flexbox.getFlexLines().size(), is(2));
     }
 );
@@ -1040,7 +906,7 @@ export const testAlignContent_stretch_flexDirection_column = test(
         isRightOf(text3, text2);
 
         let flexLineCrossSize = width(flexbox) / 2;
-        equal(left(text3), flexLineCrossSize);
+        equal(left(text3), flexLineCrossSize + left(flexbox));
     }
 );
 
@@ -1059,8 +925,7 @@ export const testAlignContent_flexStart_flexDirection_column = test(
         isTopAlignedWith(text3, flexbox);
         isRightOf(text3, text1);
         isRightOf(text3, text2);
-
-        equal(left(text3), width(text1));
+        equal(left(text3), width(text1) + left(flexbox));
     }
 );
 
@@ -1076,8 +941,7 @@ export const testAlignContent_flexEnd_flexDirection_column = test(
         isLeftOf(text1, text3);
         isTopAlignedWith(text1, flexbox);
         isBelow(text2, text3);
-
-        equal(right(text1), width(flexbox) - width(text3));
+        equal(right(text1), left(flexbox) + width(flexbox) - width(text3));
     }
 );
 
@@ -1094,11 +958,8 @@ export const testAlignContent_center_flexDirection_column = test(
 
         let spaceLeftAndRight = width(flexbox) - width(text1) - width(text3);
         spaceLeftAndRight /= 2;
-
-        check(spaceLeftAndRight - 1 <= left(text1) && left(text1) <= spaceLeftAndRight + 1);
-        let spaceLowerBound = width(flexbox) - spaceLeftAndRight - 1;
-        let spaceUpperBound = width(flexbox) - spaceLeftAndRight + 1;
-        check(spaceLowerBound <= right(text3) && right(text3) <= spaceUpperBound);
+        isLeftWith(flexbox, text1, spaceLeftAndRight);
+        isRightWith(text3, flexbox, spaceLeftAndRight);
     }
 );
 
@@ -1131,11 +992,10 @@ export const testAlignContent_spaceAround_flexDirection_column = test(
 
         let spaceAround = width(flexbox) - width(text1) - width(text3);
         spaceAround /= 4; // Divide by the number of flex lines * 2
-
-        check(spaceAround - 1 <= left(text1) && left(text1) <= spaceAround + 1);
-        let spaceLowerBound = right(text1) + spaceAround * 2 - 1;
-        let spaceUpperBound = right(text1) + spaceAround * 2 + 1;
-        check(spaceLowerBound <= left(text3) && left(text3) <= spaceUpperBound);
+        isLeftWith(flexbox, text1, spaceAround);
+        isLeftWith(text1, text3, width(text1) + 2 * spaceAround);
+        isRightWith(text3, flexbox, spaceAround);
+        isRightWith(text1, text3, width(text3) + 2 * spaceAround);
     }
 );
 
@@ -1155,13 +1015,12 @@ export const testAlignContent_stretch_parentWrapContent_flexDirection_column = t
         isTopAlignedWith(text3, flexbox);
         isRightOf(text3, text1);
         isRightOf(text3, text2);
-
-        equal(left(text3), width(text1));
+        equal(left(text3), left(flexbox) + width(text1));
     }
 );
 
 let activity_stretch_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" height="360" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" height="360" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" backgroundColor="gray">
         <Label id="text1" width="140" height="80" text="1" backgroundColor="red" />
         <Label id="text2" width="140" height="80" text="2" backgroundColor="green" />
         <Label id="text3" width="140" height="80" text="3" backgroundColor="blue" />
@@ -1188,7 +1047,7 @@ export const testAlignItems_stretch = test(
 );
 
 let activity_align_self_stretch_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
         <Label id="text1" width="120" height="120" text="1" backgroundColor="red" alignSelf="${AlignSelf.STRETCH}" />
         <Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
         <Label id="text3" width="120" height="120" text="3" backgroundColor="blue" />
@@ -1208,7 +1067,6 @@ export const testAlignSelf_stretch = test(
         isBelow(text3, text2);
 
         let flexLineSize = height(flexbox) / 2;
-
         check(flexLineSize - 1 <= height(text1) && height(text1) <= flexLineSize + 1);
 
         // use eps.
@@ -1238,7 +1096,7 @@ export const testAlignSelf_stretch_flexDirection_column = test(
 );
 
 let activity_align_items_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignContent="${AlignContent.STRETCH}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignContent="${AlignContent.STRETCH}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
         <Label id="text1" width="120" height="120" text="1" backgroundColor="red" />
         <Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
         <Label id="text3" width="120" height="120" text="3" backgroundColor="blue" />
@@ -1258,11 +1116,10 @@ export const testAlignItems_flexStart = test(
         isBelow(text3, text2);
 
         let flexLineSize = height(flexbox) / 2;
-
         notEqual(height(text1), flexLineSize);
         notEqual(height(text2), flexLineSize);
         notEqual(height(text3), flexLineSize);
-        check(flexLineSize - 1 <= top(text3) && top(text3) <= flexLineSize + 1);
+        equal(top(flexbox) + flexLineSize, top(text3));
     }
 );
 
@@ -1278,18 +1135,17 @@ export const testAlignItems_flexEnd = test(
         isBottomAlignedWith(text3, flexbox);
 
         let flexLineSize = height(flexbox) / 2;
-
         notEqual(height(text1), flexLineSize);
         notEqual(height(text2), flexLineSize);
         notEqual(height(text3), flexLineSize);
-        check(flexLineSize - 1 <= bottom(text1) && bottom(text1) <= flexLineSize + 1);
-        check(flexLineSize - 1 <= bottom(text2) && bottom(text2) <= flexLineSize + 1);
-        equal(bottom(text3), height(flexbox));
+        equal(top(flexbox) + flexLineSize, bottom(text1));
+        equal(top(flexbox) + flexLineSize, bottom(text2));
+        equal(bottom(text3), top(flexbox) + height(flexbox));
     }
 );
 
 let activity_align_items_parent_padding_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="320" height="320" padding="16" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_END}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" padding="16" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_END}" backgroundColor="gray">
         <Label id="text1" width="120" height="120" text="1" backgroundColor="red" />
         <Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
     </FlexboxLayout>`
@@ -1300,8 +1156,8 @@ export const testAlignItems_flexEnd_parentPadding = test(
     ({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_END,
     ({ root, flexbox, text1, text2, text3 }) => {
         isRightOf(text2, text1);
-        closeEnough(bottom(text1), height(flexbox) - Length.toDevicePixels(flexbox.style.paddingBottom, 0));
-        closeEnough(bottom(text2), height(flexbox) - Length.toDevicePixels(flexbox.style.paddingBottom, 0));
+        isAboveWith(text1, flexbox, Length.toDevicePixels(flexbox.style.paddingBottom, 0));
+        isAboveWith(text2, flexbox, Length.toDevicePixels(flexbox.style.paddingBottom, 0));
     }
 );
 
@@ -1313,8 +1169,8 @@ export const testAlignItems_flexEnd_parentPadding_column = test(
     },
     ({ root, flexbox, text1, text2, text3 }) => {
         isBelow(text2, text1);
-        closeEnough(right(text1), width(flexbox) - Length.toDevicePixels(flexbox.style.paddingRight, 0));
-        closeEnough(right(text2), width(flexbox) - Length.toDevicePixels(flexbox.style.paddingRight, 0));
+        isRightWith(text1, flexbox, Length.toDevicePixels(flexbox.style.paddingRight, 0));
+        isRightWith(text2, flexbox, Length.toDevicePixels(flexbox.style.paddingRight, 0));
     }
 );
 
@@ -1329,14 +1185,18 @@ export const testAlignItems_center = test(
         isBelow(text3, text2);
 
         let flexLineSize = height(flexbox) / 2;
-
         let spaceAboveAndBelow = (flexLineSize - height(text1)) / 2;
         notEqual(height(text1), flexLineSize);
         notEqual(height(text2), flexLineSize);
         notEqual(height(text3), flexLineSize);
-        check(spaceAboveAndBelow - 1 <= top(text1) && top(text1) <= spaceAboveAndBelow + 1);
-        check(spaceAboveAndBelow - 1 <= top(text2) && top(text2) <= spaceAboveAndBelow + 1);
-        check(flexLineSize + spaceAboveAndBelow - 1 <= top(text3) && top(text3) <= flexLineSize + spaceAboveAndBelow + 1);
+
+        isBelowWith(flexbox, text1, spaceAboveAndBelow);
+        isBelowWith(flexbox, text2, spaceAboveAndBelow);
+        isBelowWith(text1, text3, flexLineSize);
+        isBelowWith(text2, text3, flexLineSize);
+
+        isAboveWith(text3, flexbox, spaceAboveAndBelow);
+        isAboveWith(text1, text3, flexLineSize);
     }
 );
 
@@ -1353,15 +1213,14 @@ export const testAlignItems_flexEnd_wrapReverse = test(
         isTopAlignedWith(text3, flexbox);
 
         let flexLineSize = height(flexbox) / 2;
-
         notEqual(height(text1), flexLineSize);
         notEqual(height(text2), flexLineSize);
         notEqual(height(text3), flexLineSize);
-        let lowerBound = height(flexbox) - flexLineSize - 1;
-        let upperBound = height(flexbox) - flexLineSize + 1;
-        check(lowerBound <= top(text1) && top(text1) <= upperBound);
-        check(lowerBound <= top(text2) && top(text2) <= upperBound);
-        equal(top(text3), 0);
+
+        isBelowWith(flexbox, text1, flexLineSize);
+        isBelowWith(flexbox, text2, flexLineSize);
+        isBelowWith(text3, text1, flexLineSize);
+        isBelowWith(text3, text2, flexLineSize);
     }
 );
 
@@ -1377,17 +1236,18 @@ export const testAlignItems_center_wrapReverse = test(
         isLeftAlignedWith(text3, flexbox);
 
         let flexLineSize = height(flexbox) / 2;
-
         let spaceAboveAndBelow = (flexLineSize - height(text1)) / 2;
         notEqual(height(text1), flexLineSize);
         notEqual(height(text2), flexLineSize);
         notEqual(height(text3), flexLineSize);
-        let lowerBound = height(flexbox) - spaceAboveAndBelow - 1;
-        let upperBound = height(flexbox) - spaceAboveAndBelow + 1;
-        check(lowerBound <= bottom(text1) && bottom(text1) <= upperBound);
-        check(lowerBound <= bottom(text2) && bottom(text2) <= upperBound);
-        check(height(flexbox) - flexLineSize - spaceAboveAndBelow - 1 <= bottom(text3)
-            && bottom(text3) <= height(flexbox) - flexLineSize - spaceAboveAndBelow + 1);
+
+        isBelowWith(flexbox, text3, spaceAboveAndBelow);
+        isBelowWith(text3, text1, flexLineSize);
+        isBelowWith(text3, text2, flexLineSize);
+
+        isAboveWith(text3, text1, flexLineSize);
+        isAboveWith(text1, flexbox, spaceAboveAndBelow);
+        isAboveWith(text2, flexbox, spaceAboveAndBelow);
     }
 );
 
@@ -1407,7 +1267,7 @@ export const testAlignItems_flexStart_flexDirection_column = test(
         notEqual(width(text1), flexLineSize);
         notEqual(width(text2), flexLineSize);
         notEqual(width(text3), flexLineSize);
-        check(flexLineSize - 1 <= left(text3) && left(text3) <= flexLineSize + 1);
+        isLeftWith(flexbox, text3, flexLineSize);
     }
 );
 
@@ -1425,14 +1285,12 @@ export const testAlignItems_flexEnd_flexDirection_column = test(
         isRightOf(text3, text2);
         isRightAlignedWith(text3, flexbox);
 
-        let flexLineSize = height(flexbox) / 2;
-
+        let flexLineSize = width(flexbox) / 2;
         notEqual(width(text1), flexLineSize);
         notEqual(width(text2), flexLineSize);
         notEqual(width(text3), flexLineSize);
-        check(flexLineSize - 1 <= right(text1) && right(text1) <= flexLineSize + 1);
-        check(flexLineSize - 1 <= right(text2) && right(text2) <= flexLineSize + 1);
-        equal(right(text3), width(flexbox));
+        isRightWith(text1, flexbox, flexLineSize);
+        isRightWith(text2, flexbox, flexLineSize);
     }
 )
 
@@ -1450,14 +1308,13 @@ export const testAlignItems_center_flexDirection_column = test(
         isRightOf(text3, text2);
 
         let flexLineSize = width(flexbox) / 2;
-
         let spaceLeftAndRight = (flexLineSize - width(text1)) / 2;
         notEqual(width(text1), flexLineSize);
         notEqual(width(text2), flexLineSize);
         notEqual(width(text3), flexLineSize);
-        check(spaceLeftAndRight - 1 <= left(text1) && left(text1) <= spaceLeftAndRight + 1);
-        check(spaceLeftAndRight - 1 <= left(text2) && left(text2) <= spaceLeftAndRight + 1);
-        check(flexLineSize + spaceLeftAndRight - 1 <= left(text3) && left(text2) <= flexLineSize + spaceLeftAndRight + 1);
+        isLeftWith(flexbox, text1, spaceLeftAndRight);
+        isLeftWith(flexbox, text2, spaceLeftAndRight);
+        isLeftWith(flexbox, text3, flexLineSize + spaceLeftAndRight);
     }
 );
 
@@ -1475,15 +1332,11 @@ export const testAlignItems_flexEnd_wrapReverse_flexDirection_column = test(
         isTopAlignedWith(text3, flexbox);
 
         let flexLineSize = width(flexbox) / 2;
-
         notEqual(width(text1), flexLineSize);
         notEqual(width(text2), flexLineSize);
         notEqual(width(text3), flexLineSize);
-        let lowerBound = width(flexbox) - flexLineSize - 1;
-        let upperBound = width(flexbox) - flexLineSize + 1;
-        check(lowerBound <= left(text1) && left(text1) <= upperBound);
-        check(lowerBound <= left(text2) && left(text2) <= upperBound);
-        equal(left(text3), 0);
+        isLeftWith(flexbox, text1, flexLineSize);
+        isLeftWith(flexbox, text2, flexLineSize);
     }
 );
 
@@ -1500,21 +1353,21 @@ export const testAlignItems_center_wrapReverse_flexDirection_column = test(
         isTopAlignedWith(text3, flexbox);
 
         let flexLineSize = width(flexbox) / 2;
-
         let spaceLeftAndRight = (flexLineSize - width(text1)) / 2;
         notEqual(width(text1), flexLineSize);
         notEqual(width(text2), flexLineSize);
         notEqual(width(text3), flexLineSize);
-        let lowerBound = width(flexbox) - spaceLeftAndRight - 1;
-        let upperBound = width(flexbox) - spaceLeftAndRight + 1;
-        check(lowerBound <= right(text1) && right(text1) <= upperBound);
-        check(lowerBound <= right(text2) && right(text2) <= upperBound);
-        check(width(flexbox) - flexLineSize - spaceLeftAndRight - 1 <= right(text3) && right(text3) <= width(flexbox) - flexLineSize - spaceLeftAndRight + 1);
+        isLeftWith(flexbox, text1, flexLineSize + spaceLeftAndRight);
+        isLeftWith(flexbox, text2, flexLineSize + spaceLeftAndRight);
+        isLeftWith(flexbox, text3, spaceLeftAndRight);
+        isRightWith(text1, flexbox, spaceLeftAndRight);
+        isRightWith(text2, flexbox, spaceLeftAndRight);
+        isRightWith(text3, flexbox, flexLineSize + spaceLeftAndRight);
     }
 );
 
 let activity_align_items_baseline_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.BASELINE}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.BASELINE}" backgroundColor="gray">
         <Label id="text1" width="30" height="80" text="1" verticalAlignment="bottom" backgroundColor="red" />
         <Label id="text2" width="30" height="80" text="2" verticalAlignment="top" backgroundColor="green" />
         <Label id="text3" width="30" height="80" text="2" verticalAlignment="center" backgroundColor="blue" />
@@ -1548,7 +1401,7 @@ export const testAlignItems_baseline_wrapReverse = test(
 );
 
 let activity_flex_wrap_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" height="300" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" height="300" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
         <Label id="text1" width="160" height="120" text="1" backgroundColor="red" />
         <Label id="text2" width="160" height="120" text="2" backgroundColor="green" />
         <Label id="text3" width="160" height="120" text="3" backgroundColor="blue" />
@@ -1584,7 +1437,7 @@ export const testFlexDirection_column_reverse = test(
 );
 
 let activity_flex_basis_percent_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
         <Label id="text1" width="50%" height="50%" text="1" backgroundColor="red" />
         <Label id="text2" width="60%" height="60%" text="2" backgroundColor="green" />
         <Label id="text3" width="60" height="60" text="3" backgroundColor="blue" />
@@ -1659,7 +1512,7 @@ export const testFlexBasisPercent_nowrap_flexDirection_column = test(
 );
 
 let activity_minwidth_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="400" height="400" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" backgroundColor="gray">
             <Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minWidth="100" backgroundColor="red" />
             <Label id="text2" horizontalAlignment="left" verticalAlignment="top" text="2" minWidth="100" backgroundColor="green" flexGrow="1" />
         </FlexboxLayout>`
@@ -1676,7 +1529,7 @@ export const testMinWidth_initial_width_less_than_minWidth = test(
 );
 
 let activity_minwidth_lower_bound_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="400" height="400" flexWrap="${FlexWrap.NOWRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" flexWrap="${FlexWrap.NOWRAP}" backgroundColor="gray">
         <Label id="text1" width="200" verticalAlignment="top" text="1" minWidth="150" backgroundColor="red" />
         <Label id="text2" width="200" verticalAlignment="top" text="1" backgroundColor="green" />
         <Label id="text3" width="200" verticalAlignment="top" text="1" backgroundColor="blue" />
@@ -1694,7 +1547,7 @@ export const testMinWidth_works_as_lower_bound_shrink_to = test(
 );
 
 let activity_minheight_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="400" height="400" flexDirection="${FlexDirection.COLUMN}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" flexDirection="${FlexDirection.COLUMN}" backgroundColor="gray">
         <Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minHeight="100" backgroundColor="red" />
         <Label id="text2" horizontalAlignment="left" verticalAlignment="top" text="2" backgroundColor="green" flexGrow="1" />
     </FlexboxLayout>`
@@ -1710,7 +1563,7 @@ export const testMinHeight_initial_height_less_than_minHeight = test(
 );
 
 let activity_minheight_lower_bound_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="400" height="400" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.NOWRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.NOWRAP}" backgroundColor="gray">
         <Label id="text1" horizontalAlignment="left" height="200" text="1" minHeight="150" backgroundColor="red" />
         <Label id="text2" horizontalAlignment="left" height="200" text="2" backgroundColor="green" />
         <Label id="text3" horizontalAlignment="left" height="200" text="3" backgroundColor="blue" />
@@ -1734,7 +1587,7 @@ export const testMinHeight_works_as_lower_bound_shrink_to = test(
 // omit: testMaxHeight_works_as_lower_bound_expand_to
 
 let activity_views_visibility_gone = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" height="300" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" height="300" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
         <Label id="text1" width="160" height="120" text="1" visibility="collapse" backgroundColor="red" />
         <Label id="text2" width="160" height="120" text="2" visibility="collapse" backgroundColor="green" />
         <Label id="text3" width="160" height="120" text="3" backgroundColor="blue" />
@@ -1760,7 +1613,7 @@ export const testView_visibility_gone = test(
 );
 
 let activity_visibility_gone_first_item_in_flex_line_row = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" verticalAlignment="top" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" verticalAlignment="top" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
         <Label id="text1" width="160" verticalAlignment="top" text="1" backgroundColor="red" />
         <Label id="text2" width="120" verticalAlignment="top" text="2" backgroundColor="green" />
         <Label id="text3" width="160" verticalAlignment="top" text="3" visibility="collapse" backgroundColor="blue" />
@@ -1777,7 +1630,7 @@ export const testView_visibility_gone_first_item_in_flex_line_horizontal = test(
 );
 
 let activity_visibility_gone_first_item_in_flex_line_column = () => getViews(
-    `<FlexboxLayout id="flexbox" horizontalAlignment="left" height="360" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="360" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
         <Label id="text1" horizontalAlignment="left" height="160" text="1" backgroundColor="red" />
         <Label id="text2" horizontalAlignment="left" height="160" text="1" backgroundColor="green" />
         <Label id="text3" horizontalAlignment="left" height="160" text="1" visibility="collapse" backgroundColor="blue" />
@@ -1794,7 +1647,7 @@ export const testView_visibility_gone_first_item_in_flex_line_vertical = test(
 );
 
 let activity_wrap_before_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" horizontalAlignment="left" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" horizontalAlignment="left" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
         <Label id="text1" width="100" height="80" text="1" backgroundColor="red" />
         <Label id="text2" width="100" height="80" text="2" backgroundColor="green" flexWrapBefore="true" />
         <Label id="text3" width="100" height="80" text="3" backgroundColor="blue" flexWrapBefore="true" />
@@ -1846,7 +1699,7 @@ export const testWrapBefore_nowrap = test(
 );
 
 let activity_wrap_parent_padding_horizontal_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" verticalAlignment="top" padding="32" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" verticalAlignment="top" padding="32" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
         <Label id="text1" width="280" height="80" text="1" backgroundColor="red" />
         <Label id="text2" width="30" height="80" text="2" backgroundColor="green" />
         <Label id="text3" width="100" height="80" text="3" backgroundColor="blue" /> 
@@ -1864,7 +1717,7 @@ export const testWrap_parentPadding_horizontal = test(
 );
 
 let activity_wrap_parent_padding_vertical_test = () => getViews(
-    `<FlexboxLayout id="flexbox" horizontalAlignment="left" height="360" padding="32" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="360" padding="32" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
         <Label id="text1" width="80" height="280" text="1" backgroundColor="red" />
         <Label id="text2" width="80" height="30" text="2" backgroundColor="green" />
         <Label id="text3" width="80" height="80" text="3" backgroundColor="blue" />
@@ -1882,7 +1735,7 @@ export const testWrap_parentPadding_vertical = test(
 );
 
 let activity_wrap_child_margin_horizontal_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="360" verticalAlignment="top" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" verticalAlignment="top" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
         <Label id="text1" width="280" height="80" text="1" backgroundColor="red" />
         <Label id="text2" width="30" height="80" text="2" margin="32" backgroundColor="green" />
         <Label id="text3" width="100" height="80" text="3" backgroundColor="blue" />
@@ -1900,7 +1753,7 @@ export const testWrap_childMargin_horizontal = test(
 );
 
 let activity_first_item_large_horizontal_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" alignContent="${AlignItems.STRETCH}">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" alignContent="${AlignItems.STRETCH}">
         <Label id="text1" width="500" height="60" text="1" />
         <Label id="text2" width="120" height="60" text="2" />
         <Label id="text3" width="300" height="60" text="3" />
@@ -1922,7 +1775,7 @@ export const testFirstItemLarge_horizontal = test(
 );
 
 let activity_first_item_large_vertical_test = () => getViews(
-    `<FlexboxLayout id="flexbox" width="320" height="320" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
         <Label id="text1" width="60" height="500" text="1" backgroundColor="red" />
         <Label id="text2" width="60" height="120" text="2" backgroundColor="green" />
         <Label id="text3" width="6" height="300" text="3" backgroundColor="blue" />
@@ -1944,7 +1797,7 @@ export const testFirstItemLarge_vertical = test(
 );
 
 let activity_wrap_child_margin_vertical_test = () => getViews(
-    `<FlexboxLayout id="flexbox" horizontalAlignment="left" height="360" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="360" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
         <Label id="text1" width="80" height="280" text="1" backgroundColor="red" />
         <Label id="text2" width="80" height="30" margin="32" text="2" backgroundColor="green" />
         <Label id="text3" width="80" height="80" text="3" backgroundColor="blue" />
@@ -1963,7 +1816,7 @@ export const testWrap_childMargin_vertical = test(
 );
 
 let activity_flexbox_with_proxy_view_container = () => getViews(
-    `<FlexboxLayout id="flexbox">
+    `<FlexboxLayout iosOverflowSafeArea="false" id="flexbox">
         <ProxyViewContainer></ProxyViewContainer>
     </FlexboxLayout>`
 );
diff --git a/tests/app/ui/layouts/grid-layout-tests.ts b/tests/app/ui/layouts/grid-layout-tests.ts
index a872d6c67..c286121a5 100644
--- a/tests/app/ui/layouts/grid-layout-tests.ts
+++ b/tests/app/ui/layouts/grid-layout-tests.ts
@@ -10,7 +10,6 @@ import * as layoutHelper from "./layout-helper";
 import * as platform from "tns-core-modules/platform";
 import * as commonTests from "./common-layout-tests";
 import * as helper from "../helper";
-
 var DELTA = 1;
 
 class RemovalTrackingGridLayout extends GridLayout {
diff --git a/tests/app/ui/layouts/layout-tests-helper.ts b/tests/app/ui/layouts/layout-tests-helper.ts
new file mode 100644
index 000000000..a388927be
--- /dev/null
+++ b/tests/app/ui/layouts/layout-tests-helper.ts
@@ -0,0 +1,98 @@
+import { View, Length } from "tns-core-modules/ui/core/view";
+import * as TKUnit from "../../TKUnit";
+import { layout } from "tns-core-modules/utils/utils";
+
+import round = layout.round;
+export const dipToDp = layout.toDevicePixels;
+
+const EPS = 1;
+
+export function left(view: View): number { return round(dipToDp(view.getLocationInWindow().x)); }
+export function top(view: View): number { return round(dipToDp(view.getLocationInWindow().y)); }
+export function right(view: View): number { return left(view) + width(view); }
+export function bottom(view: View): number { return top(view) + height(view); }
+
+export function height(view: View): number {
+    return round(dipToDp(view.getActualSize().height));
+}
+
+export function width(view: View): number {
+    return round(dipToDp(view.getActualSize().width));
+}
+
+export function paddingLeft(view: View): number { return Length.toDevicePixels(view.style.paddingLeft, 0) + Length.toDevicePixels(view.parent.style.paddingLeft, 0) + (<View>view.parent).getSafeAreaInsets().left; };
+export function paddingTop(view: View): number { return top(view) + Length.toDevicePixels(view.style.paddingTop, 0) };
+export function paddingRight(view: View): number { return right(view) - Length.toDevicePixels(view.style.paddingRight, 0) };
+export function paddingBottom(view: View): number { return bottom(view) - Length.toDevicePixels(view.style.paddingBottom, 0) };
+
+export function equal<T>(a: T, b: T, message?: string) {
+    message ? TKUnit.assertEqual(a, b, message) : TKUnit.assertEqual(a, b);
+}
+
+export function closeEnough(a: number, b: number, message?: string) {
+    message ? TKUnit.assertTrue(Math.abs(a - b) <= EPS, message) : TKUnit.assertTrue(Math.abs(a - b) <= EPS);
+}
+
+export function notEqual<T>(a: T, b: T, message?: string) {
+    message ? TKUnit.assertNotEqual(a, b, message) : TKUnit.assertNotEqual(a, b);
+}
+
+export function check(exp: boolean, message?: string) {
+    message ? TKUnit.assert(exp, message) : TKUnit.assert(exp);
+}
+
+export function heightEqual(view1: View, view2: View, message?: string) {
+    equal(height(view1), height(view2), message || `Expected height of ${view1}:${height(view1)} to equal height of ${view2}:${height(view2)}.`);
+}
+
+export function widthEqual(view1: View, view2: View, message?: string) {
+    equal(width(view1), width(view2), message || `Expected width of ${view1}:${width(view1)} to equal width of ${view2}:${width(view2)}.`);
+}
+
+export function isLeftAlignedWith(view1: View, view2: View, message?: string) {
+    TKUnit.assertEqual(left(view1), left(view2), message || `${view1}:${left(view1)} is not left-aligned with ${view2}:${left(view2)}`);
+}
+
+export function isRightAlignedWith(view1: View, view2: View, message?: string) {
+    TKUnit.assertEqual(right(view1), right(view2), message || `${view1}:${right(view1)} is not right-aligned with ${view2}:${right(view2)}`);
+}
+
+export function isTopAlignedWith(view1: View, view2: View, message?: string) {
+    TKUnit.assertEqual(top(view1), top(view2), message || `${view1}:${top(view1)} is not top-aligned with ${view2}:${top(view2)}`);
+}
+
+export function isBottomAlignedWith(view1: View, view2: View, message?: string) {
+    TKUnit.assertEqual(bottom(view1), bottom(view2), message || `${view1}:${bottom(view1)} is not bottom-aligned with ${view2}:${bottom(view2)}`);
+}
+
+export function isLeftOf(view1: View, view2: View, message?: string) {
+    TKUnit.assert(right(view1) <= left(view2), message || `${view1}.right:${right(view1)} is not left of ${view2}.left:${left(view2)}`);
+}
+
+export function isAbove(view1: View, view2: View, message?: string) {
+    TKUnit.assert(bottom(view1) <= top(view2), message || `${view1}.bottom:${bottom(view1)} is not above ${view2}.top:${top(view2)}`);
+}
+
+export function isRightOf(view1: View, view2: View, message?: string) {
+    TKUnit.assert(left(view1) >= right(view2), message || `${view1}.left:${left(view1)} is not right of ${view2}.right:${right(view2)}`);
+}
+
+export function isBelow(view1: View, view2: View, distance?: number, message?: string) {
+    TKUnit.assert(top(view1) >= bottom(view2), message || `${view1}.top:${top(view1)} is not below ${view2}.bottom:${bottom(view1)}`);
+}
+
+export function isLeftWith(view1: View, view2: View, distance: number, message?: string) {
+    TKUnit.assertTrue(Math.abs(left(view1) + distance - left(view2)) <= EPS, message || `${view1}.left:${left(view1)} is not ${distance} of ${view2}.left:${left(view2)}`);
+}
+
+export function isAboveWith(view1: View, view2: View, distance: number, message?: string) {
+    TKUnit.assertTrue(Math.abs(bottom(view1) + distance - bottom(view2)) <= EPS, message || `${view1}.bottom:${bottom(view1)} is not ${distance} of ${view2}.bottom:${bottom(view2)}`);
+}
+
+export function isRightWith(view1: View, view2: View, distance: number, message?: string) {
+    TKUnit.assertTrue(Math.abs(right(view1) + distance - right(view2)) <= EPS, message || `${view1}.right:${right(view1)} is not ${distance} of ${view2}.right:${right(view2)}`);
+}
+
+export function isBelowWith(view1: View, view2: View, distance: number, message?: string) {
+    TKUnit.assertTrue(Math.abs(top(view1) + distance - top(view2)) <= EPS, message || `${view1}.top:${top(view1)} is not ${distance} of ${view2}.top:${top(view2)}`);
+}
diff --git a/tests/app/ui/layouts/safe-area-tests.ts b/tests/app/ui/layouts/safe-area-tests.ts
new file mode 100644
index 000000000..860b81abc
--- /dev/null
+++ b/tests/app/ui/layouts/safe-area-tests.ts
@@ -0,0 +1,1482 @@
+import { Page } from "tns-core-modules/ui/page";
+import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";
+import { Button } from "tns-core-modules/ui/button";
+import * as TKUnit from "../../TKUnit";
+import * as view from "tns-core-modules/ui/core/view";
+import { unsetValue } from "tns-core-modules/ui/core/view";
+import * as builder from "tns-core-modules/ui/builder";
+import * as testModule from "../../ui-test";
+import * as layoutHelper from "./layout-helper";
+import * as platform from "tns-core-modules/platform";
+import { ios as iosUtils } from "tns-core-modules/utils/utils";
+import * as commonTests from "./common-layout-tests";
+import * as helper from "../helper";
+import { parse } from "tns-core-modules/ui/builder";
+import {
+    dipToDp, left, top, right, bottom, height, width,
+    paddingLeft, paddingTop, paddingRight, paddingBottom,
+    equal, closeEnough, notEqual, check,
+    heightEqual, widthEqual,
+    isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith,
+    isLeftOf, isRightOf, isBelow, isAbove,
+    isLeftWith, isAboveWith, isRightWith, isBelowWith
+} from "./layout-tests-helper";
+
+export class SafeAreaTests extends testModule.UITest<any> {
+
+    public create(): any {
+        return null;
+    }
+
+    private executeSnippet<U extends { root: view.View }>(ui: U, setup: (ui: U) => void, test: (ui: U) => void, pageOptions?: helper.PageOptions): void {
+        function waitUntilTestElementLayoutIsValid(view: view.View, timeoutSec?: number): void {
+            TKUnit.waitUntilReady(() => {
+                return view.isLayoutValid;
+            }, timeoutSec || 1);
+        }
+
+        setup(ui);
+        helper.buildUIAndRunTest(ui.root, () => {
+            waitUntilTestElementLayoutIsValid(ui.root);
+            test(ui);
+        }, pageOptions);
+    };
+
+    private noop() {
+        // no operation
+    };
+
+    // Common
+    private getViews(template: string) {
+        let root = parse(template);
+        return {
+            root,
+            child0: root.getViewById("child0") as view.View,
+            child1: root.getViewById("child1") as view.View,
+            child2: root.getViewById("child2") as view.View
+        };
+    };
+
+    private layout_insets_top_action_bar_test(layout: view.View) {
+        const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
+        const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
+        const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
+        const topInset = statusBarHeight + actionBarHeight;
+
+        const insets = layout.getSafeAreaInsets();
+        equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
+    }
+
+    private layout_insets_top_action_bar_hidden_test(layout: view.View) {
+        const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
+        const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
+        const topInset = statusBarHeight;
+
+        const insets = layout.getSafeAreaInsets();
+        equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
+    }
+
+    private layout_insets_top_action_bar_flat_test(layout: view.View) {
+        const insets = layout.getSafeAreaInsets();
+        equal(insets.top, 0, `${layout}.topInset - actual:${insets.top}; expected: ${0}`)
+    }
+
+    private layout_in_full_screen_test(layout: view.View, pageOptions?: helper.PageOptions) {
+        let expectedTop = 0;
+        if (pageOptions && (pageOptions.actionBarFlat)) {
+            const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
+            const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
+            const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
+            
+            expectedTop = statusBarHeight + actionBarHeight;
+        }
+
+        const l = left(layout);
+        const t = top(layout);
+        const r = right(layout);
+        const b = bottom(layout);
+        equal(l, 0, `${layout}.left - actual:${l}; expected: ${0}`);
+        equal(t, expectedTop, `${layout}.top - actual:${t}; expected: ${expectedTop}`);
+        equal(r, platform.screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
+        equal(b, platform.screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+    }
+
+    // Absolute
+    private absolute_in_full_screen(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_in_full_screen_test(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_absolute_in_full_screen_action_bar() {
+        this.absolute_in_full_screen({ actionBar: true });
+    }
+
+    public test_absolute_in_full_screen_action_bar_hidden() {
+        this.absolute_in_full_screen({ actionBarHidden: true });
+    }
+
+    public test_absolute_in_full_screen_action_bar_flat() {
+        this.absolute_in_full_screen({ actionBarFlat: true });
+    }
+
+    public test_absolute_in_full_screen_tab_bar() {
+        this.absolute_in_full_screen({ tabBar: true });
+    }
+
+    public test_absolute_in_full_screen_tab_bar_action_bar() {
+        this.absolute_in_full_screen({ actionBar: true, tabBar: true });
+    }
+
+    public test_absolute_insets_top_action_bar() {
+        const snippet = `
+        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true }
+        );
+    }
+
+    public test_absolute_insets_top_action_bar_hidden() {
+        const snippet = `
+        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { actionBarHidden: true }
+        );
+    }
+
+    public test_absolute_insets_top_action_bar_flat() {
+        const snippet = `
+        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_flat_test(root);
+            },
+            { actionBarFlat: true }
+        );
+    }
+
+    public test_absolute_insets_top_tab_bar_flat() {
+        const snippet = `
+        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { tabBar: true }
+        );
+    }
+
+    public test_absolute_insets_top_tab_bar_action_bar_flat() {
+        const snippet = `
+        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true, tabBar: true }
+        );
+    }
+
+    private absolute_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <AbsoluteLayout id="abs">
+            <Button id="child0" text="Left: 0, Top: 0" left="0" top="0" backgroundColor="red" />
+            <Button text="Left: 30, Top: 80" left="30" top="80" backgroundColor="green" />
+            <Button text="Left: 150, Top: 25" left="150" top="25" backgroundColor="blue" />
+            <Button text="Left: 70, Top: 150" left="70" top="150" backgroundColor="yellow" />
+        </AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0 }) => {
+                const insets = root.getSafeAreaInsets();
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_absolute_children_components_in_safe_area_action_bar() {
+        this.absolute_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_absolute_children_components_in_safe_area_action_bar_hidden() {
+        this.absolute_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_absolute_children_components_in_safe_area_tab_bar() {
+        this.absolute_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private absolute_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <AbsoluteLayout id="abs">
+            <AbsoluteLayout id="child0" left="0" top="0" backgroundColor="red">
+                <Label text="Left: 0, Top: 0" />
+            </AbsoluteLayout>
+            <AbsoluteLayout left="30" top="80" backgroundColor="green">
+                <Label text="Left: 30, Top: 80" />
+            </AbsoluteLayout>
+            <AbsoluteLayout left="150" top="25" backgroundColor="blue">
+                <Label text="Left: 150, Top: 25" />
+            </AbsoluteLayout>
+            <AbsoluteLayout left="70" top="150" backgroundColor="yellow">
+                <Label text="Left: 70, Top: 150"  />
+            </AbsoluteLayout>
+        </AbsoluteLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0 }) => {
+                isLeftAlignedWith(root, child0);
+                isTopAlignedWith(root, child0);
+            },
+            pageOptions
+        );
+    }
+
+    public test_absolute_nested_layouts_beyond_safe_area_action_bar() {
+        this.absolute_nested_layouts_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_absolute_nested_layouts_beyond_safe_area_action_bar_hidden() {
+        this.absolute_nested_layouts_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_absolute_nested_layouts_beyond_safe_area_tab_bar() {
+        this.absolute_nested_layouts_beyond_safe_area({ tabBar: true });
+    }
+
+    // Dock
+    private getDockViews(template: string) {
+        let root = parse(template);
+        return {
+            root,
+            childLeft: root.getViewById("childLeft") as view.View,
+            childTop: root.getViewById("childTop") as view.View,
+            childRight: root.getViewById("childRight") as view.View,
+            childBottom: root.getViewById("childBottom") as view.View,
+            childFill: root.getViewById("childFill") as view.View,
+        };
+    };
+
+    private dock_in_full_screen(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getDockViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_in_full_screen_test(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_dock_in_full_screen_action_bar() {
+        this.dock_in_full_screen({ actionBar: true });
+    }
+
+    public test_dock_in_full_screen_action_bar_hidden() {
+        this.dock_in_full_screen({ actionBarHidden: true });
+    }
+
+    public test_dock_in_full_screen_action_bar_flat() {
+        this.dock_in_full_screen({ actionBarFlat: true });
+    }
+
+    public test_dock_in_full_screen_tab_bar() {
+        this.dock_in_full_screen({ tabBar: true });
+    }
+
+    public test_dock_in_full_screen_tab_bar_action_bar() {
+        this.dock_in_full_screen({ actionBar: true, tabBar: true });
+    }
+
+    public test_dock_insets_top_action_bar() {
+        const snippet = `
+        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true }
+        );
+    }
+
+    public test_dock_insets_top_action_bar_hidden() {
+        const snippet = `
+        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { actionBarHidden: true }
+        );
+    }
+
+    public test_dock_insets_top_action_bar_flat() {
+        const snippet = `
+        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_flat_test(root);
+            },
+            { actionBarFlat: true }
+        );
+    }
+
+    public test_dock_insets_top_tab_bar_flat() {
+        const snippet = `
+        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { tabBar: true }
+        );
+    }
+
+    public test_dock_insets_top_tab_bar_action_bar_flat() {
+        const snippet = `
+        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true, tabBar: true }
+        );
+    }
+
+    private dock_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <DockLayout id="dock" stretchLastChild="true">
+            <Label id="childLeft" dock="Left" text="left" backgroundColor="red" />
+            <Label id="childTop" dock="Top" text="top" backgroundColor="green" />
+            <Label id="childRight" dock="Right" text="right" backgroundColor="blue" />
+            <Label id="childBottom" dock="Bottom" text="bottom" backgroundColor="yellow" />
+            <Label id="childFill" text="fill"/>
+        </DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getDockViews(snippet),
+            this.noop,
+            ({ root, childLeft, childTop, childRight, childBottom, childFill }) => {
+                const insets = root.getSafeAreaInsets();
+
+                equal(left(childLeft), insets.left, `${childLeft}.left - actual: ${left(childLeft)} expected: ${insets.left}`);
+                equal(top(childLeft), insets.top, `${childLeft}.top - actual: ${top(childLeft)} expected: ${insets.top}`);
+
+                equal(top(childTop), insets.top, `${childTop}.top - actual: ${top(childTop)} expected: ${insets.top}`);
+                equal(right(childTop), width(root) - insets.right, `${childTop}.right - actual: ${right(childTop)} expected: ${width(root) - insets.right}`);
+
+                equal(right(childRight), width(root) - insets.right, `${childRight}.right - actual: ${right(childRight)} expected: ${width(root) - insets.right}`);
+                equal(bottom(childRight), height(root) - insets.bottom, `${childRight}.bottom - actual: ${bottom(childRight)} expected: ${height(root) - insets.bottom}`);
+
+                equal(bottom(childBottom), height(root) - insets.bottom, `${childBottom}.bottom - actual: ${bottom(childBottom)} expected: ${height(root) - insets.bottom}`);
+
+                isLeftWith(childLeft, childFill, width(childLeft));
+                isBelowWith(childTop, childFill, height(childTop));
+                isRightWith(childFill, childRight, width(childRight));
+                isAboveWith(childFill, childBottom, height(childBottom));
+            },
+            pageOptions
+        );
+    }
+
+    public test_dock_children_components_in_safe_area_action_bar() {
+        this.dock_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_dock_children_components_in_safe_area_action_bar_hidden() {
+        this.dock_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_dock_children_components_in_safe_area_tab_bar() {
+        this.dock_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private dock_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <DockLayout id="dock" stretchLastChild="true">
+            <DockLayout id="childLeft" dock="Left" text="left" backgroundColor="red">
+                <Label text="left"/>
+            </DockLayout>
+            <DockLayout id="childTop" dock="Top" text="top" backgroundColor="green">
+                <Label text="top" />
+            </DockLayout>
+            <DockLayout id="childRight" dock="Right" text="right" backgroundColor="blue">
+                <Label text="right" />
+            </DockLayout>
+            <DockLayout id="childBottom" dock="Bottom" text="bottom" backgroundColor="yellow">
+                <Label text="bottom" />
+            </DockLayout>
+            <DockLayout id="childFill" text="fill">
+                <Label text="fill" />
+            </DockLayout>
+        </DockLayout>
+        `;
+
+        this.executeSnippet(
+            this.getDockViews(snippet),
+            this.noop,
+            ({ root, childLeft, childTop, childRight, childBottom, childFill }) => {
+                isLeftAlignedWith(root, childLeft);
+                isTopAlignedWith(root, childLeft);
+
+                isTopAlignedWith(root, childTop);
+                isRightAlignedWith(root, childTop);
+
+                isRightAlignedWith(root, childRight);
+                isBottomAlignedWith(root, childRight);
+
+                isBottomAlignedWith(root, childRight);
+
+                const sumOfNestedDockHeights = height(childTop) + height(childFill) + height(childBottom);
+                equal(height(root), sumOfNestedDockHeights, `dock height<${height(root)}> sum of nested docks height <${sumOfNestedDockHeights}>`);
+
+                const sumOfNestedDockWidths = width(childLeft) + width(childFill) + width(childRight)
+                equal(width(root), sumOfNestedDockWidths, `dock width<${width(root)}> sum of nested docks width <${sumOfNestedDockWidths}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_dock_nested_layouts_beyond_safe_area_action_bar() {
+        this.dock_nested_layouts_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_dock_nested_layouts_beyond_safe_area_action_bar_hidden() {
+        this.dock_nested_layouts_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_dock_nested_layouts_beyond_safe_area_tab_bar() {
+        this.dock_nested_layouts_beyond_safe_area({ tabBar: true });
+    }
+
+    // Flexbox
+    private flexbox_in_full_screen(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => {
+                this.layout_in_full_screen_test(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_flexbox_in_full_screen_action_bar() {
+        this.flexbox_in_full_screen({ actionBar: true });
+    }
+
+    public test_flexbox_in_full_screen_action_bar_hidden() {
+        this.flexbox_in_full_screen({ actionBarHidden: true });
+    }
+
+    public test_flexbox_in_full_screen_action_bar_flat() {
+        this.flexbox_in_full_screen({ actionBarFlat: true });
+    }
+
+    public test_flexbox_in_full_screen_tab_bar() {
+        this.flexbox_in_full_screen({ tabBar: true });
+    }
+
+    public test_flexbox_in_full_screen_tab_bar_action_bar() {
+        this.flexbox_in_full_screen({ actionBar: true, tabBar: true });
+    }
+
+    public test_flexbox_insets_top_action_bar() {
+        const snippet = `
+        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true }
+        );
+    }
+
+    public test_flexbox_insets_top_action_bar_hidden() {
+        const snippet = `
+        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { actionBarHidden: true }
+        );
+    }
+
+    public test_flexbox_insets_top_action_bar_flat() {
+        const snippet = `
+        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_flat_test(root);
+            },
+            { actionBarFlat: true }
+        );
+    }
+
+    public test_flexbox_insets_top_tab_bar_flat() {
+        const snippet = `
+        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { tabBar: true }
+        );
+    }
+
+    public test_flexbox_insets_top_tab_bar_action_bar_flat() {
+        const snippet = `
+        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true, tabBar: true }
+        );
+    }
+
+    private flex_column_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <FlexboxLayout id="flex" flexDirection="column" backgroundColor="Crimson">
+            <Label id="child0" backgroundColor="white" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat." />
+            <Label id="child1" flexGrow="1" backgroundColor="green" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat." />
+            <Label id="child2" backgroundColor="red" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat." />
+        </FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child2 }) => {
+                const insets = root.getSafeAreaInsets();
+
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
+
+                equal(right(child2), width(root) - insets.right, `${child2}.right - actual: ${right(child2)} expected: ${width(root) - insets.right}`);
+                equal(bottom(child2), height(root) - insets.bottom, `${child2}.bottom - actual: ${bottom(child2)} expected: ${height(root) - insets.bottom}`);
+                equal(right(child2), width(root) - insets.right, `${child2}.right - actual: ${right(child2)} expected: ${width(root) - insets.right}`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_flex_column_children_components_in_safe_area_action_bar() {
+        this.flex_column_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_flex_column_children_components_in_safe_area_action_bar_hidden() {
+        this.flex_column_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_flex_column_children_components_in_safe_area_tab_bar() {
+        this.flex_column_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private flex_row_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <FlexboxLayout id="flex" flexDirection="row" backgroundColor="Crimson">
+            <Label id="child0" backgroundColor="white" text="Lorem" />
+            <Label id="child1" flexGrow="1" backgroundColor="green" text="Lorem" />
+            <Label id="child2" backgroundColor="red" text="Lorem" />
+        </FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child2 }) => {
+                const insets = root.getSafeAreaInsets();
+
+                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+
+                equal(top(child2), insets.top, `${child2}.top - actual: ${top(child2)} expected: ${insets.top}`);
+                equal(right(child2), width(root) - insets.right, `${child2}.right - actual: ${right(child2)} expected: ${width(root) - insets.right}`);
+                equal(bottom(child2), height(root) - insets.bottom, `${child2}.bottom - actual: ${bottom(child2)} expected: ${height(root) - insets.bottom}`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_flex_row_children_components_in_safe_area_action_bar() {
+        this.flex_row_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_flex_row_children_components_in_safe_area_action_bar_hidden() {
+        this.flex_row_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_flex_row_children_components_in_safe_area_tab_bar() {
+        this.flex_row_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private flex_column_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <FlexboxLayout id="flex" flexDirection="column">
+            <StackLayout id="child0" backgroundColor="white">
+                <Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
+            </StackLayout>
+            <StackLayout id="child1" flexGrow="1" backgroundColor="green">
+                <Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
+            </StackLayout>
+            <StackLayout id="child2" backgroundColor="red">
+                <Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
+            </StackLayout>
+        </FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child1, child2 }) => {
+                isLeftAlignedWith(root, child0);
+                isTopAlignedWith(root, child0);
+                isRightAlignedWith(root, child0);
+
+                isLeftAlignedWith(root, child2);
+                isBottomAlignedWith(root, child2);
+                isRightAlignedWith(root, child2);
+
+                const sumOfChildrenHeights = height(child0) + height(child1) + height(child2);
+                equal(height(root), sumOfChildrenHeights, `flex height <${height(root)}> is NOT equal to sum of its children's heights <${sumOfChildrenHeights}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_flex_column_nested_layouts_beyond_safe_area_action_bar() {
+        this.flex_column_nested_layouts_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_flex_column_nested_layouts_beyond_safe_area_action_bar_hidden() {
+        this.flex_column_nested_layouts_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_flex_column_nested_layouts_beyond_safe_area_tab_bar() {
+        this.flex_column_nested_layouts_beyond_safe_area({ tabBar: true });
+    }
+
+    private flex_row_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <FlexboxLayout id="flex" flexDirection="row">
+            <StackLayout id="child0" backgroundColor="white">
+                <Label text="Lorem"></Label>
+            </StackLayout>
+            <StackLayout id="child1" flexGrow="1" backgroundColor="green">
+                <Label text="Lorem"></Label>
+            </StackLayout>
+            <StackLayout id="child2" backgroundColor="red">
+                <Label text="Lorem"></Label>
+            </StackLayout>
+        </FlexboxLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child1, child2 }) => {
+                isBottomAlignedWith(root, child0);
+                isLeftAlignedWith(root, child0);
+                isTopAlignedWith(root, child0);
+
+                isTopAlignedWith(root, child2);
+                isRightAlignedWith(root, child2);
+                isBottomAlignedWith(root, child2);
+
+                const sumOfChildrenWidths = width(child0) + width(child1) + width(child2);
+                equal(width(root), sumOfChildrenWidths, `flex width <${width(root)}> is NOT equal to sum of its children's width <${sumOfChildrenWidths}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_flex_row_nested_layouts_beyond_safe_area_action_bar() {
+        this.flex_row_nested_layouts_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_flex_row_nested_layouts_beyond_safe_area_action_bar_hidden() {
+        this.flex_row_nested_layouts_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_flex_row_nested_layouts_beyond_safe_area_tab_bar() {
+        this.flex_row_nested_layouts_beyond_safe_area({ tabBar: true });
+    }
+
+    // Grid
+    private getGridViews(template: string) {
+        let root = parse(template);
+        return {
+            root,
+            grid: root.getViewById("grid") as GridLayout,
+            cells: [
+                [root.getViewById("cell00") as view.View, root.getViewById("cell01") as view.View, root.getViewById("cell02") as view.View],
+                [root.getViewById("cell10") as view.View, root.getViewById("cell11") as view.View, root.getViewById("cell12") as view.View],
+                [root.getViewById("cell20") as view.View, root.getViewById("cell21") as view.View, root.getViewById("cell22") as view.View]
+            ]
+        };
+    };
+
+    private grid_layout_in_full_screen(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getGridViews(snippet),
+            this.noop,
+            ({ root }) => {
+                this.layout_in_full_screen_test(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_grid_layout_in_full_screen_action_bar() {
+        this.grid_layout_in_full_screen({ actionBar: true });
+    }
+
+    public test_grid_layout_in_full_screen_action_bar_hidden() {
+        this.grid_layout_in_full_screen({ actionBarHidden: true });
+    }
+
+    public test_grid_layout_in_full_screen_action_bar_flat() {
+        this.grid_layout_in_full_screen({ actionBarFlat: true });
+    }
+
+    public test_grid_layout_in_full_screen_tab_bar() {
+        this.grid_layout_in_full_screen({ tabBar: true });
+    }
+
+    public test_grid_layout_in_full_screen_tab_bar_action_bar() {
+        this.grid_layout_in_full_screen({ actionBar: true, tabBar: true });
+    }
+
+    public test_grid_insets_top_action_bar() {
+        const snippet = `
+        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true }
+        );
+    }
+
+    public test_grid_insets_top_action_bar_hidden() {
+        const snippet = `
+        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { actionBarHidden: true }
+        );
+    }
+
+    public test_grid_insets_top_action_bar_flat() {
+        const snippet = `
+        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_flat_test(root);
+            },
+            { actionBarFlat: true }
+        );
+    }
+
+    public test_grid_insets_top_tab_bar_flat() {
+        const snippet = `
+        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { tabBar: true }
+        );
+    }
+
+    public test_grid_insets_top_tab_bar_action_bar_flat() {
+        const snippet = `
+        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true, tabBar: true }
+        );
+    }
+
+    private grid_component_cells_layout_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
+            <Label row="0" col="0" id="cell00" text="overflowing text, overflowing text"></Label>
+            <Label row="0" col="1" id="cell01" text="overflowing text, overflowing text"></Label>
+            <Label row="0" col="2" id="cell02" text="overflowing text, overflowing text"></Label>
+            <Label row="1" col="0" id="cell10" text="overflowing text, overflowing text"></Label>
+            <Label row="1" col="1" id="cell11" text="overflowing text, overflowing text"></Label>
+            <Label row="1" col="2" id="cell12" text="overflowing text, overflowing text"></Label>
+            <Label row="2" col="0" id="cell20" text="overflowing text, overflowing text"></Label>
+            <Label row="2" col="1" id="cell21" text="overflowing text, overflowing text"></Label>
+            <Label row="2" col="2" id="cell22" text="overflowing text, overflowing text"></Label>
+        </GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getGridViews(snippet),
+            this.noop,
+            ({ root, grid, cells }) => {
+                const insets = root.getSafeAreaInsets();
+
+                equal(left(cells[0][0]), insets.left, `cell00 left actual:<${left(cells[0][0])}> expected:<${insets.left}>`);
+                equal(left(cells[1][0]), insets.left, `cell10 left actual:<${left(cells[1][0])}> expected:<${insets.left}>`);
+                equal(left(cells[2][0]), insets.left, `cell20 left actual:<${left(cells[2][0])}> expected:<${insets.left}>`);
+
+                isBelowWith(grid, cells[0][0], insets.top);
+                isBelowWith(grid, cells[0][1], insets.top);
+                isBelowWith(grid, cells[0][2], insets.top);
+
+                equal(right(cells[0][2]), width(grid) - insets.right, `cell02 left actual:<${left(cells[0][2])}> expected:<${width(grid) - insets.right}>`);
+                equal(right(cells[1][2]), width(grid) - insets.right, `cell12 left actual:<${left(cells[1][2])}> expected:<${width(grid) - insets.right}>`);
+                equal(right(cells[2][2]), width(grid) - insets.right, `cell22 left actual:<${left(cells[2][2])}> expected:<${width(grid) - insets.right}>`);
+
+                isAboveWith(cells[2][0], grid, insets.bottom);
+                isAboveWith(cells[2][1], grid, insets.bottom);
+                isAboveWith(cells[2][2], grid, insets.bottom);
+
+                closeEnough(height(cells[0][1]), height(cells[1][1]), `cell height should be equal - cell01<${height(cells[0][1])}> - cell11<${height(cells[1][1])}>`);
+                equal(height(cells[1][1]), height(cells[2][1]), `cell height should be equal - cell11<${height(cells[1][1])}> - cell21<${height(cells[2][1])}>`);
+                const sumOfLabelHeightAndInsets = insets.top + height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]) + insets.bottom;
+                closeEnough(height(grid), sumOfLabelHeightAndInsets, `grid height<${height(grid)}> sum of labels height and insets<${sumOfLabelHeightAndInsets}>`);
+
+                equal(width(cells[1][0]), width(cells[1][1]), `cell width should be equal - cell10<${width(cells[1][0])}> - cell11<${width(cells[1][1])}>`);
+                equal(width(cells[1][1]), width(cells[1][2]), `cell width should be equal - cell11<${width(cells[1][1])}> - cell12<${width(cells[1][2])}>`);
+                const sumOfLabelWidthsAndInsets = insets.left + width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2]) + insets.right;
+                equal(width(grid), sumOfLabelWidthsAndInsets, `grid width<${width(grid)}> sum of nested grids width and insets<${sumOfLabelWidthsAndInsets}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_grid_component_cells_layout_in_safe_area_action_bar() {
+        this.grid_component_cells_layout_in_safe_area({ actionBar: true });
+    }
+
+    public test_grid_component_cells_layout_in_safe_area_action_bar_hidden() {
+        this.grid_component_cells_layout_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_grid_component_cells_layout_in_safe_area_tab_bar() {
+        this.grid_component_cells_layout_in_safe_area({ tabBar: true });
+    }
+
+    private grid_nested_grid_cells_layout_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
+            <GridLayout row="0" col="0" id="cell00" backgroundColor="SkyBlue"></GridLayout>
+            <GridLayout row="0" col="1" id="cell01" backgroundColor="Indigo"></GridLayout>
+            <GridLayout row="0" col="2" id="cell02" backgroundColor="Crimson"></GridLayout>
+            <GridLayout row="1" col="0" id="cell10" backgroundColor="Chocolate"></GridLayout>
+            <GridLayout row="1" col="1" id="cell11" backgroundColor="Cornsilk"></GridLayout>
+            <GridLayout row="1" col="2" id="cell12" backgroundColor="BurlyWood"></GridLayout>
+            <GridLayout row="2" col="0" id="cell20" backgroundColor="GoldenRod"></GridLayout>
+            <GridLayout row="2" col="1" id="cell21" backgroundColor="Khaki"></GridLayout>
+            <GridLayout row="2" col="2" id="cell22" backgroundColor="IndianRed"></GridLayout>
+        </GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getGridViews(snippet),
+            this.noop,
+            ({ root, grid, cells }) => {
+                isLeftAlignedWith(grid, cells[0][0]);
+                isLeftAlignedWith(grid, cells[1][0]);
+                isLeftAlignedWith(grid, cells[2][0]);
+
+                isTopAlignedWith(grid, cells[0][0]);
+                isTopAlignedWith(grid, cells[0][1]);
+                isTopAlignedWith(grid, cells[0][2]);
+
+                isRightAlignedWith(grid, cells[0][2]);
+                isRightAlignedWith(grid, cells[1][2]);
+                isRightAlignedWith(grid, cells[2][2]);
+
+                isBottomAlignedWith(grid, cells[2][0]);
+                isBottomAlignedWith(grid, cells[2][1]);
+                isBottomAlignedWith(grid, cells[2][2]);
+
+                check(height(cells[0][1]) >= height(cells[1][1]), `cell01 height<${height(cells[0][1])}> not greater or equal cell11 height<${height(cells[1][1])}>`);
+                check(height(cells[1][1]) <= height(cells[2][1]), `cell11 height<${height(cells[1][1])}> not less or equal cell21 height<${height(cells[2][1])}>`);
+                const sumOfNestedGridHeights = height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]);
+                equal(height(grid), sumOfNestedGridHeights, `grid height<${height(grid)}> sum of nested grids height <${sumOfNestedGridHeights}>`);
+
+                check(width(cells[1][0]) >= width(cells[1][1]), `cell10 width<${width(cells[1][0])}> not greater or equal cell11 width<${width(cells[1][1])}>`);
+                check(width(cells[1][1]) <= width(cells[1][2]), `cell11 width<${width(cells[1][1])}> not less or equal cell12 width<${width(cells[1][2])}>`);
+                const sumOfNestedGridWidths = width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2])
+                equal(width(grid), sumOfNestedGridWidths, `grid width<${width(grid)}> sum of nested grids width <${sumOfNestedGridWidths}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar() {
+        this.grid_nested_grid_cells_layout_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_hidden() {
+        this.grid_nested_grid_cells_layout_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_grid_nested_grid_cells_layout_beyond_safe_area_tab_bar() {
+        this.grid_nested_grid_cells_layout_beyond_safe_area({ tabBar: true });
+    }
+
+    // Stack
+    private stack_in_full_screen(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => {
+                this.layout_in_full_screen_test(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_stack_in_full_screen_action_bar() {
+        this.stack_in_full_screen({ actionBar: true });
+    }
+
+    public test_stack_in_full_screen_action_bar_hidden() {
+        this.stack_in_full_screen({ actionBarHidden: true });
+    }
+
+    public test_stack_in_full_screen_action_bar_flat() {
+        this.stack_in_full_screen({ actionBarFlat: true });
+    }
+
+    public test_stack_in_full_screen_tab_bar() {
+        this.stack_in_full_screen({ tabBar: true });
+    }
+
+    public test_stack_in_full_screen_tab_bar_action_bar() {
+        this.stack_in_full_screen({ actionBar: true, tabBar: true });
+    }
+
+    public test_stack_insets_top_action_bar() {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true }
+        );
+    }
+
+    public test_stack_insets_top_action_bar_hidden() {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { actionBarHidden: true }
+        );
+    }
+
+    public test_stack_insets_top_action_bar_flat() {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_flat_test(root);
+            },
+            { actionBarFlat: true }
+        );
+    }
+
+    public test_stack_insets_top_tab_bar_flat() {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { tabBar: true }
+        );
+    }
+
+    public test_stack_insets_top_tab_bar_action_bar_flat() {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true, tabBar: true }
+        );
+    }
+
+    private stack_horizontal_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <StackLayout id="stack" orientation="horizontal" backgroundColor="Crimson">
+            <Label id="child0" text="123"></Label>
+            <Label id="child1" text="456"></Label>
+        </StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child1 }) => {
+                const insets = root.getSafeAreaInsets();
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
+                isLeftWith(child0, child1, width(child0));
+            },
+            pageOptions
+        );
+    }
+
+    public test_stack_horizontal_children_components_in_safe_area_action_bar() {
+        this.stack_horizontal_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_stack_horizontal_children_components_in_safe_area_action_bar_hidden() {
+        this.stack_horizontal_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_stack_horizontal_children_components_in_safe_area_tab_bar() {
+        this.stack_horizontal_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private stack_vertical_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <StackLayout id="stack" orientation="vertical" backgroundColor="Crimson">
+            <Label id="child0" text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label id="child1" text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child1 }) => {
+                const insets = root.getSafeAreaInsets();
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
+                isBelowWith(child0, child1, height(child0));
+            },
+            pageOptions
+        );
+    }
+
+    public test_stack_vertical_children_components_in_safe_area_action_bar() {
+        this.stack_vertical_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_stack_vertical_children_components_in_safe_area_action_bar_hidden() {
+        this.stack_vertical_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_stack_vertical_children_components_in_safe_area_tab_bar() {
+        this.stack_vertical_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private stack_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <StackLayout id="stack" backgroundColor="Crimson">
+            <StackLayout id="child0" backgroundColor="GoldenRod">
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            </StackLayout>
+        </StackLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0 }) => {
+                isLeftAlignedWith(root, child0);
+                isTopAlignedWith(root, child0);
+                isRightAlignedWith(root, child0);
+            },
+            pageOptions
+        );
+    }
+
+    public test_stack_nested_layouts_beyond_safe_area_action_bar() {
+        this.stack_nested_layouts_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_stack_nested_layouts_beyond_safe_area_action_bar_hidden() {
+        this.stack_nested_layouts_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_stack_nested_layouts_beyond_safe_area_tab_bar() {
+        this.stack_nested_layouts_beyond_safe_area({ tabBar: true });
+    }
+
+    // Wrap
+    private wrap_in_full_screen(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => {
+                this.layout_in_full_screen_test(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_wrap_in_full_screen_action_bar() {
+        this.wrap_in_full_screen({ actionBar: true });
+    }
+
+    public test_wrap_in_full_screen_action_bar_hidden() {
+        this.wrap_in_full_screen({ actionBarHidden: true });
+    }
+
+    public test_wrap_in_full_screen_action_bar_flat() {
+        this.wrap_in_full_screen({ actionBarFlat: true });
+    }
+
+    public test_wrap_in_full_screen_tab_bar() {
+        this.wrap_in_full_screen({ tabBar: true });
+    }
+
+    public test_wrap_in_full_screen_tab_bar_action_bar() {
+        this.wrap_in_full_screen({ actionBar: true, tabBar: true });
+    }
+
+    public test_wrap_insets_top_action_bar() {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true }
+        );
+    }
+
+    public test_wrap_insets_top_action_bar_hidden() {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { actionBarHidden: true }
+        );
+    }
+
+    public test_wrap_insets_top_action_bar_flat() {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_flat_test(root);
+            },
+            { actionBarFlat: true }
+        );
+    }
+
+    public test_wrap_insets_top_tab_bar_flat() {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_hidden_test(root);
+            },
+            { tabBar: true }
+        );
+    }
+
+    public test_wrap_insets_top_tab_bar_action_bar_flat() {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => { 
+                this.layout_insets_top_action_bar_test(root);
+            },
+            { actionBar: true, tabBar: true }
+        );
+    }
+
+    private wrap_horizontal_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <WrapLayout id="wrap" orientation="horizontal">
+            <Button id="child0" text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" height="100%"></Button>
+            <Button id="child1" text="H" backgroundColor="Pink"></Button>
+        </WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child1 }) => {
+                const insets = root.getSafeAreaInsets();
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
+                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
+                equal(height(child1), 0, `${child1} has been laid out, but should not`);
+                equal(width(child1), 0, `${child1} has been laid out, but should not`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_wrap_horizontal_children_components_in_safe_area_action_bar() {
+        this.wrap_horizontal_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_wrap_horizontal_children_components_in_safe_area_action_bar_hidden() {
+        this.wrap_horizontal_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_wrap_horizontal_children_components_in_safe_area_tab_bar() {
+        this.wrap_horizontal_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private wrap_vertical_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <WrapLayout id="wrap" orientation="vertical">
+            <Button id="child0" text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" height="100%"></Button>
+            <Button id="child1" text="V" backgroundColor="Pink"></Button>
+        </WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0, child1 }) => {
+                const insets = root.getSafeAreaInsets();
+                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
+                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
+                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
+                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
+                equal(height(child1), 0, `${child1} has been laid out, but should not`);
+                equal(width(child1), 0, `${child1} has been laid out, but should not`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_wrap_vertical_children_components_in_safe_area_action_bar() {
+        this.wrap_vertical_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_wrap_vertical_children_components_in_safe_area_action_bar_hidden() {
+        this.wrap_vertical_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_wrap_vertical_children_components_in_safe_area_tab_bar() {
+        this.wrap_vertical_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private wrap_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <WrapLayout id="wrap" backgroundColor="Crimson">
+            <WrapLayout id="child0" backgroundColor="SkyBlue">
+                <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"/>
+            </WrapLayout>
+        </WrapLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, child0 }) => {
+                isLeftAlignedWith(root, child0);
+                isTopAlignedWith(root, child0);
+                isRightAlignedWith(root, child0);
+            },
+            pageOptions
+        );
+    }
+
+    public test_wrap_nested_layouts_beyond_safe_area_action_bar() {
+        this.wrap_nested_layouts_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_wrap_nested_layouts_beyond_safe_area_action_bar_hidden() {
+        this.wrap_nested_layouts_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_wrap_nested_layouts_beyond_safe_area_tab_bar() {
+        this.wrap_nested_layouts_beyond_safe_area({ tabBar: true });
+    }
+}
+
+export function createTestCase(): SafeAreaTests {
+    return new SafeAreaTests();
+}
diff --git a/tests/app/ui/list-view/list-view-safe-area-tests.ts b/tests/app/ui/list-view/list-view-safe-area-tests.ts
new file mode 100644
index 000000000..a6ca7dc8b
--- /dev/null
+++ b/tests/app/ui/list-view/list-view-safe-area-tests.ts
@@ -0,0 +1,225 @@
+import * as helper from "../helper";
+import * as TKUnit from "../../TKUnit";
+import { parse } from "tns-core-modules/ui/builder";
+import * as view from "tns-core-modules/ui/core/view";
+import * as platform from "tns-core-modules/platform";
+import { ListView } from "tns-core-modules/ui/list-view";
+import { ios as iosUtils } from "tns-core-modules/utils/utils";
+import { ViewModel } from "./list-view-view-model";
+import { UITest } from "../../ui-test";
+import {
+    dipToDp, left, top, right, bottom, height, width,
+    equal, check,
+    isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith
+} from "../layouts/layout-tests-helper";
+
+export class ListViewSafeAreaTest extends UITest<ListView> {
+
+    private executeSnippet<U extends { root: view.View }>(ui: U, setup: (ui: U) => void, test: (ui: U) => void, pageOptions?: helper.PageOptions): void {
+        function waitUntilTestElementLayoutIsValid(view: view.View, timeoutSec?: number): void {
+            TKUnit.waitUntilReady(() => {
+                return view.isLayoutValid;
+            }, timeoutSec || 1);
+        }
+
+        setup(ui);
+        helper.buildUIAndRunTest(ui.root, () => {
+            waitUntilTestElementLayoutIsValid(ui.root);
+            test(ui);
+        }, pageOptions);
+    };
+
+    private noop() {
+        // no operation
+    };
+
+    private getViews(template: string) {
+        let root = parse(template);
+        return {
+            root,
+            list: root.getViewById("list") as ListView,
+            cells: [
+                [root.getViewById("cell00") as ListView, root.getViewById("cell01") as ListView, root.getViewById("cell02") as ListView],
+                [root.getViewById("cell10") as ListView, root.getViewById("cell11") as ListView, root.getViewById("cell12") as ListView],
+                [root.getViewById("cell20") as ListView, root.getViewById("cell21") as ListView, root.getViewById("cell22") as ListView]
+            ]
+        };
+    };
+
+    private list_view_in_full_screen(listView: ListView, pageOptions?: helper.PageOptions) {
+        let expectedTop = 0;
+        if (pageOptions && pageOptions.actionBarFlat) {
+            const actionBarHeight = round(dipToDp(listView.page.actionBar.nativeViewProtected.frame.size.height));
+            const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
+            const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
+            expectedTop = actionBarHeight + statusBarHeight;
+        }
+
+        const l = left(listView);
+        const t = top(listView);
+        const r = right(listView);
+        const b = bottom(listView);
+        equal(l, 0, `${listView}.left - actual:${l}; expected: ${0}`);
+        equal(t, expectedTop, `${listView}.top - actual:${t}; expected: ${expectedTop}`);
+        equal(r, platform.screen.mainScreen.widthPixels, `${listView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
+        equal(b, platform.screen.mainScreen.heightPixels, `${listView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+    }
+
+    private list_view_in_full_screen_test(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <ListView id="list" loaded="onLoaded" backgroundColor="Crimson"></ListView>
+        `;
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ list }) => {
+                this.list_view_in_full_screen(list, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_list_view_in_full_screen_action_bar() {
+        this.list_view_in_full_screen_test({ actionBar: true });
+    }
+
+    public test_list_view_in_full_screen_action_bar_hidden() {
+        this.list_view_in_full_screen_test({ actionBarHidden: true });
+    }
+
+    public test_list_view_in_full_screen_action_bar_flat() {
+        this.list_view_in_full_screen_test({ actionBarFlat: true });
+    }
+
+    public test_list_view_in_full_screen_tab_bar() {
+        this.list_view_in_full_screen_test({ tabBar: true });
+    }
+
+    private grid_nested_list_views_layout_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
+            <ListView id="cell00" row="0" col="0" items="{{ items }}" loaded="onLoaded"  backgroundColor="SkyBlue">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell01" row="0" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Indigo">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell02" row="0" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="Crimson">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell10" row="1" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="Chocolate">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell11" row="1" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Cornsilk">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell12" row="1" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="BurlyWood">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell20" row="2" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="GoldenRod">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell21" row="2" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Khaki">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+
+            <ListView id="cell22" row="2" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="IndianRed">
+                <ListView.itemTemplate>
+                    <Label text="{{ text }}"></Label>
+                </ListView.itemTemplate>
+            </ListView>
+        </GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            ({ cells }) => {
+                cells[0][0].on("loaded", setBindingContext(cells[0][0]));
+                cells[0][1].on("loaded", setBindingContext(cells[0][1]));
+                cells[0][2].on("loaded", setBindingContext(cells[0][2]));
+
+                cells[1][0].on("loaded", setBindingContext(cells[1][0]));
+                cells[1][1].on("loaded", setBindingContext(cells[1][1]));
+                cells[1][2].on("loaded", setBindingContext(cells[1][2]));
+
+                cells[2][0].on("loaded", setBindingContext(cells[2][0]));
+                cells[2][1].on("loaded", setBindingContext(cells[2][1]));
+                cells[2][2].on("loaded", setBindingContext(cells[2][2]));
+            },
+            ({ root, cells }) => {
+                isLeftAlignedWith(root, cells[0][0]);
+                isLeftAlignedWith(root, cells[1][0]);
+                isLeftAlignedWith(root, cells[2][0]);
+
+                isTopAlignedWith(root, cells[0][0]);
+                isTopAlignedWith(root, cells[0][1]);
+                isTopAlignedWith(root, cells[0][2]);
+
+                isRightAlignedWith(root, cells[0][2]);
+                isRightAlignedWith(root, cells[1][2]);
+                isRightAlignedWith(root, cells[2][2]);
+
+                check(height(cells[0][1]) >= height(cells[1][1]), `cell01 height<${height(cells[0][1])}> not greater or equal cell11 height<${height(cells[1][1])}>`);
+                check(height(cells[1][1]) <= height(cells[2][1]), `cell11 height<${height(cells[1][1])}> not less or equal cell21 height<${height(cells[2][1])}>`);
+                const sumOfNestedListViewHeights = height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]);
+                equal(height(root), sumOfNestedListViewHeights, `grid height<${height(root)}> sum of nested list views height <${sumOfNestedListViewHeights}>`);
+
+                check(width(cells[1][0]) >= width(cells[1][1]), `cell10 width<${width(cells[1][0])}> not greater or equal cell11 width<${width(cells[1][1])}>`);
+                check(width(cells[1][1]) <= width(cells[1][2]), `cell11 width<${width(cells[1][1])}> not less or equal cell12 width<${width(cells[1][2])}>`);
+                const sumOfNestedListViewWidths = width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2])
+                equal(width(root), sumOfNestedListViewWidths, `grid width<${width(root)}> sum of nested list views width <${sumOfNestedListViewWidths}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_grid_nested_list_views_layout_beyond_safe_area_action_bar() {
+        this.grid_nested_list_views_layout_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_grid_nested_list_views_layout_in_safe_area_action_bar_hidden() {
+        this.grid_nested_list_views_layout_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_grid_nested_list_views_layout_in_safe_area_action_bar_flat() {
+        this.grid_nested_list_views_layout_beyond_safe_area({ actionBarFlat: true });
+    }
+
+    public test_grid_nested_list_views_layout_in_safe_area_tab_bar() {
+        this.grid_nested_list_views_layout_beyond_safe_area({ tabBar: true });
+    }
+}
+
+function setBindingContext(list: ListView) {
+    return function () {
+        const page = list.page;
+        page.bindingContext = new ViewModel();
+    }
+}
+
+export function createTestCase(): ListViewSafeAreaTest {
+    return new ListViewSafeAreaTest();
+}
diff --git a/tests/app/ui/list-view/list-view-view-model.ts b/tests/app/ui/list-view/list-view-view-model.ts
new file mode 100644
index 000000000..5326ed31b
--- /dev/null
+++ b/tests/app/ui/list-view/list-view-view-model.ts
@@ -0,0 +1,19 @@
+import { Observable } from "tns-core-modules/data/observable";
+
+export class ViewModel extends Observable {
+    items: Array<any>;
+
+    constructor() {
+        super();
+
+        this.items = [];
+
+        for (let i = 0; i < 50; i++) {
+            this.items.push({
+                id: "child" + i.toString(),
+                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."
+            });
+        }
+    }
+}
\ No newline at end of file
diff --git a/tests/app/ui/page/page-tests-common.ts b/tests/app/ui/page/page-tests-common.ts
index 59aab24ce..0398b5fb2 100644
--- a/tests/app/ui/page/page-tests-common.ts
+++ b/tests/app/ui/page/page-tests-common.ts
@@ -16,14 +16,13 @@ exports.pageLoaded = pageLoaded;
 // << article-set-bindingcontext
 import * as TKUnit from "../../TKUnit";
 import * as helper from "../helper";
-import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
 import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
-import { View, PercentLength, Observable, unsetValue, EventData, isIOS } from "tns-core-modules/ui/core/view";
+import { View, PercentLength, unsetValue, EventData, isIOS } from "tns-core-modules/ui/core/view";
 import { Frame, stack } from "tns-core-modules/ui/frame";
 import { Label } from "tns-core-modules/ui/label";
 import { Color } from "tns-core-modules/color";
 import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view/tab-view";
-import { _resetRootView, getRootView } from "tns-core-modules/application";
+import { _resetRootView } from "tns-core-modules/application";
 import { Button } from "tns-core-modules/ui/button/button";
 
 export function addLabelToPage(page: Page, text?: string) {
@@ -1066,8 +1065,7 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalTabView()
 
     const modalCloseCallback = function (returnValue: any) {
         TKUnit.assertEqual(stack().length, 1, "Single host frame should be instantiated at this point!");
-
-        ready = true;
+        setTimeout(() => ready = true, 50);
     }
 
     const modalTabViewShowingModallyEventHandler = function(args: ShownModallyData) {
@@ -1146,41 +1144,3 @@ export function test_percent_width_and_height_support() {
     TKUnit.assertTrue(PercentLength.equals(testPage.width, "auto"));
     TKUnit.assertTrue(PercentLength.equals(testPage.height, "auto"));
 }
-
-export function test_percent_margin_support() {
-    const testPage = new Page();
-    const gridLayout = new GridLayout();
-    const stackLayout = new StackLayout();
-    stackLayout.margin = "10%";
-    gridLayout.addChild(stackLayout);
-    testPage.content = gridLayout;
-
-    helper.navigate(() => testPage);
-
-    const parentBounds = gridLayout._getCurrentLayoutBounds();
-    const parentWidth = parentBounds.right - parentBounds.left;
-    const parentHeight = parentBounds.bottom - parentBounds.top;
-
-    const marginLeft = isIOS ? Math.round(parentWidth * 0.1) : Math.floor(parentWidth * 0.1);
-    const marginTop = isIOS ? Math.round(parentHeight * 0.1) : Math.floor(parentHeight * 0.1);
-
-    let bounds = stackLayout._getCurrentLayoutBounds();
-    TKUnit.assertEqual(Math.round(bounds.left), marginLeft, "Stack LEFT position incorrect");
-    TKUnit.assertEqual(Math.round(bounds.top), marginTop, "Stack TOP position incorrect");
-    TKUnit.assertEqual(Math.round(bounds.bottom - bounds.top), parentHeight - (2 * marginTop), "Stack HEIGHT incorrect");
-    TKUnit.assertEqual(Math.round(bounds.right - bounds.left), parentWidth - (2 * marginLeft), "Stack WIDTH incorrect");
-    TKUnit.assertEqual(Math.round(bounds.right), parentWidth - marginLeft, "Stack RIGHT position incorrect");
-    TKUnit.assertEqual(Math.round(bounds.bottom), parentHeight - marginTop, "Stack BOTTOM position incorrect");
-
-    //reset values.
-    stackLayout.margin = "0";
-    TKUnit.waitUntilReady(() => stackLayout.isLayoutValid);
-
-    bounds = stackLayout._getCurrentLayoutBounds();
-    TKUnit.assertEqual(bounds.left, 0, "Stack LEFT position incorrect");
-    TKUnit.assertEqual(bounds.top, 0, "Stack TOP position incorrect");
-    TKUnit.assertEqual(bounds.bottom - bounds.top, parentHeight, "Stack HEIGHT incorrect");
-    TKUnit.assertEqual(bounds.right - bounds.left, parentWidth, "Stack WIDTH incorrect");
-    TKUnit.assertEqual(bounds.right, parentWidth, "Stack RIGHT position incorrect");
-    TKUnit.assertEqual(bounds.bottom, parentHeight, "Stack BOTTOM position incorrect");
-}
diff --git a/tests/app/ui/page/page-tests.ios.ts b/tests/app/ui/page/page-tests.ios.ts
index f6987ca98..88b6c498e 100644
--- a/tests/app/ui/page/page-tests.ios.ts
+++ b/tests/app/ui/page/page-tests.ios.ts
@@ -78,281 +78,281 @@ function getNativeHeight(view: View): number {
     return layout.toDevicePixels(bounds.size.height);
 }
 
-export function test_correct_layout_top_bottom_edges_does_not_span_not_scrollable_not_flat() {
-    test_correct_layout_top_bottom_edges_does_not_span_options(false, false);
-}
+// export function test_correct_layout_top_bottom_edges_does_not_span_not_scrollable_not_flat() {
+//     test_correct_layout_top_bottom_edges_does_not_span_options(false, false);
+// }
 
-export function test_correct_layout_top_bottom_edges_does_not_span_scrollable_not_flat() {
-    test_correct_layout_top_bottom_edges_does_not_span_options(true, false);
-}
+// export function test_correct_layout_top_bottom_edges_does_not_span_scrollable_not_flat() {
+//     test_correct_layout_top_bottom_edges_does_not_span_options(true, false);
+// }
 
-export function test_correct_layout_top_bottom_edges_does_not_span_not_scrollable_flat() {
-    test_correct_layout_top_bottom_edges_does_not_span_options(false, true);
-}
+// export function test_correct_layout_top_bottom_edges_does_not_span_not_scrollable_flat() {
+//     test_correct_layout_top_bottom_edges_does_not_span_options(false, true);
+// }
 
-export function test_correct_layout_top_bottom_edges_does_not_span_scrollable_flat() {
-    test_correct_layout_top_bottom_edges_does_not_span_options(true, true);
-}
+// export function test_correct_layout_top_bottom_edges_does_not_span_scrollable_flat() {
+//     test_correct_layout_top_bottom_edges_does_not_span_options(true, true);
+// }
 
-export function test_correct_layout_scrollable_content_false() {
-    const page = new Page();
-    topmost().viewController.navigationBar.translucent = true;
-    (<any>page).scrollableContent = false;
-    page.actionBar.title = "ActionBar";
-    page.actionBarHidden = true;
+// export function test_correct_layout_scrollable_content_false() {
+//     const page = new Page();
+//     topmost().viewController.navigationBar.translucent = true;
+//     (<any>page).scrollableContent = false;
+//     page.actionBar.title = "ActionBar";
+//     page.actionBarHidden = true;
 
-    const tabView = new TabView();
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    (<any>lbl).scrollableContent = false;
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
+//     const tabView = new TabView();
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     (<any>lbl).scrollableContent = false;
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
 
-    page.content = tabView;
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     page.content = tabView;
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
 
-    const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
 
-    let pageHeight = getHeight(page);
-    let expectedPageHeight = screenHeight;
-    TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
+//     let pageHeight = getHeight(page);
+//     let expectedPageHeight = screenHeight;
+//     TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
 
-    let contentHeight = getHeight(lbl);
-    let contentNativeHeight = getNativeHeight(lbl);
-    let expectedLabelHeight = screenHeight - statusBarHeight - tabBarHeight;
-    TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar - tabBar");
-    TKUnit.assertEqual(contentNativeHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar - tabBar");
+//     let contentHeight = getHeight(lbl);
+//     let contentNativeHeight = getNativeHeight(lbl);
+//     let expectedLabelHeight = screenHeight - statusBarHeight - tabBarHeight;
+//     TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar - tabBar");
+//     TKUnit.assertEqual(contentNativeHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar - tabBar");
 
-    page.actionBarHidden = false;
-    TKUnit.waitUntilReady(() => page.isLayoutValid);
+//     page.actionBarHidden = false;
+//     TKUnit.waitUntilReady(() => page.isLayoutValid);
 
-    pageHeight = getHeight(page);
-    const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
-    expectedPageHeight = screenHeight;
-    TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
+//     pageHeight = getHeight(page);
+//     const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
+//     expectedPageHeight = screenHeight;
+//     TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
 
-    contentHeight = getHeight(lbl);
-    contentNativeHeight = getNativeHeight(lbl);
-    expectedLabelHeight = screenHeight - statusBarHeight - tabBarHeight - navBarHeight;
-    TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBarHeight - tabBarHeight - navBarHeight");
-    TKUnit.assertEqual(contentNativeHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBarHeight - tabBarHeight - navBarHeight");
-}
+//     contentHeight = getHeight(lbl);
+//     contentNativeHeight = getNativeHeight(lbl);
+//     expectedLabelHeight = screenHeight - statusBarHeight - tabBarHeight - navBarHeight;
+//     TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBarHeight - tabBarHeight - navBarHeight");
+//     TKUnit.assertEqual(contentNativeHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBarHeight - tabBarHeight - navBarHeight");
+// }
 
-export function test_correct_layout_scrollable_content_true() {
-    const page = new Page();
-    topmost().viewController.navigationBar.translucent = true;
-    (<any>page).scrollableContent = true;
-    page.actionBar.title = "ActionBar";
-    page.actionBarHidden = true;
+// export function test_correct_layout_scrollable_content_true() {
+//     const page = new Page();
+//     topmost().viewController.navigationBar.translucent = true;
+//     (<any>page).scrollableContent = true;
+//     page.actionBar.title = "ActionBar";
+//     page.actionBarHidden = true;
 
-    const tabView = new TabView();
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    (<any>lbl).scrollableContent = true;
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
+//     const tabView = new TabView();
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     (<any>lbl).scrollableContent = true;
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
 
-    page.content = tabView;
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     page.content = tabView;
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
 
-    const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
 
-    let pageHeight = getHeight(page);
-    let expectedPageHeight = screenHeight;
-    TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
+//     let pageHeight = getHeight(page);
+//     let expectedPageHeight = screenHeight;
+//     TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
 
-    let contentHeight = getHeight(lbl);
-    let expectedLabelHeight = screenHeight - statusBarHeight;
-    TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar");
+//     let contentHeight = getHeight(lbl);
+//     let expectedLabelHeight = screenHeight - statusBarHeight;
+//     TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar");
 
-    page.actionBarHidden = false;
-    TKUnit.waitUntilReady(() => page.isLayoutValid);
+//     page.actionBarHidden = false;
+//     TKUnit.waitUntilReady(() => page.isLayoutValid);
 
-    pageHeight = getHeight(page);
-    const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
-    expectedPageHeight = screenHeight;
-    TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
+//     pageHeight = getHeight(page);
+//     const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
+//     expectedPageHeight = screenHeight;
+//     TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight");
 
-    contentHeight = getHeight(lbl);
-    TKUnit.assertEqual(contentHeight, screenHeight, "lbl.height !== screenHeight");
-}
+//     contentHeight = getHeight(lbl);
+//     TKUnit.assertEqual(contentHeight, screenHeight, "lbl.height !== screenHeight");
+// }
 
-export function test_correct_layout_scrollable_content_true_flat_action_bar() {
-    const page = new Page();
-    (<any>page).scrollableContent = true;
-    page.actionBar.title = "ActionBar";
-    page.actionBar.flat = true;
+// export function test_correct_layout_scrollable_content_true_flat_action_bar() {
+//     const page = new Page();
+//     (<any>page).scrollableContent = true;
+//     page.actionBar.title = "ActionBar";
+//     page.actionBar.flat = true;
 
-    const tabView = new TabView();
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
+//     const tabView = new TabView();
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
 
-    page.content = tabView;
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     page.content = tabView;
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
 
-    const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
-    const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
+//     const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
 
-    const pageHeight = getHeight(page);
-    const expectedPageHeight = screenHeight - statusBarHeight - navBarHeight;
-    TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight - statusBar - navBarHeight");
+//     const pageHeight = getHeight(page);
+//     const expectedPageHeight = screenHeight - statusBarHeight - navBarHeight;
+//     TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight - statusBar - navBarHeight");
 
-    const contentHeight = getHeight(lbl);
-    const expectedLabelHeight = screenHeight - statusBarHeight - navBarHeight - tabBarHeight;
-    TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar - navBarHeight - tabBarHeight");
-    page.actionBar.flat = false;
-}
+//     const contentHeight = getHeight(lbl);
+//     const expectedLabelHeight = screenHeight - statusBarHeight - navBarHeight - tabBarHeight;
+//     TKUnit.assertEqual(contentHeight, expectedLabelHeight, "lbl.height !== screenHeight - statusBar - navBarHeight - tabBarHeight");
+//     page.actionBar.flat = false;
+// }
 
-export function test_correct_layout_scrollable_content_true_flat_action_bar_edges_span_under_opaque_bars() {
-    const page = new Page();
-    (<any>page).scrollableContent = true;
-    page.viewController.extendedLayoutIncludesOpaqueBars = true;
-    page.actionBar.title = "ActionBar";
-    page.actionBar.flat = true;
+// export function test_correct_layout_scrollable_content_true_flat_action_bar_edges_span_under_opaque_bars() {
+//     const page = new Page();
+//     (<any>page).scrollableContent = true;
+//     page.viewController.extendedLayoutIncludesOpaqueBars = true;
+//     page.actionBar.title = "ActionBar";
+//     page.actionBar.flat = true;
 
-    const tabView = new TabView();
-    tabView.viewController.tabBar.translucent = false;
+//     const tabView = new TabView();
+//     tabView.viewController.tabBar.translucent = false;
 
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    (<any>lbl).scrollableContent = true;
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     (<any>lbl).scrollableContent = true;
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
 
-    page.content = tabView;
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     page.content = tabView;
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
 
-    lbl.viewController.extendedLayoutIncludesOpaqueBars = true;
-    lbl.requestLayout();
-    (<UIView>lbl.nativeViewProtected).setNeedsLayout();
-    (<UIView>lbl.nativeViewProtected).layoutIfNeeded();
-    helper.waitUntilLayoutReady(lbl);
+//     lbl.viewController.extendedLayoutIncludesOpaqueBars = true;
+//     lbl.requestLayout();
+//     (<UIView>lbl.nativeViewProtected).setNeedsLayout();
+//     (<UIView>lbl.nativeViewProtected).layoutIfNeeded();
+//     helper.waitUntilLayoutReady(lbl);
 
-    const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
-    const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
+//     const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
 
-    const pageHeight = getHeight(page);
-    TKUnit.assertEqual(pageHeight, screenHeight, "page.height !== screenHeight");
+//     const pageHeight = getHeight(page);
+//     TKUnit.assertEqual(pageHeight, screenHeight, "page.height !== screenHeight");
 
-    const contentHeight = getHeight(lbl);
-    TKUnit.assertEqual(contentHeight, screenHeight, "lbl.height !== screenHeight");
-    page.actionBar.flat = false;
-}
+//     const contentHeight = getHeight(lbl);
+//     TKUnit.assertEqual(contentHeight, screenHeight, "lbl.height !== screenHeight");
+//     page.actionBar.flat = false;
+// }
 
-export function test_correct_layout_scrollable_content_true_top_edge_does_not_span() {
-    const page = new Page();
-    (<any>page).scrollableContent = true;
-    page.actionBar.title = "ActionBar";
-    (<UIViewController>page.viewController).edgesForExtendedLayout = UIRectEdge.Bottom | UIRectEdge.Left | UIRectEdge.Right;
+// export function test_correct_layout_scrollable_content_true_top_edge_does_not_span() {
+//     const page = new Page();
+//     (<any>page).scrollableContent = true;
+//     page.actionBar.title = "ActionBar";
+//     (<UIViewController>page.viewController).edgesForExtendedLayout = UIRectEdge.Bottom | UIRectEdge.Left | UIRectEdge.Right;
 
-    const tabView = new TabView();
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    lbl.viewController = iosView.UILayoutViewController.initWithOwner(new WeakRef(lbl));
-    lbl.viewController.edgesForExtendedLayout = UIRectEdge.Bottom | UIRectEdge.Left | UIRectEdge.Right;
-    (<any>lbl).scrollableContent = true;
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
+//     const tabView = new TabView();
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     lbl.viewController = iosView.UILayoutViewController.initWithOwner(new WeakRef(lbl));
+//     lbl.viewController.edgesForExtendedLayout = UIRectEdge.Bottom | UIRectEdge.Left | UIRectEdge.Right;
+//     (<any>lbl).scrollableContent = true;
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
 
-    page.content = tabView;
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     page.content = tabView;
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
 
-    const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
-    const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
+//     const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
 
-    const pageHeight = getHeight(page);
-    const expectedPageHeight = screenHeight - statusBarHeight - navBarHeight;
-    TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight - statusBar - navBarHeight");
+//     const pageHeight = getHeight(page);
+//     const expectedPageHeight = screenHeight - statusBarHeight - navBarHeight;
+//     TKUnit.assertEqual(pageHeight, expectedPageHeight, "page.height !== screenHeight - statusBar - navBarHeight");
 
-    const contentHeight = getHeight(lbl);
-    TKUnit.assertEqual(contentHeight, expectedPageHeight, "lbl.height !== screenHeight - statusBar - navBarHeight");
-    (<UIViewController>page.viewController).edgesForExtendedLayout = UIRectEdge.All;
-}
+//     const contentHeight = getHeight(lbl);
+//     TKUnit.assertEqual(contentHeight, expectedPageHeight, "lbl.height !== screenHeight - statusBar - navBarHeight");
+//     (<UIViewController>page.viewController).edgesForExtendedLayout = UIRectEdge.All;
+// }
 
-export function test_correct_layout_scrollable_content_true_bottom_edge_does_not_span() {
-    const page = new Page();
-    (<any>page).scrollableContent = true;
-    page.actionBar.title = "ActionBar";
-    page.viewController.automaticallyAdjustsScrollViewInsets = false;
-    (<UIViewController>page.viewController).edgesForExtendedLayout = UIRectEdge.All;
+// export function test_correct_layout_scrollable_content_true_bottom_edge_does_not_span() {
+//     const page = new Page();
+//     (<any>page).scrollableContent = true;
+//     page.actionBar.title = "ActionBar";
+//     page.viewController.automaticallyAdjustsScrollViewInsets = false;
+//     (<UIViewController>page.viewController).edgesForExtendedLayout = UIRectEdge.All;
 
-    const tabView = new TabView();
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    lbl.viewController = iosView.UILayoutViewController.initWithOwner(new WeakRef(lbl));
-    lbl.viewController.edgesForExtendedLayout = UIRectEdge.Top | UIRectEdge.Left | UIRectEdge.Right;
-    (<any>lbl).scrollableContent = true;
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
-    page.content = tabView;
+//     const tabView = new TabView();
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     lbl.viewController = iosView.UILayoutViewController.initWithOwner(new WeakRef(lbl));
+//     lbl.viewController.edgesForExtendedLayout = UIRectEdge.Top | UIRectEdge.Left | UIRectEdge.Right;
+//     (<any>lbl).scrollableContent = true;
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
+//     page.content = tabView;
     
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
-    TKUnit.assertNotNull(lbl.viewController);
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     TKUnit.assertNotNull(lbl.viewController);
 
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
 
-    const pageHeight = getHeight(page);
-    TKUnit.assertEqual(pageHeight, screenHeight, "page.height !== screenHeight");
+//     const pageHeight = getHeight(page);
+//     TKUnit.assertEqual(pageHeight, screenHeight, "page.height !== screenHeight");
 
-    const contentHeight = getHeight(lbl);
-    TKUnit.assertEqual(contentHeight, screenHeight - tabBarHeight, "lbl.height !== screenHeight - tabBarHeight");
-}
+//     const contentHeight = getHeight(lbl);
+//     TKUnit.assertEqual(contentHeight, screenHeight - tabBarHeight, "lbl.height !== screenHeight - tabBarHeight");
+// }
 
-function test_correct_layout_top_bottom_edges_does_not_span_options(scrollable: boolean, flat: boolean) {
-    const page = new Page();
-    page.actionBar.title = "ActionBar";
+// function test_correct_layout_top_bottom_edges_does_not_span_options(scrollable: boolean, flat: boolean) {
+//     const page = new Page();
+//     page.actionBar.title = "ActionBar";
 
-    const tabView = new TabView();
-    const tabItem = new TabViewItem();
-    tabItem.title = "Item";
-    const lbl = new Label();
-    lbl.viewController = iosView.UILayoutViewController.initWithOwner(new WeakRef(lbl));
-    lbl.viewController.edgesForExtendedLayout = UIRectEdge.Left | UIRectEdge.Right;
-    tabItem.view = lbl;
-    tabView.items = [tabItem];
+//     const tabView = new TabView();
+//     const tabItem = new TabViewItem();
+//     tabItem.title = "Item";
+//     const lbl = new Label();
+//     lbl.viewController = iosView.UILayoutViewController.initWithOwner(new WeakRef(lbl));
+//     lbl.viewController.edgesForExtendedLayout = UIRectEdge.Left | UIRectEdge.Right;
+//     tabItem.view = lbl;
+//     tabView.items = [tabItem];
 
-    page.content = tabView;
+//     page.content = tabView;
 
-    page.actionBar.flat = flat;
-    (<any>page).scrollableContent = scrollable;
-    (<any>lbl).scrollableContent = scrollable;
+//     page.actionBar.flat = flat;
+//     (<any>page).scrollableContent = scrollable;
+//     (<any>lbl).scrollableContent = scrollable;
 
-    helper.navigate(() => page);
-    TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
+//     helper.navigate(() => page);
+//     TKUnit.assertTrue(page.isLoaded, "page NOT loaded!");
 
-    const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
-    const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
-    const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
-    const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
+//     const statusBarHeight = uiUtils.ios.getStatusBarHeight(page.viewController);
+//     const tabBarHeight = uiUtils.ios.getActualHeight(tabView.viewController.tabBar);
+//     const screenHeight = layout.toDevicePixels(UIScreen.mainScreen.bounds.size.height);
+//     const navBarHeight = uiUtils.ios.getActualHeight(page.frame.ios.controller.navigationBar);
 
-    const contentHeight = getHeight(lbl);
-    TKUnit.assertEqual(contentHeight, screenHeight - statusBarHeight - navBarHeight - tabBarHeight, "lbl.height !== screenHeight - statusBarHeight - navBarHeight - tabBarHeight");
-}
+//     const contentHeight = getHeight(lbl);
+//     TKUnit.assertEqual(contentHeight, screenHeight - statusBarHeight - navBarHeight - tabBarHeight, "lbl.height !== screenHeight - statusBarHeight - navBarHeight - tabBarHeight");
+// }
 
 export function test_showing_native_viewcontroller_doesnt_throw_exception() {
     let testPage = new Page();
diff --git a/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts b/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts
new file mode 100644
index 000000000..6a9baa425
--- /dev/null
+++ b/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts
@@ -0,0 +1,461 @@
+import { UITest } from "../../ui-test";
+import { ScrollView } from "tns-core-modules/ui/scroll-view";
+import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
+import * as TKUnit from "../../TKUnit";
+import * as view from "tns-core-modules/ui/core/view";
+import * as platform from "tns-core-modules/platform";
+import { ios as iosUtils } from "tns-core-modules/utils/utils";
+
+import * as helper from "../helper";
+import { parse } from "tns-core-modules/ui/builder";
+import {
+    dipToDp, left, top, right, bottom, height, width,
+    equal, check,
+    isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith,
+    isLeftWith, isRightWith, isBelowWith
+} from "../layouts/layout-tests-helper";
+
+class ScrollLayoutSafeAreaTest extends UITest<ScrollView> {
+
+    private executeSnippet<U extends { root: view.View }>(ui: U, setup: (ui: U) => void, test: (ui: U) => void, pageOptions?: helper.PageOptions): void {
+        function waitUntilTestElementLayoutIsValid(view: view.View, timeoutSec?: number): void {
+            TKUnit.waitUntilReady(() => {
+                return view.isLayoutValid;
+            }, timeoutSec || 1);
+        }
+
+        setup(ui);
+        helper.buildUIAndRunTest(ui.root, () => {
+            waitUntilTestElementLayoutIsValid(ui.root);
+            test(ui);
+        }, pageOptions);
+    };
+
+    private noop() {
+        // no operation
+    };
+
+    private getViews(template: string) {
+        let root = parse(template);
+        return {
+            root,
+            grid: root.getViewById("grid") as GridLayout,
+            stack: root.getViewById("stack") as GridLayout,
+            childFirst: root.getViewById("childFirst") as view.View,
+            cells: [
+                [root.getViewById("cell00") as view.View, root.getViewById("cell01") as view.View, root.getViewById("cell02") as view.View],
+                [root.getViewById("cell10") as view.View, root.getViewById("cell11") as view.View, root.getViewById("cell12") as view.View],
+                [root.getViewById("cell20") as view.View, root.getViewById("cell21") as view.View, root.getViewById("cell22") as view.View]
+            ]
+        };
+    };
+
+    private scroll_view_in_full_screen(scrollView: view.View, pageOptions?: helper.PageOptions) {
+        let expectedTop = 0;
+        if (pageOptions && pageOptions.actionBarFlat) {
+            const actionBarHeight = round(dipToDp(scrollView.page.actionBar.nativeViewProtected.frame.size.height));
+            const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
+            const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
+            expectedTop = actionBarHeight + statusBarHeight;
+        }
+
+        const l = left(scrollView);
+        const t = top(scrollView);
+        const r = right(scrollView);
+        const b = bottom(scrollView);
+        equal(l, 0, `${scrollView}.left - actual:${l}; expected: ${0}`);
+        equal(t, expectedTop, `${scrollView}.top - actual:${t}; expected: ${expectedTop}`);
+        equal(r, platform.screen.mainScreen.widthPixels, `${scrollView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
+        equal(b, platform.screen.mainScreen.heightPixels, `${scrollView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
+    }
+
+    private scroll_view_in_full_screen_test(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <ScrollView id="scroll" backgroundColor="Crimson"></ScrollView>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root }) => {
+                this.scroll_view_in_full_screen(root, pageOptions);
+            },
+            pageOptions
+        );
+    }
+
+    public test_scroll_view_in_full_screen_action_bar() {
+        this.scroll_view_in_full_screen_test({ actionBar: true });
+    }
+
+    public test_scroll_view_in_full_screen_action_bar_hidden() {
+        this.scroll_view_in_full_screen_test({ actionBarHidden: true });
+    }
+
+    public test_scroll_view_in_full_screen_action_bar_flat() {
+        this.scroll_view_in_full_screen_test({ actionBarFlat: true });
+    }
+
+    public test_scroll_view_in_full_screen_tab_bar() {
+        this.scroll_view_in_full_screen_test({ tabBar: true });
+    }
+
+    private scroll_view_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <ScrollView id="scroll" backgroundColor="Crimson">
+            <StackLayout id="stack">
+                <Label id="childFirst" text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            </StackLayout>
+        </ScrollView>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, stack, childFirst }) => {
+                const insets = root.getSafeAreaInsets();
+
+                isLeftAlignedWith(root, stack);
+                isTopAlignedWith(root, stack);
+                isRightAlignedWith(root, stack);
+
+                isLeftWith(root, childFirst, insets.left);
+                isBelowWith(root, childFirst, insets.top);
+                isRightWith(childFirst, root, insets.right);
+
+                const scrollViewContentHeight = round(dipToDp(root.nativeViewProtected.contentSize.height));
+                const sumOfNestedLabelHeightsAndInsets = height(childFirst) * stack.getChildrenCount() + insets.top + insets.bottom;
+                equal(scrollViewContentHeight, sumOfNestedLabelHeightsAndInsets, `scroll view content height<${scrollViewContentHeight}> sum of nested label height and insets <${sumOfNestedLabelHeightsAndInsets}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_scroll_view_children_components_in_safe_area() {
+        this.scroll_view_children_components_in_safe_area({ actionBar: true });
+    }
+
+    public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_hidden() {
+        this.scroll_view_children_components_in_safe_area({ actionBarHidden: true });
+    }
+
+    public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_flat() {
+        this.scroll_view_children_components_in_safe_area({ actionBarFlat: true });
+    }
+
+    public test_grid_nested_grid_cells_layout_beyond_safe_area_tab_bar() {
+        this.scroll_view_children_components_in_safe_area({ tabBar: true });
+    }
+
+    private grid_nested_scroll_views_layout_beyond_safe_area(pageOptions?: helper.PageOptions) {
+        const snippet = `
+        <GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
+            <ScrollView id="cell00" row="0" col="0" backgroundColor="SkyBlue">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell01" row="0" col="1" backgroundColor="Indigo">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell02" row="0" col="2" backgroundColor="Crimson">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell10" row="1" col="0" backgroundColor="Chocolate">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell11" row="1" col="1" backgroundColor="Cornsilk">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell12" row="1" col="2" backgroundColor="BurlyWood">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell20" row="2" col="0" backgroundColor="GoldenRod">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell21" row="2" col="1" backgroundColor="Khaki">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+            <ScrollView id="cell22" row="2" col="2" backgroundColor="IndianRed">
+                <StackLayout>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                    <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+                </StackLayout>
+            </ScrollView>
+        </GridLayout>
+        `;
+
+        this.executeSnippet(
+            this.getViews(snippet),
+            this.noop,
+            ({ root, grid, cells }) => {
+                isLeftAlignedWith(grid, cells[0][0]);
+                isLeftAlignedWith(grid, cells[1][0]);
+                isLeftAlignedWith(grid, cells[2][0]);
+
+                isTopAlignedWith(grid, cells[0][0]);
+                isTopAlignedWith(grid, cells[0][1]);
+                isTopAlignedWith(grid, cells[0][2]);
+
+                isRightAlignedWith(grid, cells[0][2]);
+                isRightAlignedWith(grid, cells[1][2]);
+                isRightAlignedWith(grid, cells[2][2]);
+
+                isBottomAlignedWith(grid, cells[2][0]);
+                isBottomAlignedWith(grid, cells[2][1]);
+                isBottomAlignedWith(grid, cells[2][2]);
+
+                check(height(cells[0][1]) >= height(cells[1][1]), `cell01 height<${height(cells[0][1])}> not greater or equal cell11 height<${height(cells[1][1])}>`);
+                check(height(cells[1][1]) <= height(cells[2][1]), `cell11 height<${height(cells[1][1])}> not less or equal cell21 height<${height(cells[2][1])}>`);
+                const sumOfNestedScrollViewHeights = height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]);
+                equal(height(grid), sumOfNestedScrollViewHeights, `grid height<${height(grid)}> sum of nested scroll views height <${sumOfNestedScrollViewHeights}>`);
+
+                check(width(cells[1][0]) >= width(cells[1][1]), `cell10 width<${width(cells[1][0])}> not greater or equal cell11 width<${width(cells[1][1])}>`);
+                check(width(cells[1][1]) <= width(cells[1][2]), `cell11 width<${width(cells[1][1])}> not less or equal cell12 width<${width(cells[1][2])}>`);
+                const sumOfNestedScrollViewWidths = width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2])
+                equal(width(grid), sumOfNestedScrollViewWidths, `grid width<${width(grid)}> sum of nested scroll views width <${sumOfNestedScrollViewWidths}>`);
+            },
+            pageOptions
+        );
+    }
+
+    public test_grid_nested_scroll_views_layout_beyond_safe_area_action_bar() {
+        this.grid_nested_scroll_views_layout_beyond_safe_area({ actionBar: true });
+    }
+
+    public test_grid_component_cells_layout_in_safe_area_action_bar_hidden() {
+        this.grid_nested_scroll_views_layout_beyond_safe_area({ actionBarHidden: true });
+    }
+
+    public test_grid_component_cells_layout_in_safe_area_action_bar_flat() {
+        this.grid_nested_scroll_views_layout_beyond_safe_area({ actionBarFlat: true });
+    }
+
+    public test_grid_component_cells_layout_in_safe_area_tab_bar() {
+        this.grid_nested_scroll_views_layout_beyond_safe_area({ tabBar: true });
+    }
+}
+
+export function createTestCase(): ScrollLayoutSafeAreaTest {
+    return new ScrollLayoutSafeAreaTest();
+}
diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts
index 9185bdfb7..e9dc498d2 100644
--- a/tests/app/ui/styling/style-tests.ts
+++ b/tests/app/ui/styling/style-tests.ts
@@ -364,7 +364,7 @@ export const test_composite_selector_type_and_class = function () {
         TKUnit.assert(lblWithClass.style.color === undefined, "lblWithClass color should not have a value");
     }
 
-    helper.buildUIAndRunTest(testStack, testFunc, testCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: testCss });
 }
 
 export const test_composite_selector_type_class_state = function () {
@@ -394,7 +394,7 @@ export const test_composite_selector_type_class_state = function () {
 
         TKUnit.assertNull(lblWithClass.style.color, "Color should not have a value");
     }
-    helper.buildUIAndRunTest(testStack, testFunc, testCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: testCss });
 }
 
 export const test_style_is_applied_when_control_is_added_after_load = function () {
@@ -433,7 +433,7 @@ export function test_styles_are_updated_when_cssClass_is_set() {
         helper.assertViewBackgroundColor(btn2, "#111111");
     };
 
-    helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: changeIdOrClassTestCss });
 }
 
 export function test_styles_are_updated_when_cssClass_is_changed() {
@@ -454,7 +454,7 @@ export function test_styles_are_updated_when_cssClass_is_changed() {
         helper.assertViewBackgroundColor(btn2, "#111111");
     };
 
-    helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: changeIdOrClassTestCss });
 }
 
 export function test_styles_are_updated_when_cssClass_is_cleared() {
@@ -475,7 +475,7 @@ export function test_styles_are_updated_when_cssClass_is_cleared() {
         helper.assertViewBackgroundColor(btn2, "#111111");
     };
 
-    helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: changeIdOrClassTestCss });
 }
 
 export function test_styles_are_updated_when_id_is_set() {
@@ -495,7 +495,7 @@ export function test_styles_are_updated_when_id_is_set() {
         helper.assertViewBackgroundColor(btn2, "#111111");
     };
 
-    helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: changeIdOrClassTestCss });
 }
 
 export function test_styles_are_updated_when_id_is_changed() {
@@ -516,7 +516,7 @@ export function test_styles_are_updated_when_id_is_changed() {
         helper.assertViewBackgroundColor(btn2, "#111111");
     };
 
-    helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: changeIdOrClassTestCss });
 }
 
 export function test_styles_are_updated_when_id_is_cleared() {
@@ -537,7 +537,7 @@ export function test_styles_are_updated_when_id_is_cleared() {
         helper.assertViewBackgroundColor(btn2, "#111111");
     };
 
-    helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
+    helper.buildUIAndRunTest(testStack, testFunc, { pageCss: changeIdOrClassTestCss });
 }
 
 const typeSelector = "button { color: blue } ";
@@ -698,7 +698,7 @@ export function test_set_invalid_CSS_values_dont_cause_crash() {
 
     helper.buildUIAndRunTest(testButton, (views: Array<viewModule.View>) => {
         TKUnit.assertEqual(30, testButton.style.fontSize);
-    }, invalidCSS);
+    }, { pageCss: invalidCSS });
 }
 
 // Check Mixed, Upper and lower case properties
@@ -717,7 +717,7 @@ export function test_set_mixed_CSS_cases_works() {
         TKUnit.assertEqual(30, testButton.style.fontSize);
         helper.assertViewBackgroundColor(testButton, "#FF0000");
         helper.assertViewColor(testButton, "#0000FF");
-    }, casedCSS);
+    }, { pageCss: casedCSS });
 }
 
 export function test_basic_hierarchical_selectors() {
@@ -742,7 +742,7 @@ export function test_basic_hierarchical_selectors() {
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#FF0000");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_basic_hierarchical_direct_child_selectors() {
@@ -768,7 +768,7 @@ export function test_basic_hierarchical_direct_child_selectors() {
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#00FF00");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_basic_hierarchical_direct_child_more_levels_selectors() {
@@ -794,7 +794,7 @@ export function test_basic_hierarchical_direct_child_more_levels_selectors() {
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#FF0000");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_hierarchical_direct_child_more_levels_diff_selector_types() {
@@ -822,7 +822,7 @@ export function test_hierarchical_direct_child_more_levels_diff_selector_types()
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#FF0000");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_hierarchical_direct_child_more_levels_diff_selector_types2() {
@@ -851,7 +851,7 @@ export function test_hierarchical_direct_child_more_levels_diff_selector_types2(
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#FF0000");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_hierarchical_direct_child_more_levels_diff_selector_types_invalid() {
@@ -880,7 +880,7 @@ export function test_hierarchical_direct_child_more_levels_diff_selector_types_i
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#00FF00");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_hierarchical_direct_child_more_levels_diff_selector_types_invalid_middle() {
@@ -909,7 +909,7 @@ export function test_hierarchical_direct_child_more_levels_diff_selector_types_i
         helper.assertViewBackgroundColor(stack.getViewById("testButton2"), "#00FF00");
     }
 
-    helper.buildUIAndRunTest(stack, testFunc, testCss);
+    helper.buildUIAndRunTest(stack, testFunc, { pageCss: testCss });
 }
 
 export function test_type_attr_selector() {
@@ -921,7 +921,7 @@ export function test_type_attr_selector() {
     let testFunc = function (views: Array<viewModule.View>) {
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_class_attr_selector() {
@@ -934,7 +934,7 @@ export function test_class_attr_selector() {
     let testFunc = function (views: Array<viewModule.View>) {
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_id_attr_selector() {
@@ -947,7 +947,7 @@ export function test_id_attr_selector() {
     let testFunc = function (views: Array<viewModule.View>) {
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_type_attr_value_selector() {
@@ -959,7 +959,7 @@ export function test_type_attr_value_selector() {
     let testFunc = function (views: Array<viewModule.View>) {
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_type_attr_invalid_value_selector() {
@@ -972,7 +972,7 @@ export function test_type_attr_invalid_value_selector() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_tilde_attr_selector_correct_syntax() {
@@ -985,7 +985,7 @@ export function test_tilde_attr_selector_correct_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_tilde_attr_selector_correct_syntax1() {
@@ -998,7 +998,7 @@ export function test_tilde_attr_selector_correct_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_tilde_attr_selector_correct_syntax2() {
@@ -1011,7 +1011,7 @@ export function test_tilde_attr_selector_correct_syntax2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_tilde_attr_selector_incorrect_syntax() {
@@ -1024,7 +1024,7 @@ export function test_tilde_attr_selector_incorrect_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_tilde_attr_selector_incorrect_syntax1() {
@@ -1037,7 +1037,7 @@ export function test_tilde_attr_selector_incorrect_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_tilde_attr_selector_incorrect_syntax2() {
@@ -1050,7 +1050,7 @@ export function test_tilde_attr_selector_incorrect_syntax2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_pipe_attr_selector_correct_syntax() {
@@ -1063,7 +1063,7 @@ export function test_pipe_attr_selector_correct_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_pipe_attr_selector_correct_syntax1() {
@@ -1076,7 +1076,7 @@ export function test_pipe_attr_selector_correct_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_pipe_attr_selector_incorrect_syntax() {
@@ -1089,7 +1089,7 @@ export function test_pipe_attr_selector_incorrect_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_pipe_attr_selector_incorrect_syntax1() {
@@ -1102,7 +1102,7 @@ export function test_pipe_attr_selector_incorrect_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_pipe_attr_selector_incorrect_syntax2() {
@@ -1115,7 +1115,7 @@ export function test_pipe_attr_selector_incorrect_syntax2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_power_attr_selector_correct_syntax() {
@@ -1128,7 +1128,7 @@ export function test_power_attr_selector_correct_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_power_attr_selector_correct_syntax1() {
@@ -1141,7 +1141,7 @@ export function test_power_attr_selector_correct_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_power_attr_selector_correct_synta2() {
@@ -1154,7 +1154,7 @@ export function test_power_attr_selector_correct_synta2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_power_attr_selector_incorrect_syntax() {
@@ -1167,7 +1167,7 @@ export function test_power_attr_selector_incorrect_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_power_attr_selector_incorrect_syntax1() {
@@ -1180,7 +1180,7 @@ export function test_power_attr_selector_incorrect_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_dollar_attr_selector_correct_syntax() {
@@ -1193,7 +1193,7 @@ export function test_dollar_attr_selector_correct_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_dollar_attr_selector_correct_syntax1() {
@@ -1206,7 +1206,7 @@ export function test_dollar_attr_selector_correct_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_dollar_attr_selector_correct_syntax2() {
@@ -1219,7 +1219,7 @@ export function test_dollar_attr_selector_correct_syntax2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_dollar_attr_selector_incorrect_syntax() {
@@ -1232,7 +1232,7 @@ export function test_dollar_attr_selector_incorrect_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_dollar_attr_selector_incorrect_syntax1() {
@@ -1245,7 +1245,7 @@ export function test_dollar_attr_selector_incorrect_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_dollar_attr_selector_incorrect_syntax2() {
@@ -1258,7 +1258,7 @@ export function test_dollar_attr_selector_incorrect_syntax2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_correct_syntax() {
@@ -1271,7 +1271,7 @@ export function test_star_attr_selector_correct_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_correct_syntax1() {
@@ -1284,7 +1284,7 @@ export function test_star_attr_selector_correct_syntax1() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_correct_syntax2() {
@@ -1297,7 +1297,7 @@ export function test_star_attr_selector_correct_syntax2() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_correct_syntax3() {
@@ -1310,7 +1310,7 @@ export function test_star_attr_selector_correct_syntax3() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_correct_syntax4() {
@@ -1323,7 +1323,7 @@ export function test_star_attr_selector_correct_syntax4() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_correct_syntax5() {
@@ -1336,7 +1336,7 @@ export function test_star_attr_selector_correct_syntax5() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#FF0000");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_star_attr_selector_incorrect_syntax() {
@@ -1349,7 +1349,7 @@ export function test_star_attr_selector_incorrect_syntax() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_alone_attr_selector() {
@@ -1362,7 +1362,7 @@ export function test_alone_attr_selector() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_UsingSameSelectors_ShouldApplyLatest() {
@@ -1375,7 +1375,7 @@ export function test_UsingSameSelectors_ShouldApplyLatest() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_UsingSameSelectorsWithSpecific_ShouldApplyLatest() {
@@ -1388,7 +1388,7 @@ export function test_UsingSameSelectorsWithSpecific_ShouldApplyLatest() {
         // style from correct type css should be applied
         helper.assertViewBackgroundColor(testButton, "#00FF00");
     }
-    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
 }
 
 export function test_CascadingClassNamesAppliesAfterPageLoad() {
diff --git a/tests/app/ui/view/view-tests-common.ts b/tests/app/ui/view/view-tests-common.ts
index 14681a491..b521f4325 100644
--- a/tests/app/ui/view/view-tests-common.ts
+++ b/tests/app/ui/view/view-tests-common.ts
@@ -484,7 +484,7 @@ export function test_NativeSetter_called_only_once_with_cssValue() {
         TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value");
         TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimValue", "Native value");
         TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value");
-    }, pageCSS);
+    }, { pageCss: pageCSS });
 };
 
 export function test_NativeSetter_called_only_once_with_cssValue_and_localValue() {
@@ -510,7 +510,7 @@ export function test_NativeSetter_called_only_once_with_cssValue_and_localValue(
         TKUnit.assertEqual(testView.cssAnimPropNativeValue, "testCssAnimationValueLocal", "Native value");
         // View property set from CSS sets local value
         TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValueCSS", "Native value");
-    }, pageCSS);
+    }, { pageCss: pageCSS });
 };
 
 export function test_NativeSetter_called_only_once_with_multiple_sets() {
@@ -960,7 +960,7 @@ export function testBackgroundShorthand_With_EmptyBorder() {
 
     helper.buildUIAndRunTest(lbl, (views: Array<View>) => {
         helper.waitUntilLayoutReady(lbl);
-    }, css);
+    }, { pageCss: css });
 };
 
 export function test_automation_text_default_value() {
diff --git a/tests/package.json b/tests/package.json
index 749c15efc..56a0aa160 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -6,10 +6,10 @@
   "nativescript": {
     "id": "org.nativescript.UnitTestApp",
     "tns-ios": {
-      "version": "4.1.0"
+      "version": "4.2.0"
     },
     "tns-android": {
-      "version": "4.1.1"
+      "version": "4.2.0"
     }
   },
   "dependencies": {
@@ -24,4 +24,4 @@
     "tns-platform-declarations": "*",
     "typescript": "^2.6.1"
   }
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts
index 3ff2cbce7..45727dea4 100644
--- a/tns-core-modules/ui/core/view/view-common.ts
+++ b/tns-core-modules/ui/core/view/view-common.ts
@@ -586,6 +586,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     public originY: number;
     public isEnabled: boolean;
     public isUserInteractionEnabled: boolean;
+    public iosOverflowSafeArea: boolean;
 
     get isLayoutValid(): boolean {
         return this._isLayoutValid;
@@ -842,7 +843,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 
     _getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
-        return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom };
+        return { left: 0, top: 0, right: 0, bottom: 0 };
     }
 
     /**
@@ -879,6 +880,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return undefined;
     }
 
+    public getSafeAreaInsets(): { left, top, right, bottom } {
+        return { left: 0, top: 0, right: 0, bottom: 0 };
+    }
+
     public getLocationInWindow(): Point {
         return undefined;
     }
@@ -1022,3 +1027,6 @@ isEnabledProperty.register(ViewCommon);
 
 export const isUserInteractionEnabledProperty = new Property<ViewCommon, boolean>({ name: "isUserInteractionEnabled", defaultValue: true, valueConverter: booleanConverter });
 isUserInteractionEnabledProperty.register(ViewCommon);
+
+export const iosOverflowSafeAreaProperty = new Property<ViewCommon, boolean>({ name: "iosOverflowSafeArea", defaultValue: false, valueConverter: booleanConverter });
+iosOverflowSafeAreaProperty.register(ViewCommon);
diff --git a/tns-core-modules/ui/core/view/view.android.ts b/tns-core-modules/ui/core/view/view.android.ts
index 54ddc9a05..948763d86 100644
--- a/tns-core-modules/ui/core/view/view.android.ts
+++ b/tns-core-modules/ui/core/view/view.android.ts
@@ -816,7 +816,11 @@ export class View extends ViewCommon {
     }
 }
 
-export class CustomLayoutView extends View implements CustomLayoutViewDefinition {
+export class ContainerView extends View {
+    public iosOverflowSafeArea: boolean;
+}
+
+export class CustomLayoutView extends ContainerView implements CustomLayoutViewDefinition {
     nativeViewProtected: android.view.ViewGroup;
 
     public createNativeView() {
diff --git a/tns-core-modules/ui/core/view/view.d.ts b/tns-core-modules/ui/core/view/view.d.ts
index ceeaf8796..83efcd184 100644
--- a/tns-core-modules/ui/core/view/view.d.ts
+++ b/tns-core-modules/ui/core/view/view.d.ts
@@ -344,6 +344,11 @@ export abstract class View extends ViewBase {
      */
     isUserInteractionEnabled: boolean;
 
+    /**
+     * Instruct container view to expand beyond the safe area. This property is iOS specific. Default value: false
+     */
+    iosOverflowSafeArea: boolean;
+
     /**
      * Gets is layout is valid. This is a read-only property.
      */
@@ -415,7 +420,6 @@ export abstract class View extends ViewBase {
 
     /**
      * Called from onLayout when native view position is about to be changed.
-     * @param parent    This parameter is not used. You can pass null.
      * @param left      Left position, relative to parent
      * @param top       Top position, relative to parent
      * @param right     Right position, relative to parent
@@ -427,7 +431,7 @@ export abstract class View extends ViewBase {
      * Measure a child by taking into account its margins and a given measureSpecs.
      * @param parent            This parameter is not used. You can pass null.
      * @param child             The view to be measured.
-     * @param measuredWidth        The measured width that the parent layout specifies for this view.
+     * @param measuredWidth     The measured width that the parent layout specifies for this view.
      * @param measuredHeight    The measured height that the parent layout specifies for this view.
      */
     public static measureChild(parent: View, child: View, widthMeasureSpec: number, heightMeasureSpec: number): { measuredWidth: number; measuredHeight: number };
@@ -527,6 +531,11 @@ export abstract class View extends ViewBase {
      */
     public createAnimation(options: AnimationDefinition): Animation;
 
+    /**
+     * Returns the iOS safe area insets of this view.
+     */
+    public getSafeAreaInsets(): { left, top, right, bottom };
+
     /**
      * Returns the location of this view in the window coordinate system.
      */
@@ -609,7 +618,7 @@ export abstract class View extends ViewBase {
      * Called by layout method to cache view bounds.
      * @private
      */
-    _setCurrentLayoutBounds(left: number, top: number, right: number, bottom: number): void;
+    _setCurrentLayoutBounds(left: number, top: number, right: number, bottom: number): { boundsChanged: boolean, sizeChanged: boolean };
     /**
      * Return view bounds.
      * @private
@@ -700,10 +709,20 @@ export abstract class View extends ViewBase {
     _setValue(property: any, value: any): never;
 }
 
+/**
+ * Base class for all UI components that are containers. 
+ */
+export class ContainerView extends View {
+    /**
+     * Instruct container view to expand beyond the safe area. This property is iOS specific. Default value: true
+     */
+    public iosOverflowSafeArea: boolean;
+}
+
 /**
  * Base class for all UI components that implement custom layouts. 
  */
-export class CustomLayoutView extends View {
+export class CustomLayoutView extends ContainerView {
     //@private
     /**
      * @private
@@ -777,6 +796,7 @@ export const originXProperty: Property<View, number>;
 export const originYProperty: Property<View, number>;
 export const isEnabledProperty: Property<View, boolean>;
 export const isUserInteractionEnabledProperty: Property<View, boolean>;
+export const iosOverflowSafeAreaProperty: Property<View, boolean>;
 
 export namespace ios {
     /**
@@ -784,10 +804,13 @@ export namespace ios {
      * @param view The view form which to start the search.
      */
     export function getParentWithViewController(view: View): View
-    export function isContentScrollable(controller: any /* UIViewController */, owner: View): boolean
     export function updateAutoAdjustScrollInsets(controller: any /* UIViewController */, owner: View): void
     export function updateConstraints(controller: any /* UIViewController */, owner: View): void;
     export function layoutView(controller: any /* UIViewController */, owner: View): void;
+    export function getPositionFromFrame(frame: any /* CGRect */): { left, top, right, bottom };
+    export function getFrameFromPosition(position: { left, top, right, bottom }, insets?: { left, top, right, bottom }): any /* CGRect */;
+    export function shrinkToSafeArea(view: View, frame: any /* CGRect */): any /* CGRect */;
+    export function expandBeyondSafeArea(view: View, frame: any /* CGRect */): any /* CGRect */;
     export class UILayoutViewController {
         public static initWithOwner(owner: WeakRef<View>): UILayoutViewController;
     }
diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts
index 2da497b4a..e9988f482 100644
--- a/tns-core-modules/ui/core/view/view.ios.ts
+++ b/tns-core-modules/ui/core/view/view.ios.ts
@@ -1,10 +1,11 @@
 // Definitions.
 import { Point, View as ViewDefinition, dip } from ".";
 import { ViewBase } from "../view-base";
+import { booleanConverter, Property } from "../view";
 
 import {
     ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty,
-    traceEnabled, traceWrite, traceCategories, traceError, traceMessageType
+    traceEnabled, traceWrite, traceCategories, traceError, traceMessageType, getAncestor
 } from "./view-common";
 
 import { ios as iosBackground, Background } from "../../styling/background";
@@ -24,6 +25,8 @@ const PFLAG_FORCE_LAYOUT = 1;
 const PFLAG_MEASURED_DIMENSION_SET = 1 << 1;
 const PFLAG_LAYOUT_REQUIRED = 1 << 2;
 
+const majorVersion = iosUtils.MajorVersion;
+
 export class View extends ViewCommon {
     nativeViewProtected: UIView;
     viewController: UIViewController;
@@ -90,7 +93,15 @@ export class View extends ViewCommon {
         }
 
         if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
-            this.onLayout(left, top, right, bottom);
+            let position = { left, top, right, bottom };
+            if (this.nativeViewProtected && majorVersion > 10) {
+                // on iOS 11+ it is possible to have a changed layout frame due to safe area insets
+                // get the frame and adjust the position, so that onLayout works correctly
+                const frame = this.nativeViewProtected.frame;
+                position = ios.getPositionFromFrame(frame);
+            }
+
+            this.onLayout(position.left, position.top, position.right, position.bottom);
             this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
         }
 
@@ -139,13 +150,13 @@ export class View extends ViewCommon {
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number): void {
-        //
+        // 
     }
 
-    public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
+    public _setNativeViewFrame(nativeView: UIView, frame: CGRect): void {
         if (!CGRectEqualToRect(nativeView.frame, frame)) {
             if (traceEnabled()) {
-                traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
+                traceWrite(this + " :_setNativeViewFrame: " + JSON.stringify(ios.getPositionFromFrame(frame)), traceCategories.Layout);
             }
             this._cachedFrame = frame;
             if (this._hasTransfrom) {
@@ -154,13 +165,19 @@ export class View extends ViewCommon {
                 nativeView.transform = CGAffineTransformIdentity;
                 nativeView.frame = frame;
                 nativeView.transform = transform;
-            }
-            else {
+            } else {
                 nativeView.frame = frame;
             }
 
+            const adjustedFrame = this.applySafeAreaInsets(frame);
+            if (adjustedFrame) {
+                nativeView.frame = adjustedFrame;
+            }
+
             const boundsOrigin = nativeView.bounds.origin;
-            nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frame.size.width, frame.size.height);
+            const boundsFrame = adjustedFrame || frame;
+            nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, boundsFrame.size.width, boundsFrame.size.height);
+
             this._raiseLayoutChangedEvent();
             this._isLaidOut = true;
         } else if (!this._isLaidOut) {
@@ -183,7 +200,7 @@ export class View extends ViewCommon {
         }
 
         const nativeView = this.nativeViewProtected;
-        const frame = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left), layout.toDeviceIndependentPixels(bottom - top));
+        const frame = ios.getFrameFromPosition({ left, top, right, bottom });
         this._setNativeViewFrame(nativeView, frame);
     }
 
@@ -211,6 +228,34 @@ export class View extends ViewCommon {
         return false;
     }
 
+    protected applySafeAreaInsets(frame: CGRect): CGRect {
+        if (majorVersion <= 10) {
+            return null;
+        }
+
+        if (!this.iosOverflowSafeArea) {
+            return ios.shrinkToSafeArea(this, frame);
+        } else if (this.nativeViewProtected && this.nativeViewProtected.window) {
+            return ios.expandBeyondSafeArea(this, frame);
+        }
+
+        return null;
+    }
+
+    public getSafeAreaInsets(): { left, top, right, bottom } {
+        const safeAreaInsets = this.nativeViewProtected && this.nativeViewProtected.safeAreaInsets;
+        let insets = { left: 0, top: 0, right: 0, bottom: 0 };
+
+        if (safeAreaInsets) {
+            insets.left = layout.round(layout.toDevicePixels(safeAreaInsets.left));
+            insets.top = layout.round(layout.toDevicePixels(safeAreaInsets.top));
+            insets.right = layout.round(layout.toDevicePixels(safeAreaInsets.right));
+            insets.bottom = layout.round(layout.toDevicePixels(safeAreaInsets.bottom));
+        }
+
+        return insets;
+    }
+
     public getLocationInWindow(): Point {
         if (!this.nativeViewProtected || !this.nativeViewProtected.window) {
             return undefined;
@@ -374,7 +419,7 @@ export class View extends ViewCommon {
     protected _hideNativeModalView(parent: View) {
         if (!parent || !parent.viewController) {
             traceError("Trying to hide modal view but no parent with viewController specified.")
-            return; 
+            return;
         }
 
         const parentController = parent.viewController;
@@ -508,6 +553,23 @@ export class View extends ViewCommon {
         }
     }
 
+    _getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
+        const nativeView = this.nativeViewProtected;
+        if (nativeView && !this.isCollapsed) {
+            const frame = nativeView.frame;
+            const origin = frame.origin;
+            const size = frame.size;
+            return {
+                left: Math.round(layout.toDevicePixels(origin.x)),
+                top: Math.round(layout.toDevicePixels(origin.y)),
+                right: Math.round(layout.toDevicePixels(origin.x + size.width)),
+                bottom: Math.round(layout.toDevicePixels(origin.y + size.height))
+            };
+        } else {
+            return { left: 0, top: 0, right: 0, bottom: 0 };
+        }
+    }
+
     _redrawNativeBackground(value: UIColor | Background): void {
         let updateSuspended = this._isPresentationLayerUpdateSuspeneded();
         if (!updateSuspended) {
@@ -540,7 +602,17 @@ export class View extends ViewCommon {
 }
 View.prototype._nativeBackgroundState = "unset";
 
-export class CustomLayoutView extends View {
+export class ContainerView extends View {
+
+    public iosOverflowSafeArea: boolean;
+
+    constructor() {
+        super();
+        this.iosOverflowSafeArea = true;
+    }
+}
+
+export class CustomLayoutView extends ContainerView {
 
     nativeViewProtected: UIView;
 
@@ -582,23 +654,6 @@ export class CustomLayoutView extends View {
             child.nativeViewProtected.removeFromSuperview();
         }
     }
-
-    _getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
-        const nativeView = this.nativeViewProtected;
-        if (nativeView && !this.isCollapsed) {
-            const frame = nativeView.frame;
-            const origin = frame.origin;
-            const size = frame.size;
-            return {
-                left: layout.toDevicePixels(origin.x),
-                top: layout.toDevicePixels(origin.y),
-                right: layout.toDevicePixels(origin.x + size.width),
-                bottom: layout.toDevicePixels(origin.y + size.height)
-            };
-        } else {
-            return { left: 0, top: 0, right: 0, bottom: 0 };
-        }
-    }
 }
 
 export namespace ios {
@@ -611,28 +666,19 @@ export namespace ios {
         return view;
     }
 
-    export function isContentScrollable(controller: UIViewController, owner: View): boolean {
-        let scrollableContent = (<any>owner).scrollableContent;
-        if (scrollableContent === undefined) {
-            const view: UIView = controller.view.subviews.count > 0 ? controller.view.subviews[0] : null;
-            if (view instanceof UIScrollView) {
-                scrollableContent = true;
-            }
-        }
-
-        return scrollableContent === true || scrollableContent === "true";
-    }
-
     export function updateAutoAdjustScrollInsets(controller: UIViewController, owner: View): void {
-        const scrollable = isContentScrollable(controller, owner);
-
-        owner._automaticallyAdjustsScrollViewInsets = scrollable;
-        controller.automaticallyAdjustsScrollViewInsets = scrollable;
+        if (majorVersion <= 10) {
+            owner._automaticallyAdjustsScrollViewInsets = false;
+            // This API is deprecated, but has no alternative for <= iOS 10
+            // Defaults to true and results to appliyng the insets twice together with our logic
+            // for iOS 11+ we use the contentInsetAdjustmentBehavior property in scrollview
+            // https://developer.apple.com/documentation/uikit/uiviewcontroller/1621372-automaticallyadjustsscrollviewin
+            controller.automaticallyAdjustsScrollViewInsets = false;
+        }
     }
 
     export function updateConstraints(controller: UIViewController, owner: View): void {
-        const root = controller.view;
-        if (!root.safeAreaLayoutGuide) {
+        if (majorVersion <= 10) {
             const layoutGuide = initLayoutGuide(controller);
             (<any>controller.view).safeAreaLayoutGuide = layoutGuide;
         }
@@ -651,26 +697,19 @@ export namespace ios {
         return layoutGuide;
     }
 
-    function getStatusBarHeight(viewController?: UIViewController): number {
-        const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
-        if (!app || app.statusBarHidden) {
-            return 0;
-        }
-
-        if (viewController && viewController.prefersStatusBarHidden) {
-            return 0;
-        }
-
-        const statusFrame = app.statusBarFrame;
-        return Math.min(statusFrame.size.width, statusFrame.size.height);
-    }
-
     export function layoutView(controller: UIViewController, owner: View): void {
-        let left: number, top: number, width: number, height: number;
+        // apply parent page additional top insets if any. The scenario is when there is a parent page with action bar.
+        const parentPage = getAncestor(owner, "Page");
+        if (parentPage) {
+            const parentPageInsetsTop = parentPage.viewController.view.safeAreaInsets.top;
+            const currentInsetsTop = controller.view.safeAreaInsets.top;
+            const additionalInsetsTop = parentPageInsetsTop - currentInsetsTop;
 
-        const frame = controller.view.frame;
-        const fullscreenOrigin = frame.origin;
-        const fullscreenSize = frame.size;
+            if (additionalInsetsTop > 0) {
+                const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: 0, right: 0 });
+                controller.additionalSafeAreaInsets = additionalInsets;
+            }
+        }
 
         let layoutGuide = controller.view.safeAreaLayoutGuide;
         if (!layoutGuide) {
@@ -680,56 +719,104 @@ export namespace ios {
             layoutGuide = initLayoutGuide(controller);
         }
         const safeArea = layoutGuide.layoutFrame;
-        const safeOrigin = safeArea.origin;
+        let position = ios.getPositionFromFrame(safeArea);
         const safeAreaSize = safeArea.size;
 
-        const navController = controller.navigationController;
-        const navBarHidden = navController ? navController.navigationBarHidden : true;
-        const scrollable = isContentScrollable(controller, owner);
-        const hasChildControllers = controller.childViewControllers.count > 0;
-
-        if (!(controller.edgesForExtendedLayout & UIRectEdge.Top)) {
-            const statusBarHeight = getStatusBarHeight(controller);
-            const navBarHeight = controller.navigationController ? controller.navigationController.navigationBar.frame.size.height : 0;
-            fullscreenOrigin.y = safeOrigin.y;
-            fullscreenSize.height -= (statusBarHeight + navBarHeight);
+        const hasChildViewControllers = controller.childViewControllers.count > 0;
+        if (hasChildViewControllers) {
+            const fullscreen = controller.view.frame;
+            position = ios.getPositionFromFrame(fullscreen);
         }
 
-        left = safeOrigin.x;
-        width = safeAreaSize.width;
+        const safeAreaWidth = layout.round(layout.toDevicePixels(safeAreaSize.width));
+        const safeAreaHeight = layout.round(layout.toDevicePixels(safeAreaSize.height));
 
-        if (hasChildControllers) {
-            // If not inner most extend to fullscreen
-            top = fullscreenOrigin.y;
-            height = fullscreenSize.height;
-        } else if (!scrollable) {
-            // If not scrollable dock under safe area
-            top = safeOrigin.y;
-            height = safeAreaSize.height;
-        } else if (navBarHidden) {
-            // If scrollable but no navigation bar dock under safe area
-            top = safeOrigin.y;
-            height = navController ? (fullscreenSize.height - top) : safeAreaSize.height;
-        } else {
-            // If scrollable and navigation bar extend to fullscreen
-            top = fullscreenOrigin.y;
-            height = fullscreenSize.height;
-        }
-
-        left = layout.toDevicePixels(left);
-        top = layout.toDevicePixels(top);
-        width = layout.toDevicePixels(width);
-        height = layout.toDevicePixels(height);
-
-        const widthSpec = layout.makeMeasureSpec(width, layout.EXACTLY);
-        const heightSpec = layout.makeMeasureSpec(height, layout.EXACTLY);
+        const widthSpec = layout.makeMeasureSpec(safeAreaWidth, layout.EXACTLY);
+        const heightSpec = layout.makeMeasureSpec(safeAreaHeight, layout.EXACTLY);
 
         View.measureChild(null, owner, widthSpec, heightSpec);
-        View.layoutChild(null, owner, left, top, width + left, height + top);
+        View.layoutChild(null, owner, position.left, position.top, position.right, position.bottom);
 
         layoutParent(owner.parent);
     }
 
+    export function getPositionFromFrame(frame: CGRect): { left, top, right, bottom } {
+        const left = layout.round(layout.toDevicePixels(frame.origin.x));
+        const top = layout.round(layout.toDevicePixels(frame.origin.y));
+        const right = layout.round(layout.toDevicePixels(frame.origin.x + frame.size.width));
+        const bottom = layout.round(layout.toDevicePixels(frame.origin.y + frame.size.height));
+
+        return { left, right, top, bottom };
+    }
+
+    export function getFrameFromPosition(position: { left, top, right, bottom }, insets?: { left, top, right, bottom }): CGRect {
+        insets = insets || { left: 0, top: 0, right: 0, bottom: 0 };
+
+        const left = layout.toDeviceIndependentPixels(position.left + insets.left);
+        const top = layout.toDeviceIndependentPixels(position.top + insets.top);
+        const width = layout.toDeviceIndependentPixels(position.right - position.left - insets.left - insets.right);
+        const height = layout.toDeviceIndependentPixels(position.bottom - position.top - insets.top - insets.bottom);
+
+        return CGRectMake(left, top, width, height);
+    }
+
+    export function shrinkToSafeArea(view: View, frame: CGRect): CGRect {
+        const insets = view.getSafeAreaInsets();
+        if (insets.left || insets.top) {
+            const position = ios.getPositionFromFrame(frame);
+            const adjustedFrame = ios.getFrameFromPosition(position, insets);
+
+            if (traceEnabled()) {
+                traceWrite(this + " :shrinkToSafeArea: " + JSON.stringify(ios.getPositionFromFrame(adjustedFrame)), traceCategories.Layout);
+            }
+
+            return adjustedFrame;
+        }
+        return null;
+    }
+
+    export function expandBeyondSafeArea(view: View, frame: CGRect): CGRect {
+        const locationInWindow = view.getLocationInWindow();
+        const inWindowLeft = layout.round(layout.toDevicePixels(locationInWindow.x));
+        const inWindowTop = layout.round(layout.toDevicePixels(locationInWindow.y));
+        const inWindowRight = inWindowLeft + layout.round(layout.toDevicePixels(frame.size.width));
+        const inWindowBottom = inWindowTop + layout.round(layout.toDevicePixels(frame.size.height));
+
+        const availableSpace = getAvailableSpaceFromParent(view);
+        const safeArea = availableSpace.safeArea;
+        const fullscreen = availableSpace.fullscreen;
+
+        const position = ios.getPositionFromFrame(frame);
+        const safeAreaPosition = ios.getPositionFromFrame(safeArea);
+        const fullscreenPosition = ios.getPositionFromFrame(fullscreen);
+
+        const adjustedPosition = position;
+
+        if (position.left && inWindowLeft <= safeAreaPosition.left) {
+            adjustedPosition.left = fullscreenPosition.left;
+        }
+
+        if (position.top && inWindowTop <= safeAreaPosition.top) {
+            adjustedPosition.top = fullscreenPosition.top;
+        }
+
+        if (inWindowRight < fullscreenPosition.right && inWindowRight >= safeAreaPosition.right + fullscreenPosition.left) {
+            adjustedPosition.right = fullscreenPosition.right - fullscreenPosition.left;
+        }
+
+        if (inWindowBottom < fullscreenPosition.bottom && inWindowBottom >= safeAreaPosition.bottom + fullscreenPosition.top) {
+            adjustedPosition.bottom = fullscreenPosition.bottom - fullscreenPosition.top;
+        }
+
+        const adjustedFrame = CGRectMake(layout.toDeviceIndependentPixels(adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.top), layout.toDeviceIndependentPixels(adjustedPosition.right - adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.bottom - adjustedPosition.top));
+
+        if (traceEnabled()) {
+            traceWrite(view + " :expandBeyondSafeArea: " + JSON.stringify(ios.getPositionFromFrame(adjustedFrame)), traceCategories.Layout);
+        }
+
+        return adjustedFrame;
+    }
+
     function layoutParent(view: ViewBase): void {
         if (!view) {
             return;
@@ -749,6 +836,38 @@ export namespace ios {
         layoutParent(view.parent);
     }
 
+    function getAvailableSpaceFromParent(view: View): { safeArea: CGRect, fullscreen: CGRect } {
+        if (!view) {
+            return;
+        }
+
+        let fullscreen = null;
+        let safeArea = null;
+
+        if (view.viewController) {
+            const nativeView = view.viewController.view;
+            safeArea = nativeView.safeAreaLayoutGuide.layoutFrame;
+            fullscreen = nativeView.frame;
+        } else {
+            let parent = view.parent as View;
+            while (parent && !parent.viewController && !(parent.nativeViewProtected instanceof UIScrollView)) {
+                parent = parent.parent as View;
+            }
+
+            if (parent.nativeViewProtected instanceof UIScrollView) {
+                const nativeView = parent.nativeViewProtected;
+                safeArea = nativeView.safeAreaLayoutGuide.layoutFrame;
+                fullscreen = CGRectMake(0, 0, nativeView.contentSize.width, nativeView.contentSize.height);
+            } else if (parent.viewController) {
+                const nativeView = parent.viewController.view;
+                safeArea = nativeView.safeAreaLayoutGuide.layoutFrame;
+                fullscreen = nativeView.frame;
+            }
+        }
+
+        return { safeArea: safeArea, fullscreen: fullscreen }
+    }
+
     export class UILayoutViewController extends UIViewController {
         public owner: WeakRef<View>;
 
@@ -796,4 +915,4 @@ export namespace ios {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts b/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
index 98420b2cc..4a07024b1 100644
--- a/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
@@ -47,13 +47,14 @@ export class AbsoluteLayout extends AbsoluteLayoutBase {
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         super.onLayout(left, top, right, bottom);
 
+        const insets = this.getSafeAreaInsets();
         this.eachLayoutChild((child, last) => {
 
             const childWidth = child.getMeasuredWidth();
             const childHeight = child.getMeasuredHeight();
 
-            const childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + child.effectiveLeft;
-            const childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + child.effectiveTop;
+            const childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + child.effectiveLeft + insets.left;
+            const childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + child.effectiveTop + insets.top;
             const childRight = childLeft + childWidth + child.effectiveMarginLeft + child.effectiveMarginRight;
             const childBottom = childTop + childHeight + child.effectiveMarginTop + child.effectiveMarginBottom;
 
diff --git a/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts b/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
index b689ebf2f..2c8efdf66 100644
--- a/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
@@ -22,7 +22,7 @@ export class DockLayout extends DockLayoutBase {
 
         const horizontalPaddingsAndMargins = this.effectivePaddingLeft + this.effectivePaddingRight + this.effectiveBorderLeftWidth + this.effectiveBorderRightWidth;
         const verticalPaddingsAndMargins = this.effectivePaddingTop + this.effectivePaddingBottom + this.effectiveBorderTopWidth + this.effectiveBorderBottomWidth;
-        
+
         let remainingWidth = widthMode === layout.UNSPECIFIED ? Number.MAX_VALUE : width - horizontalPaddingsAndMargins;
         let remainingHeight = heightMode === layout.UNSPECIFIED ? Number.MAX_VALUE : height - verticalPaddingsAndMargins;
 
@@ -79,11 +79,12 @@ export class DockLayout extends DockLayoutBase {
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         super.onLayout(left, top, right, bottom);
 
-        const horizontalPaddingsAndMargins = this.effectivePaddingLeft + this.effectivePaddingRight + this.effectiveBorderLeftWidth + this.effectiveBorderRightWidth;
-        const verticalPaddingsAndMargins = this.effectivePaddingTop + this.effectivePaddingBottom + this.effectiveBorderTopWidth + this.effectiveBorderBottomWidth;
+        const insets = this.getSafeAreaInsets();
+        const horizontalPaddingsAndMargins = this.effectivePaddingLeft + this.effectivePaddingRight + this.effectiveBorderLeftWidth + this.effectiveBorderRightWidth + insets.left + insets.right;
+        const verticalPaddingsAndMargins = this.effectivePaddingTop + this.effectivePaddingBottom + this.effectiveBorderTopWidth + this.effectiveBorderBottomWidth + insets.top + insets.bottom;
 
-        let childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
-        let childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
+        let childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
+        let childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
 
         let x = childLeft;
         let y = childTop;
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
index d376de88a..0e03d388c 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
@@ -943,38 +943,43 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number) {
+        const insets = this.getSafeAreaInsets();
+
         let isRtl;
         switch (this.flexDirection) {
             case FlexDirection.ROW:
                 isRtl = false;
-                this._layoutHorizontal(isRtl, left, top, right, bottom);
+                this._layoutHorizontal(isRtl, left, top, right, bottom, insets);
                 break;
             case FlexDirection.ROW_REVERSE:
                 isRtl = true;
-                this._layoutHorizontal(isRtl, left, top, right, bottom);
+                this._layoutHorizontal(isRtl, left, top, right, bottom, insets);
                 break;
             case FlexDirection.COLUMN:
                 isRtl = false;
                 if (this.flexWrap === FlexWrap.WRAP_REVERSE) {
                     isRtl = !isRtl;
                 }
-                this._layoutVertical(isRtl, false, left, top, right, bottom);
+                this._layoutVertical(isRtl, false, left, top, right, bottom, insets);
                 break;
             case FlexDirection.COLUMN_REVERSE:
                 isRtl = false;
                 if (this.flexWrap === FlexWrap.WRAP_REVERSE) {
                     isRtl = !isRtl;
                 }
-                this._layoutVertical(isRtl, true, left, top, right, bottom);
+                this._layoutVertical(isRtl, true, left, top, right, bottom, insets);
                 break;
             default:
                 throw new Error("Invalid flex direction is set: " + this.flexDirection);
         }
     }
 
-    private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number) {
-        let paddingLeft = this.effectivePaddingLeft;
-        let paddingRight = this.effectivePaddingRight;
+    private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number, insets: { left, top, right, bottom }) {
+        // include insets
+        let paddingLeft = this.effectivePaddingLeft + insets.left;
+        let paddingTop = this.effectivePaddingTop + insets.top;
+        let paddingRight = this.effectivePaddingRight + insets.right;
+        let paddingBottom = this.effectivePaddingBottom + insets.bottom;
 
         let childLeft;
         let currentViewIndex = 0;
@@ -982,8 +987,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let height = bottom - top;
         let width = right - left;
 
-        let childBottom = height - this.effectivePaddingBottom;
-        let childTop = this.effectivePaddingTop;
+        // include insets
+        let childBottom = height - paddingBottom;
+        let childTop = paddingTop;
 
         let childRight;
         this._flexLines.forEach((flexLine, i) => {
@@ -997,16 +1003,16 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     childRight = width - paddingRight;
                     break;
                 case JustifyContent.FLEX_END:
-                    childLeft = width - flexLine._mainSize + paddingRight;
-                    childRight = flexLine._mainSize - paddingLeft;
+                    childLeft = width - flexLine._mainSize - paddingRight;
+                    childRight = flexLine._mainSize + paddingLeft;
                     break;
                 case JustifyContent.CENTER:
-                    childLeft = paddingLeft + (width - flexLine._mainSize) / 2.0;
-                    childRight = width - paddingRight - (width - flexLine._mainSize) / 2.0;
+                    childLeft = paddingLeft + (width - insets.left - insets.right - flexLine._mainSize) / 2.0;
+                    childRight = width - paddingRight - (width - insets.left - insets.right - flexLine._mainSize) / 2.0;
                     break;
                 case JustifyContent.SPACE_AROUND:
                     if (flexLine._itemCount !== 0) {
-                        spaceBetweenItem = (width - flexLine.mainSize) / flexLine._itemCount;
+                        spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / flexLine._itemCount;
                     }
                     childLeft = paddingLeft + spaceBetweenItem / 2.0;
                     childRight = width - paddingRight - spaceBetweenItem / 2.0;
@@ -1014,7 +1020,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 case JustifyContent.SPACE_BETWEEN:
                     childLeft = paddingLeft;
                     let denominator = flexLine.itemCount !== 1 ? flexLine.itemCount - 1 : 1.0;
-                    spaceBetweenItem = (width - flexLine.mainSize) / denominator;
+                    spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / denominator;
                     childRight = width - paddingRight;
                     break;
                 default:
@@ -1130,12 +1136,13 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         }
     }
 
-    private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number) {
-        let paddingTop = this.effectivePaddingTop;
-        let paddingBottom = this.effectivePaddingBottom;
+    private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number, insets: { left, top, right, bottom }) {
+        let paddingLeft = this.effectivePaddingLeft + insets.left;
+        let paddingTop = this.effectivePaddingTop + insets.top;
+        let paddingRight = this.effectivePaddingRight + insets.right;
+        let paddingBottom = this.effectivePaddingBottom + insets.bottom;
 
-        let paddingRight = this.effectivePaddingRight;
-        let childLeft = this.effectivePaddingLeft;
+        let childLeft = paddingLeft;
         let currentViewIndex = 0;
 
         let width = right - left;
@@ -1157,16 +1164,16 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     childBottom = height - paddingBottom;
                     break;
                 case JustifyContent.FLEX_END:
-                    childTop = height - flexLine._mainSize + paddingBottom;
-                    childBottom = flexLine._mainSize - paddingTop;
+                    childTop = height - flexLine._mainSize - paddingBottom;
+                    childBottom = flexLine._mainSize + paddingTop;
                     break;
                 case JustifyContent.CENTER:
-                    childTop = paddingTop + (height - flexLine._mainSize) / 2.0;
-                    childBottom = height - paddingBottom - (height - flexLine._mainSize) / 2.0;
+                    childTop = paddingTop + (height - insets.top - insets.bottom - flexLine._mainSize) / 2.0;
+                    childBottom = height - paddingBottom - (height - insets.top - insets.bottom - flexLine._mainSize) / 2.0;
                     break;
                 case JustifyContent.SPACE_AROUND:
                     if (flexLine._itemCount !== 0) {
-                        spaceBetweenItem = (height - flexLine._mainSize) / flexLine.itemCount;
+                        spaceBetweenItem = (height - insets.top - insets.bottom - flexLine._mainSize) / flexLine.itemCount;
                     }
                     childTop = paddingTop + spaceBetweenItem / 2.0;
                     childBottom = height - paddingBottom - spaceBetweenItem / 2.0;
@@ -1174,7 +1181,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 case JustifyContent.SPACE_BETWEEN:
                     childTop = paddingTop;
                     let denominator = flexLine.itemCount !== 1 ? flexLine.itemCount - 1 : 1.0;
-                    spaceBetweenItem = (height - flexLine.mainSize) / denominator;
+                    spaceBetweenItem = (height - insets.top - insets.bottom - flexLine.mainSize) / denominator;
                     childBottom = height - paddingBottom;
                     break;
                 default:
diff --git a/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts b/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
index e1c405ff1..6d2b153b8 100644
--- a/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
@@ -159,8 +159,10 @@ export class GridLayout extends GridLayoutBase {
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         super.onLayout(left, top, right, bottom);
 
-        let paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
-        let paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
+        const insets = this.getSafeAreaInsets();
+
+        let paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
+        let paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
 
         this.columnOffsets.length = 0;
         this.rowOffsets.length = 0;
diff --git a/tns-core-modules/ui/layouts/layout-base.ios.ts b/tns-core-modules/ui/layouts/layout-base.ios.ts
index 900c1200c..30283f394 100644
--- a/tns-core-modules/ui/layouts/layout-base.ios.ts
+++ b/tns-core-modules/ui/layouts/layout-base.ios.ts
@@ -1,12 +1,12 @@
-import { 
-    LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View 
+import { 
+    LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View
 } from "./layout-base-common";
 
 export * from "./layout-base-common";
 
 export class LayoutBase extends LayoutBaseCommon {
     nativeViewProtected: UIView;
-    
+
     public addChild(child: View): void {
         super.addChild(child);
         this.requestLayout();
@@ -29,7 +29,7 @@ export class LayoutBase extends LayoutBaseCommon {
             super._setNativeClipToBounds();
         }
     }
-    
+
     [clipToBoundsProperty.getDefault](): boolean {
         return false;
     }
diff --git a/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts b/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
index eddf716c1..62804aa91 100644
--- a/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
@@ -83,19 +83,21 @@ export class StackLayout extends StackLayoutBase {
 
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         super.onLayout(left, top, right, bottom);
+
+        const insets = this.getSafeAreaInsets();
         if (this.orientation === "vertical") {
-            this.layoutVertical(left, top, right, bottom);
+            this.layoutVertical(left, top, right, bottom, insets);
         }
         else {
-            this.layoutHorizontal(left, top, right, bottom);
+            this.layoutHorizontal(left, top, right, bottom, insets);
         }
     }
 
-    private layoutVertical(left: number, top: number, right: number, bottom: number): void {
-        const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
-        const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
-        const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight;
-        const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom;
+    private layoutVertical(left: number, top: number, right: number, bottom: number, insets: {left, top, right, bottom}): void {
+        const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
+        const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
+        const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight + insets.right;
+        const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom + insets.bottom;
 
         let childTop: number;
         let childLeft: number = paddingLeft;
@@ -125,11 +127,11 @@ export class StackLayout extends StackLayoutBase {
         })
     }
 
-    private layoutHorizontal(left: number, top: number, right: number, bottom: number): void {
-        const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
-        const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
-        const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight;
-        const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom;
+    private layoutHorizontal(left: number, top: number, right: number, bottom: number, insets: {left, top, right, bottom}): void {
+        const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
+        const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
+        const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight + insets.right;
+        const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom + insets.bottom;
 
         let childTop: number = paddingTop;
         let childLeft: number;
diff --git a/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts b/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
index 87576f6d0..2d1d3a3d0 100644
--- a/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
@@ -122,35 +122,31 @@ export class WrapLayout extends WrapLayoutBase {
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         super.onLayout(left, top, right, bottom);
 
+        const insets = this.getSafeAreaInsets();
         const isVertical = this.orientation === "vertical";
-        const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
-        const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
-        const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight;
-        const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom;
+        const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
+        const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
+        const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight + insets.right;
+        const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom + insets.bottom;
 
         let childLeft = paddingLeft;
         let childTop = paddingTop;
-        let childrenLength: number;
-        if (isVertical) {
-            childrenLength = bottom - top - paddingBottom;
-        }
-        else {
-            childrenLength = right - left - paddingRight;
-        }
+        let childrenHeight = bottom - top - paddingBottom;
+        let childrenWidth = right - left - paddingRight;
+        let rowOrColumn = 0;
 
-        var rowOrColumn = 0;
         this.eachLayoutChild((child, last) => {
             // Add margins because layoutChild will sustract them.
             // * density converts them to device pixels.
             let childHeight = child.getMeasuredHeight() + child.effectiveMarginTop + child.effectiveMarginBottom;
             let childWidth = child.getMeasuredWidth() + child.effectiveMarginLeft + child.effectiveMarginRight;
-            
+
             let length = this._lengths[rowOrColumn];
             if (isVertical) {
                 childWidth = length;
                 childHeight = this.effectiveItemHeight > 0 ? this.effectiveItemHeight : childHeight;
                 let isFirst = childTop === paddingTop;
-                if (childTop + childHeight > childrenLength) {
+                if (childTop + childHeight > childrenHeight && childLeft + childWidth <= childrenWidth) {
                     // Move to top.
                     childTop = paddingTop;
 
@@ -165,12 +161,18 @@ export class WrapLayout extends WrapLayoutBase {
                     // Take respective column width.
                     childWidth = this._lengths[isFirst ? rowOrColumn - 1 : rowOrColumn];
                 }
-            }
-            else {
+
+                if (childLeft < childrenWidth && childTop < childrenHeight) {
+                    View.layoutChild(this, child, childLeft, childTop, childLeft + childWidth, childTop + childHeight);
+                }
+
+                // Move next child Top position to bottom.
+                childTop += childHeight;
+            } else {
                 childWidth = this.effectiveItemWidth > 0 ? this.effectiveItemWidth : childWidth;
                 childHeight = length;
                 let isFirst = childLeft === paddingLeft;
-                if (childLeft + childWidth > childrenLength) {
+                if (childLeft + childWidth > childrenWidth && childTop + childHeight <= childrenHeight) {
                     // Move to left.
                     childLeft = paddingLeft;
 
@@ -185,15 +187,11 @@ export class WrapLayout extends WrapLayoutBase {
                     // Take respective row height.
                     childHeight = this._lengths[isFirst ? rowOrColumn - 1 : rowOrColumn];
                 }
-            }
 
-            View.layoutChild(this, child, childLeft, childTop, childLeft + childWidth, childTop + childHeight);
+                if (childLeft < childrenWidth && childTop < childrenHeight) {
+                    View.layoutChild(this, child, childLeft, childTop, childLeft + childWidth, childTop + childHeight);
+                }
 
-            if (isVertical) {
-                // Move next child Top position to bottom.
-                childTop += childHeight;
-            }
-            else {
                 // Move next child Left position to right.
                 childLeft += childWidth;
             }
diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts
index 447fc09ef..746b8527b 100644
--- a/tns-core-modules/ui/list-view/list-view-common.ts
+++ b/tns-core-modules/ui/list-view/list-view-common.ts
@@ -1,5 +1,5 @@
 import { ListView as ListViewDefinition, ItemsSource, ItemEventData, TemplatedItemsView } from ".";
-import { CoercibleProperty, CssProperty, Style, View, Template, KeyedTemplate, Length, Property, Color, Observable, EventData, CSSType } from "../core/view";
+import { CoercibleProperty, CssProperty, Style, View, ViewBase, ContainerView, Template, KeyedTemplate, Length, Property, Color, Observable, EventData, CSSType } from "../core/view";
 import { parse, parseMultipleTemplates } from "../builder";
 import { Label } from "../label";
 import { ObservableArray, ChangedData } from "../../data/observable-array";
@@ -19,7 +19,7 @@ export module knownMultiTemplates {
 const autoEffectiveRowHeight = -1;
 
 @CSSType("ListView")
-export abstract class ListViewBase extends View implements ListViewDefinition, TemplatedItemsView {
+export abstract class ListViewBase extends ContainerView implements ListViewDefinition, TemplatedItemsView {
     public static itemLoadingEvent = "itemLoading";
     public static itemTapEvent = "itemTap";
     public static loadMoreItemsEvent = "loadMoreItems";
diff --git a/tns-core-modules/ui/list-view/list-view.ios.ts b/tns-core-modules/ui/list-view/list-view.ios.ts
index ed637f283..896e076fd 100644
--- a/tns-core-modules/ui/list-view/list-view.ios.ts
+++ b/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 {
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index 62a907691..d17c66514 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -120,7 +120,7 @@ class UIViewControllerImpl extends UIViewController {
         // Skip navigation events if modal page is shown.
         if (!owner._presentedViewController && frame) {
             const newEntry = this[ENTRY];
-            
+
             let isBack: boolean;
             // We are on the current page which happens when navigation is canceled so isBack should be false.
             if (frame.currentPage === owner && frame._navigationQueue.length === 0) {
@@ -312,7 +312,14 @@ export class Page extends PageBase {
     public onLayout(left: number, top: number, right: number, bottom: number) {
         const { width: actionBarWidth, height: actionBarHeight } = this.actionBar._getActualSize;
         View.layoutChild(this, this.actionBar, 0, 0, actionBarWidth, actionBarHeight);
-        View.layoutChild(this, this.layoutView, left, top, right, bottom);
+
+        const insets = this.getSafeAreaInsets();
+
+        const childLeft = 0 + insets.left;
+        const childTop = 0 + insets.top;
+        const childRight = right - left - insets.right;
+        const childBottom = bottom - top - insets.bottom;
+        View.layoutChild(this, this.layoutView, childLeft, childTop, childRight, childBottom);
     }
 
     public _addViewToNativeVisualTree(child: View, atIndex: number): boolean {
@@ -330,7 +337,7 @@ export class Page extends PageBase {
             if (this.viewController.presentedViewController === viewController) {
                 return true;
             }
-            
+
             this.viewController.addChildViewController(viewController);
         }
 
diff --git a/tns-core-modules/ui/repeater/repeater.ts b/tns-core-modules/ui/repeater/repeater.ts
index 328c0bada..1d606ee3d 100644
--- a/tns-core-modules/ui/repeater/repeater.ts
+++ b/tns-core-modules/ui/repeater/repeater.ts
@@ -101,7 +101,12 @@ export class Repeater extends CustomLayoutView implements RepeaterDefinition {
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number): void {
-        View.layoutChild(this, this.itemsLayout, 0, 0, right - left, bottom - top);
+        const insets = this.getSafeAreaInsets();
+        const childLeft = left + insets.left;
+        const childTop = top + insets.top;
+        const childRight = right - insets.right;
+        const childBottom = bottom - insets.bottom;
+        View.layoutChild(this, this.itemsLayout, childLeft, childTop, childRight, childBottom);
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
diff --git a/tns-core-modules/ui/scroll-view/scroll-view.ios.ts b/tns-core-modules/ui/scroll-view/scroll-view.ios.ts
index 737b0ecc3..717e5851f 100644
--- a/tns-core-modules/ui/scroll-view/scroll-view.ios.ts
+++ b/tns-core-modules/ui/scroll-view/scroll-view.ios.ts
@@ -132,15 +132,6 @@ export class ScrollView extends ScrollViewBase {
         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") {
@@ -149,10 +140,6 @@ export class ScrollView extends ScrollViewBase {
                 childSize = View.measureChild(this, child, layout.makeMeasureSpec(0, layout.UNSPECIFIED), heightMeasureSpec);
             }
 
-            const w = layout.toDeviceIndependentPixels(childSize.measuredWidth);
-            const h = layout.toDeviceIndependentPixels(childSize.measuredHeight);
-            this.nativeViewProtected.contentSize = CGSizeMake(w, h);
-
             this._contentMeasuredWidth = Math.max(childSize.measuredWidth, this.effectiveMinWidth);
             this._contentMeasuredHeight = Math.max(childSize.measuredHeight, this.effectiveMinHeight);
         }
@@ -164,25 +151,34 @@ export class ScrollView extends ScrollViewBase {
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number): void {
-        const width = (right - left);
-        const height = (bottom - top);
+        const insets = this.getSafeAreaInsets();
+        let width = (right - left - insets.right - insets.left);
+        let height = (bottom - top - insets.bottom - insets.top);
 
-        let verticalInset: number;
         const nativeView = this.nativeViewProtected;
-        const inset = nativeView.adjustedContentInset;
-        // Prior iOS 11
-        if (inset === undefined) {
-            verticalInset = -layout.toDevicePixels(nativeView.contentOffset.y);
-            verticalInset += getTabBarHeight(this);
-        } else {
-            verticalInset = layout.toDevicePixels(inset.bottom + inset.top);
+
+        if (majorVersion > 10) {
+            // Disable automatic adjustment of scroll view insets
+            // Consider exposing this as property with all 4 modes
+            // https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior
+            nativeView.contentInsetAdjustmentBehavior = 2;
         }
 
+        let scrollWidth = width;
+        let scrollHeight = height;
         if (this.orientation === "horizontal") {
-            View.layoutChild(this, this.layoutView, 0, 0, Math.max(this._contentMeasuredWidth, width), height - verticalInset);
-        } else {
-            View.layoutChild(this, this.layoutView, 0, 0, width, Math.max(this._contentMeasuredHeight, height - verticalInset));
+            scrollWidth = Math.max(this._contentMeasuredWidth + insets.left + insets.right, width);
+            scrollHeight = height + insets.top + insets.bottom;
+            width = Math.max(this._contentMeasuredWidth, width);
         }
+        else {
+            scrollHeight = Math.max(this._contentMeasuredHeight + insets.top + insets.bottom, height);
+            scrollWidth = width + insets.left + insets.right;
+            height = Math.max(this._contentMeasuredHeight, height);
+        }
+
+        nativeView.contentSize = CGSizeMake(layout.toDeviceIndependentPixels(scrollWidth), layout.toDeviceIndependentPixels(scrollHeight));
+        View.layoutChild(this, this.layoutView, insets.left, insets.top, insets.left + width, insets.top + height);
     }
 
     public _onOrientationChanged() {
diff --git a/tns-core-modules/ui/web-view/web-view-common.ts b/tns-core-modules/ui/web-view/web-view-common.ts
index 62702b7ba..d7457524b 100644
--- a/tns-core-modules/ui/web-view/web-view-common.ts
+++ b/tns-core-modules/ui/web-view/web-view-common.ts
@@ -1,5 +1,5 @@
 import { WebView as WebViewDefinition, LoadEventData, NavigationType } from ".";
-import { View, Property, EventData, CSSType } from "../core/view";
+import { ContainerView, Property, EventData, CSSType } from "../core/view";
 import { File, knownFolders, path } from "../../file-system";
 
 export { File, knownFolders, path, NavigationType };
@@ -8,7 +8,7 @@ export * from "../core/view";
 export const srcProperty = new Property<WebViewBase, string>({ name: "src" });
 
 @CSSType("WebView")
-export abstract class WebViewBase extends View implements WebViewDefinition {
+export abstract class WebViewBase extends ContainerView implements WebViewDefinition {
     public static loadStartedEvent = "loadStarted";
     public static loadFinishedEvent = "loadFinished";