add safe area support to flexbox

e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-col-page.xml

@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="flexboxlayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
+    </ActionBar>
+
+    <fragments:flexboxlayout-col-fragment></fragments:flexboxlayout-col-fragment>
+
+</Page>

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

@@ -8,10 +8,12 @@
         <StackLayout>
             <Label text="Pages w/ ActionBar"></Label>
             <Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/action-bar/flexboxlayout-row-page"></Button>
+            <Button text="Flexbox Col" tap="onNavigate" route="flexboxlayout/action-bar/flexboxlayout-col-page"></Button>
         </StackLayout>
         <StackLayout>
             <Label text="Pages w/o ActionBar"></Label>
             <Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/no-action-bar/flexboxlayout-row-page"></Button>
+            <Button text="Flexbox Col" tap="onNavigate" route="flexboxlayout/no-action-bar/flexboxlayout-col-page"></Button>
         </StackLayout>
     </StackLayout>
 

e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-col-fragment.xml

@@ -0,0 +1,11 @@
+<FlexboxLayout flexDirection="column" class="flex">
+    <StackLayout 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 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 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>

e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml

@@ -1,11 +1,11 @@
 <FlexboxLayout flexDirection="row" class="flex">
+    <StackLayout backgroundColor="white">
+        <Label text="Lorem"></Label>
+    </StackLayout>
+    <StackLayout flexGrow="1" backgroundColor="green">
+        <Label text="Lorem"></Label>
+    </StackLayout>
     <StackLayout backgroundColor="red">
-        <Label backgroundColor="#965251" text="Item"></Label>
+        <Label text="Lorem"></Label>
-    </StackLayout>
-    <StackLayout flexGrow="1" class="stack">
-        <Label flexGrow="1" backgroundColor="#d2b29b" text="Flex-Grow 1"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="blue">
-        <Label backgroundColor="#F69256" text="Item"></Label>
     </StackLayout>
 </FlexboxLayout>

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

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

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

@@ -1,4 +1,4 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
 
     <ActionBar>
         <Label text="Home"></Label>
@@ -20,6 +20,7 @@
             <Button text="Expand Examples" tap="onNavigate" route="expand/expand-page"></Button>
             <Button text="Repeater Examples" tap="onNavigate" route="repeater/repeater-page"></Button>
             <Button text="WebView Examples" tap="onNavigate" route="webview/webview-page"></Button>
+            <Button text="Flexbox Examples" tap="onNavigate" route="flexboxlayout/flexboxlayout-page"></Button>
         </StackLayout>
     </ScrollView>
 

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

@@ -944,44 +944,42 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 
     public onLayout(left: number, top: number, right: number, bottom: number) {
         const insets = this.getSafeAreaInsets();
-        left += insets.left;
-        top += insets.top;
-        right -= insets.right;
-        bottom -= insets.bottom;
 
         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) {
+    private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number, insets: { left, top, right, bottom }) {
         // include insets
-        let paddingLeft = this.effectivePaddingLeft + left;
+        let paddingLeft = this.effectivePaddingLeft + insets.left;
-        let paddingRight = this.effectivePaddingRight + right;
+        let paddingTop = this.effectivePaddingTop + insets.top;
+        let paddingRight = this.effectivePaddingRight + insets.right;
+        let paddingBottom = this.effectivePaddingBottom + insets.bottom;
 
         let childLeft;
         let currentViewIndex = 0;
@@ -990,8 +988,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let width = right - left;
 
         // include insets
-        let childBottom = height - this.effectivePaddingBottom;
+        let childBottom = height - paddingBottom;
-        let childTop = this.effectivePaddingTop + top;
+        let childTop = paddingTop;
 
         let childRight;
         this._flexLines.forEach((flexLine, i) => {
@@ -1138,12 +1136,13 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         }
     }
 
-    private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number) {
+    private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number, insets: { left, top, right, bottom }) {
-        let paddingTop = this.effectivePaddingTop;
+        let paddingLeft = this.effectivePaddingLeft + insets.left;
-        let paddingBottom = this.effectivePaddingBottom;
+        let paddingTop = this.effectivePaddingTop + insets.top;
+        let paddingRight = this.effectivePaddingRight + insets.right;
+        let paddingBottom = this.effectivePaddingBottom + insets.bottom;
 
-        let paddingRight = this.effectivePaddingRight;
+        let childLeft = paddingLeft;
-        let childLeft = this.effectivePaddingLeft;
         let currentViewIndex = 0;
 
         let width = right - left;