From f7dfcb086c4313e2cb0b41b5635f365da7d50958 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <Vasil.Chimev@gmail.com>
Date: Fri, 10 Aug 2018 15:40:29 +0300
Subject: [PATCH] test(safe-area): update application

Update styles -> `app.css`.
Update structure -> `home/home-page.xml`.
Add Grid + Wrap examples.
---
 e2e/safe-area/README.md                       |  10 ++
 e2e/safe-area/app/app.css                     |  25 +++
 .../component/action-bar/component-page.xml   |   2 +-
 e2e/safe-area/app/component/component-page.ts |   2 +-
 .../component/fragments/label-fragment.xml    |   2 +-
 .../no-action-bar/component-page.xml          |   3 +-
 .../gridlayout-3x3-nested-grid-page.xml       |   6 +-
 .../gridlayout-3x3-nested-hstack-page.xml     |   6 +-
 .../gridlayout-3x3-nested-vstack-page.xml     |   6 +-
 .../action-bar/gridlayout-3x3-page.xml        |   6 +-
 .../fragments/grid-3x3-fragment.xml           |   2 +-
 .../grid-3x3-nested-grid-fragment.xml         |   2 +-
 .../grid-3x3-nested-hstack-fragment.xml       |   2 +-
 .../grid-3x3-nested-vstack-fragment.xml       |   2 +-
 .../app/gridlayout/gridlayout-page.xml        |  50 +++---
 e2e/safe-area/app/home/home-page.xml          |   7 +-
 .../grid-3x3-nested-listview-page.xml         |   6 +-
 .../listview-nested-grid-3x3-page.xml         |   6 +-
 .../listview-nested-hstack-page.xml           |   6 +-
 .../listview-nested-vstack-page.xml           |   6 +-
 .../app/listview/action-bar/listview-page.xml |   6 +-
 .../grid-3x3-nested-listview-fragment.ts      |   5 +-
 .../grid-3x3-nested-listview-fragment.xml     |   2 +-
 .../fragments/listview-fragment-view-model.ts |   2 +-
 .../listview/fragments/listview-fragment.ts   |   5 +-
 .../listview/fragments/listview-fragment.xml  |   2 +-
 .../listview-nested-grid-3x3-fragment.ts      |   5 +-
 .../listview-nested-grid-3x3-fragment.xml     |   4 +-
 .../listview-nested-hstack-fragment.ts        |   4 +-
 .../listview-nested-hstack-fragment.xml       |   4 +-
 .../listview-nested-vstack-fragment.ts        |   4 +-
 .../listview-nested-vstack-fragment.xml       |   4 +-
 e2e/safe-area/app/listview/listview-page.xml  |   8 +-
 .../grid-3x3-hscroll-hstack-page.xml          |   6 +-
 .../grid-3x3-vscroll-vstack-page.xml          |   6 +-
 .../action-bar/hscroll-grid-page.xml          |   2 +-
 .../action-bar/hscroll-hstack-page.xml        |   6 +-
 .../action-bar/hscroll-hwrap-page.xml         |   6 +-
 .../action-bar/hscroll-vwrap-page.xml         |   6 +-
 .../action-bar/vscroll-grid-page.xml          |   2 +-
 .../action-bar/vscroll-hwrap-page.xml         |   6 +-
 .../action-bar/vscroll-vstack-page.xml        |   6 +-
 .../action-bar/vscroll-vwrap-page.xml         |   6 +-
 .../grid-3x3-hscroll-hstack-fragment.xml      |   2 +-
 .../grid-3x3-vscroll-vstack-fragment.xml      |   2 +-
 .../fragments/hscroll-grid-fragment.xml       |   4 +-
 .../fragments/hscroll-hstack-fragment.xml     |   2 +-
 .../fragments/hscroll-hwrap-fragment.xml      |   4 +-
 .../fragments/hscroll-vwrap-fragment.xml      |   4 +-
 .../fragments/vscroll-grid-fragment.xml       |   4 +-
 .../fragments/vscroll-hwrap-fragment.xml      |   4 +-
 .../fragments/vscroll-vstack-fragment.xml     |   2 +-
 .../fragments/vscroll-vwrap-fragment.xml      |   4 +-
 .../app/scrollview/scrollview-page.xml        |  58 +++----
 .../action-bar/hstack-nested-hstack-page.xml  |   8 +-
 .../action-bar/hstack-nested-vstack-page.xml  |   8 +-
 .../action-bar/hstack-page.xml                |   8 +-
 .../action-bar/vstack-nested-hstack-page.xml  |   8 +-
 .../action-bar/vstack-nested-vstack-page.xml  |   8 +-
 .../action-bar/vstack-page.xml                |   8 +-
 .../fragments/hstack-fragment.xml             |   2 +-
 .../hstack-nested-hstack-fragment.xml         |   2 +-
 .../hstack-nested-vstack-fragment.xml         |   2 +-
 .../fragments/vstack-fragment.xml             |   2 +-
 .../vstack-nested-hstack-fragment.xml         |   2 +-
 .../vstack-nested-vstack-fragment.xml         |   2 +-
 .../hstack-nested-hstack-page.xml             |   2 +-
 .../hstack-nested-vstack-page.xml             |   2 +-
 .../no-action-bar/hstack-page.xml             |   2 +-
 .../vstack-nested-hstack-page.xml             |   2 +-
 .../vstack-nested-vstack-page.xml             |   2 +-
 .../no-action-bar/vstack-page.xml             |   2 +-
 .../app/stacklayout/stacklayout-page.ts       |   8 +
 .../app/stacklayout/stacklayout-page.xml      |  29 ++++
 ...age.xml => grid-3x3-nested-hwrap-page.xml} |   3 +-
 ...age.xml => grid-3x3-nested-vwrap-page.xml} |   3 +-
 .../action-bar/hwrap-nested-vwrap-page.xml    |  10 --
 .../app/wraplayout/action-bar/hwrap-page.xml  |   1 -
 .../action-bar/vwrap-nested-vwrap-page.xml    |  10 --
 .../app/wraplayout/action-bar/vwrap-page.xml  |   1 -
 .../app/wraplayout/docs/hwrap-page.xml        |   2 +-
 .../app/wraplayout/docs/vwrap-page.xml        |   2 +-
 .../grid-3x3-nested-hwrap-fragment.xml        | 155 ++++++++++++++++++
 .../grid-3x3-nested-vwrap-fragment.xml        | 128 +++++++++++++++
 .../wraplayout/fragments/hwrap-fragment.xml   |   4 +-
 .../fragments/hwrap-nested-hwrap-fragment.xml |  42 -----
 .../fragments/hwrap-nested-vwrap-fragment.xml |  42 -----
 .../wraplayout/fragments/vwrap-fragment.xml   |   4 +-
 .../fragments/vwrap-nested-hwrap-fragment.xml |  42 -----
 .../fragments/vwrap-nested-vwrap-fragment.xml |  42 -----
 .../grid-3x3-nested-hwrap-page.xml            |   6 +
 .../grid-3x3-nested-vwrap-page.xml            |   6 +
 .../no-action-bar/hwrap-nested-hwrap-page.xml |   6 -
 .../no-action-bar/hwrap-nested-vwrap-page.xml |   6 -
 .../wraplayout/no-action-bar/hwrap-page.xml   |   1 -
 .../no-action-bar/vwrap-nested-hwrap-page.xml |   6 -
 .../no-action-bar/vwrap-nested-vwrap-page.xml |   6 -
 .../wraplayout/no-action-bar/vwrap-page.xml   |   1 -
 .../app/wraplayout/wraplayout-page.ts         |   2 +-
 .../app/wraplayout/wraplayout-page.xml        |  47 +++---
 100 files changed, 589 insertions(+), 452 deletions(-)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/action-bar/hstack-nested-hstack-page.xml (56%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/action-bar/hstack-nested-vstack-page.xml (56%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/action-bar/hstack-page.xml (51%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/action-bar/vstack-nested-hstack-page.xml (56%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/action-bar/vstack-nested-vstack-page.xml (56%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/action-bar/vstack-page.xml (51%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/fragments/hstack-fragment.xml (95%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/fragments/hstack-nested-hstack-fragment.xml (99%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/fragments/hstack-nested-vstack-fragment.xml (99%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/fragments/vstack-fragment.xml (99%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/fragments/vstack-nested-hstack-fragment.xml (99%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/fragments/vstack-nested-vstack-fragment.xml (99%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/no-action-bar/hstack-nested-hstack-page.xml (81%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/no-action-bar/hstack-nested-vstack-page.xml (81%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/no-action-bar/hstack-page.xml (79%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/no-action-bar/vstack-nested-hstack-page.xml (81%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/no-action-bar/vstack-nested-vstack-page.xml (81%)
 rename e2e/safe-area/app/{gridlayout => stacklayout}/no-action-bar/vstack-page.xml (79%)
 create mode 100644 e2e/safe-area/app/stacklayout/stacklayout-page.ts
 create mode 100644 e2e/safe-area/app/stacklayout/stacklayout-page.xml
 rename e2e/safe-area/app/wraplayout/action-bar/{vwrap-nested-hwrap-page.xml => grid-3x3-nested-hwrap-page.xml} (67%)
 rename e2e/safe-area/app/wraplayout/action-bar/{hwrap-nested-hwrap-page.xml => grid-3x3-nested-vwrap-page.xml} (67%)
 delete mode 100644 e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-vwrap-page.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-vwrap-page.xml
 create mode 100644 e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-hwrap-fragment.xml
 create mode 100644 e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-vwrap-fragment.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/fragments/hwrap-nested-hwrap-fragment.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/fragments/hwrap-nested-vwrap-fragment.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/fragments/vwrap-nested-hwrap-fragment.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/fragments/vwrap-nested-vwrap-fragment.xml
 create mode 100644 e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-hwrap-page.xml
 create mode 100644 e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-vwrap-page.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-hwrap-page.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-vwrap-page.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-hwrap-page.xml
 delete mode 100644 e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-vwrap-page.xml

diff --git a/e2e/safe-area/README.md b/e2e/safe-area/README.md
index 6dddbfa25..0c7fb99e6 100644
--- a/e2e/safe-area/README.md
+++ b/e2e/safe-area/README.md
@@ -1,3 +1,13 @@
+Colors Legend:
+
+- Page - `background-color: LightGreen;` in `app.css`
+- Component (Label): backgroundColor="Pink"
+- GridLayout - background-color: LightBlue;
+- ListView - background-color: LightCoral;
+- ScrollView - background-color: LightSalmon;
+- StackLayout - background-color: LightPink;
+- WrapLayout - background-color: LightYellow;
+
 Execute Tests
 =============
 
diff --git a/e2e/safe-area/app/app.css b/e2e/safe-area/app/app.css
index ff57461c5..49c333da5 100644
--- a/e2e/safe-area/app/app.css
+++ b/e2e/safe-area/app/app.css
@@ -8,6 +8,31 @@ selectors and properties you can use to style UI components.
 For example, the following CSS rule changes the font size of all UI
 components that have the btn class name.
 */
+
 .btn {
     font-size: 18;
 }
+
+Page {
+    background-color: LightGreen;
+}
+
+.grid {
+    background-color: LightBlue;
+}
+
+.list {
+    background-color: LightCoral;
+}
+
+.scroll {
+    background-color: LightSalmon;
+}
+
+.stack {
+    background-color: LightPink;
+}
+
+.wrap {
+    background-color: LightYellow;
+}
diff --git a/e2e/safe-area/app/component/action-bar/component-page.xml b/e2e/safe-area/app/component/action-bar/component-page.xml
index bd9c95c52..234f224b6 100644
--- a/e2e/safe-area/app/component/action-bar/component-page.xml
+++ b/e2e/safe-area/app/component/action-bar/component-page.xml
@@ -1,5 +1,5 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="component/fragments" backgroundColor="LightGreen">
+    xmlns:fragments="component/fragments">
 
     <ActionBar>
         <Label text="Action Bar"></Label>
diff --git a/e2e/safe-area/app/component/component-page.ts b/e2e/safe-area/app/component/component-page.ts
index c651c4d84..f7c751c11 100644
--- a/e2e/safe-area/app/component/component-page.ts
+++ b/e2e/safe-area/app/component/component-page.ts
@@ -1,4 +1,4 @@
-import { View, EventData } from "tns-core-modules/ui/core/view/view";
+import { View, EventData } from "tns-core-modules/ui/core/view";
 
 export function onNavigate(args: EventData) {
     const view = args.object as View;
diff --git a/e2e/safe-area/app/component/fragments/label-fragment.xml b/e2e/safe-area/app/component/fragments/label-fragment.xml
index 8d629b6fb..d4c3a3ef0 100644
--- a/e2e/safe-area/app/component/fragments/label-fragment.xml
+++ b/e2e/safe-area/app/component/fragments/label-fragment.xml
@@ -1 +1 @@
-<Label text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog." backgroundColor="LightBlue"></Label>
+<Label text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog." backgroundColor="Pink"></Label>
diff --git a/e2e/safe-area/app/component/no-action-bar/component-page.xml b/e2e/safe-area/app/component/no-action-bar/component-page.xml
index 9ccb603b2..26f269872 100644
--- a/e2e/safe-area/app/component/no-action-bar/component-page.xml
+++ b/e2e/safe-area/app/component/no-action-bar/component-page.xml
@@ -1,5 +1,6 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="component/fragments" actionBarHidden="true" backgroundColor="LightGreen">
+    xmlns:fragments="component/fragments"
+    actionBarHidden="true">
 
     <fragments:label-fragment></fragments:label-fragment>
 
diff --git a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-grid-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-grid-page.xml
index eb38733d3..05e790ef8 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-grid-page.xml
+++ b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-grid-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-nested-grid-fragment></fragments:grid-3x3-nested-grid-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-hstack-page.xml
index f97322d22..af63fecf8 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-hstack-page.xml
+++ b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-nested-hstack-fragment></fragments:grid-3x3-nested-hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-vstack-page.xml
index 884cbe4d4..d37747270 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-vstack-page.xml
+++ b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-nested-vstack-fragment></fragments:grid-3x3-nested-vstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-page.xml
index 9557cd7fc..fbd6e75a1 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-page.xml
+++ b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-fragment></fragments:grid-3x3-fragment>
diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-fragment.xml
index 677b74293..b05635344 100644
--- a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-fragment.xml
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="grid">
     <Label row="0" col="0" text="overflowing text, overflowing text"></Label>
     <Label row="0" col="1" text="overflowing text, overflowing text"></Label>
     <Label row="0" col="2" text="overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml
index d7f5198c2..2fd6f06cc 100644
--- a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="grid">
     <GridLayout row="0" col="0" backgroundColor="SkyBlue">
         <Label text="overflowing text, overflowing text"></Label>
     </GridLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml
index 338ff9e4c..64e1fa848 100644
--- a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="grid">
     <StackLayout row="0" col="0" orientation="horizontal" backgroundColor="SkyBlue">
         <Label text="123"></Label>
         <Label text="456"></Label>
diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml
index 9769d3d66..cd9cca673 100644
--- a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="grid">
     <StackLayout row="0" col="0" backgroundColor="SkyBlue">
         <Label text="overflowing text, overflowing text"></Label>
         <Label text="overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-page.xml b/e2e/safe-area/app/gridlayout/gridlayout-page.xml
index 3aeca6fed..079c822ca 100644
--- a/e2e/safe-area/app/gridlayout/gridlayout-page.xml
+++ b/e2e/safe-area/app/gridlayout/gridlayout-page.xml
@@ -1,35 +1,25 @@
 <Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+
+    <ActionBar>
+        <Label text="GridLayout Examples"></Label>
     </ActionBar>
 
-    <StackLayout>
-        <StackLayout>
-            <Label text="Pages w/ ActionBar"></Label>
-            <Button text="Grid 3x3" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-page" />
-            <Button text="Grid 3x3 Nested Grid" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-nested-grid-page" />
-            <Button text="Grid 3x3 Nested VStack" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-nested-vstack-page" />
-            <Button text="Grid 3x3 Nested HStack" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-nested-hstack-page" />
-            <Button text="VStack" tap="onNavigate" route="gridlayout/action-bar/vstack-page" />
-            <Button text="VStack Nested VStack" tap="onNavigate" route="gridlayout/action-bar/vstack-nested-vstack-page" />
-            <Button text="VStack Nested HStack" tap="onNavigate" route="gridlayout/action-bar/vstack-nested-hstack-page" />
-            <Button text="HStack" tap="onNavigate" route="gridlayout/action-bar/hstack-page" />
-            <Button text="HStack Nested VStack" tap="onNavigate" route="gridlayout/action-bar/hstack-nested-vstack-page" />
-            <Button text="HStack Nested HStack" tap="onNavigate" route="gridlayout/action-bar/hstack-nested-hstack-page" />
+    <ScrollView>
+        <StackLayout horizontalAlignment="center">
+            <StackLayout>
+                <Label text="Pages w/ ActionBar"></Label>
+                <Button text="Grid 3x3" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-page" />
+                <Button text="Grid 3x3 Nested Grid" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-nested-grid-page" />
+                <Button text="Grid 3x3 Nested HStack" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-nested-hstack-page" />
+                <Button text="Grid 3x3 Nested VStack" tap="onNavigate" route="gridlayout/action-bar/gridlayout-3x3-nested-vstack-page" />
+            </StackLayout>
+            <StackLayout>
+                <Label text="Pages w/o ActionBar"></Label>
+                <Button text="Grid 3x3" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-page" />
+                <Button text="Grid 3x3 Nested Grid" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-nested-grid-page" />
+                <Button text="Grid 3x3 Nested HStack" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-nested-hstack-page" />
+                <Button text="Grid 3x3 Nested VStack" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-nested-vstack-page" />
+            </StackLayout>
         </StackLayout>
-        <StackLayout>
-            <Label text="Pages w/o ActionBar"></Label>
-            <Button text="Grid 3x3" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-page" />
-            <Button text="Grid 3x3 Nested Grid" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-nested-grid-page" />
-            <Button text="Grid 3x3 Nested VStack" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-nested-vstack-page" />
-            <Button text="Grid 3x3 Nested HStack" tap="onNavigate" route="gridlayout/no-action-bar/gridlayout-3x3-nested-hstack-page" />
-            <Button text="VStack" tap="onNavigate" route="gridlayout/no-action-bar/vstack-page" />
-            <Button text="VStack Nested VStack" tap="onNavigate" route="gridlayout/no-action-bar/vstack-nested-vstack-page" />
-            <Button text="VStack Nested HStack" tap="onNavigate" route="gridlayout/no-action-bar/vstack-nested-hstack-page" />
-            <Button text="HStack" tap="onNavigate" route="gridlayout/no-action-bar/hstack-page" />
-            <Button text="HStack Nested VStack" tap="onNavigate" route="gridlayout/no-action-bar/hstack-nested-vstack-page" />
-            <Button text="HStack Nested HStack" tap="onNavigate" route="gridlayout/no-action-bar/hstack-nested-hstack-page" />
-        </StackLayout>
-    </StackLayout>
+    </ScrollView>
 </Page>
diff --git a/e2e/safe-area/app/home/home-page.xml b/e2e/safe-area/app/home/home-page.xml
index 319617af7..0ca8f3271 100644
--- a/e2e/safe-area/app/home/home-page.xml
+++ b/e2e/safe-area/app/home/home-page.xml
@@ -1,15 +1,16 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd">
 
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    <ActionBar>
+        <Label text="Home"></Label>
     </ActionBar>
 
     <ScrollView>
         <StackLayout>
             <Button text="Component Examples" tap="onNavigate" route="component/component-page"></Button>
             <Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page"></Button>
-            <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
             <Button text="ListView Examples" tap="onNavigate" route="listview/listview-page" />
+            <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
+            <Button text="StackLayout Examples" tap="onNavigate" route="stacklayout/stacklayout-page"></Button>
             <Button text="WrapLayout Examples" tap="onNavigate" route="wraplayout/wraplayout-page"></Button>
         </StackLayout>
     </ScrollView>
diff --git a/e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml b/e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml
index 5c50028a3..9a45b7d8b 100644
--- a/e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml
+++ b/e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="listview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ListView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
diff --git a/e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml b/e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml
index cd84ab719..a5c3d5f5e 100644
--- a/e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml
+++ b/e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="listview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ListView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
diff --git a/e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml b/e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml
index cb708c1cf..8a94c1175 100644
--- a/e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml
+++ b/e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="listview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ListView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
diff --git a/e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml b/e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml
index eb1ab04c7..70939bd4a 100644
--- a/e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml
+++ b/e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="listview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ListView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
diff --git a/e2e/safe-area/app/listview/action-bar/listview-page.xml b/e2e/safe-area/app/listview/action-bar/listview-page.xml
index 2a6d88f2e..6352ec8e1 100644
--- a/e2e/safe-area/app/listview/action-bar/listview-page.xml
+++ b/e2e/safe-area/app/listview/action-bar/listview-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="listview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ListView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:listview-fragment></fragments:listview-fragment>
diff --git a/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts b/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts
index e2e1a66b4..ce668a163 100644
--- a/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts
+++ b/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts
@@ -1,6 +1,5 @@
-import { Page } from "ui/page";
-
-import { ListViewViewModel } from "./listview-fragment-view-model";
+import { Page } from "tns-core-modules/ui/page";
+import { ListViewViewModel } from "~/listview/fragments/listview-fragment-view-model";
 
 export function onLoaded(args) {
     const page = <Page>args.object;
diff --git a/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml b/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml
index f50cf66bd..74ae8b3ec 100644
--- a/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml
+++ b/e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="list">
     <ListView row="0" col="0" items="{{ items }}" loaded="onLoaded"  backgroundColor="SkyBlue">
         <ListView.itemTemplate>
             <Label text="{{ text }}"></Label>
diff --git a/e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts b/e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts
index 86da6c3e1..29388725b 100644
--- a/e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts
+++ b/e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts
@@ -1,4 +1,4 @@
-import { Observable } from "data/observable";
+import { Observable } from "tns-core-modules/data/observable";
 
 export class ListViewViewModel extends Observable {
     items: Array<any>;
diff --git a/e2e/safe-area/app/listview/fragments/listview-fragment.ts b/e2e/safe-area/app/listview/fragments/listview-fragment.ts
index e2e1a66b4..ce668a163 100644
--- a/e2e/safe-area/app/listview/fragments/listview-fragment.ts
+++ b/e2e/safe-area/app/listview/fragments/listview-fragment.ts
@@ -1,6 +1,5 @@
-import { Page } from "ui/page";
-
-import { ListViewViewModel } from "./listview-fragment-view-model";
+import { Page } from "tns-core-modules/ui/page";
+import { ListViewViewModel } from "~/listview/fragments/listview-fragment-view-model";
 
 export function onLoaded(args) {
     const page = <Page>args.object;
diff --git a/e2e/safe-area/app/listview/fragments/listview-fragment.xml b/e2e/safe-area/app/listview/fragments/listview-fragment.xml
index 098b9194e..42e8b65a9 100644
--- a/e2e/safe-area/app/listview/fragments/listview-fragment.xml
+++ b/e2e/safe-area/app/listview/fragments/listview-fragment.xml
@@ -1,4 +1,4 @@
-<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
+<ListView items="{{ items }}" loaded="onLoaded" class="list">
     <ListView.itemTemplate>
         <Label text="{{ text }}"></Label>
     </ListView.itemTemplate>
diff --git a/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts b/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts
index e2e1a66b4..ce668a163 100644
--- a/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts
+++ b/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts
@@ -1,6 +1,5 @@
-import { Page } from "ui/page";
-
-import { ListViewViewModel } from "./listview-fragment-view-model";
+import { Page } from "tns-core-modules/ui/page";
+import { ListViewViewModel } from "~/listview/fragments/listview-fragment-view-model";
 
 export function onLoaded(args) {
     const page = <Page>args.object;
diff --git a/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml b/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml
index 2f40fb846..ad0da042f 100644
--- a/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml
+++ b/e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml
@@ -1,6 +1,6 @@
-<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="Olive">
+<ListView items="{{ items }}" loaded="onLoaded" class="list">
     <ListView.itemTemplate>
-        <GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="Olive">
+        <GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
             <Label row="0" col="0" text="overflowing text, overflowing text"></Label>
             <Label row="0" col="1" text="overflowing text, overflowing text"></Label>
             <Label row="0" col="2" text="overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts b/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts
index e2e1a66b4..c9ebf078f 100644
--- a/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts
+++ b/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts
@@ -1,6 +1,6 @@
-import { Page } from "ui/page";
+import { Page } from "tns-core-modules/ui/page";
 
-import { ListViewViewModel } from "./listview-fragment-view-model";
+import { ListViewViewModel } from "~/listview/fragments/listview-fragment-view-model";
 
 export function onLoaded(args) {
     const page = <Page>args.object;
diff --git a/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml b/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml
index b707c03da..7cd1825f0 100644
--- a/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml
+++ b/e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml
@@ -1,6 +1,6 @@
-<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
+<ListView items="{{ items }}" loaded="onLoaded" class="list">
     <ListView.itemTemplate>
-        <StackLayout orientation="horizontal" backgroundColor="Olive">
+        <StackLayout orientation="horizontal" backgroundColor="Crimson">
             <Label text="{{ shortText }}"></Label>
             <Label text="{{ shortText }}"></Label>
             <Label text="{{ shortText }}"></Label>
diff --git a/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts b/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts
index e2e1a66b4..c9ebf078f 100644
--- a/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts
+++ b/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts
@@ -1,6 +1,6 @@
-import { Page } from "ui/page";
+import { Page } from "tns-core-modules/ui/page";
 
-import { ListViewViewModel } from "./listview-fragment-view-model";
+import { ListViewViewModel } from "~/listview/fragments/listview-fragment-view-model";
 
 export function onLoaded(args) {
     const page = <Page>args.object;
diff --git a/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml b/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml
index 2515787c3..795ea9bd8 100644
--- a/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml
+++ b/e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml
@@ -1,6 +1,6 @@
-<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
+<ListView items="{{ items }}" loaded="onLoaded" class="list">
     <ListView.itemTemplate>
-        <StackLayout backgroundColor="Olive">
+        <StackLayout backgroundColor="Crimson">
             <Label text="{{ text }}"></Label>
             <Label text="{{ text }}"></Label>
             <Label text="{{ text }}"></Label>
diff --git a/e2e/safe-area/app/listview/listview-page.xml b/e2e/safe-area/app/listview/listview-page.xml
index f3c127fca..925a0acbf 100644
--- a/e2e/safe-area/app/listview/listview-page.xml
+++ b/e2e/safe-area/app/listview/listview-page.xml
@@ -2,12 +2,12 @@
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="listview/fragments"
     navigatingTo="onNavigatingTo">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ListView Examples"></Label>
+
+    <ActionBar>
+        <Label text="ListView Examples"></Label>
     </ActionBar>
 
-    <StackLayout>
+    <StackLayout horizontalAlignment="center">
         <StackLayout>
             <Label text="Pages w/ ActionBar"></Label>
             <Button text="ListView" tap="onNavigate" route="listview/action-bar/listview-page" />
diff --git a/e2e/safe-area/app/scrollview/action-bar/grid-3x3-hscroll-hstack-page.xml b/e2e/safe-area/app/scrollview/action-bar/grid-3x3-hscroll-hstack-page.xml
index a8aea4669..0da6df38b 100644
--- a/e2e/safe-area/app/scrollview/action-bar/grid-3x3-hscroll-hstack-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/grid-3x3-hscroll-hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-hscroll-hstack-fragment></fragments:grid-3x3-hscroll-hstack-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/grid-3x3-vscroll-vstack-page.xml b/e2e/safe-area/app/scrollview/action-bar/grid-3x3-vscroll-vstack-page.xml
index 269b5ed20..76190ded6 100644
--- a/e2e/safe-area/app/scrollview/action-bar/grid-3x3-vscroll-vstack-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/grid-3x3-vscroll-vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:grid-3x3-vscroll-vstack-fragment></fragments:grid-3x3-vscroll-vstack-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml b/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml
index 4c980c58b..b3819afca 100644
--- a/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml
@@ -1,7 +1,7 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
+
     <ActionBar>
         <Label text="Action Bar"></Label>
     </ActionBar>
diff --git a/e2e/safe-area/app/scrollview/action-bar/hscroll-hstack-page.xml b/e2e/safe-area/app/scrollview/action-bar/hscroll-hstack-page.xml
index a95b0f3f8..a33228696 100644
--- a/e2e/safe-area/app/scrollview/action-bar/hscroll-hstack-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/hscroll-hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:hscroll-hstack-fragment></fragments:hscroll-hstack-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/hscroll-hwrap-page.xml b/e2e/safe-area/app/scrollview/action-bar/hscroll-hwrap-page.xml
index 58109ae66..8a1a033a6 100644
--- a/e2e/safe-area/app/scrollview/action-bar/hscroll-hwrap-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/hscroll-hwrap-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:hscroll-hwrap-fragment></fragments:hscroll-hwrap-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/hscroll-vwrap-page.xml b/e2e/safe-area/app/scrollview/action-bar/hscroll-vwrap-page.xml
index fa97eda99..28a7f2b2b 100644
--- a/e2e/safe-area/app/scrollview/action-bar/hscroll-vwrap-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/hscroll-vwrap-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:hscroll-vwrap-fragment></fragments:hscroll-vwrap-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml b/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml
index c53fdd38d..2819e5f7f 100644
--- a/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml
@@ -1,7 +1,7 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
+
     <ActionBar>
         <Label text="Action Bar"></Label>
     </ActionBar>
diff --git a/e2e/safe-area/app/scrollview/action-bar/vscroll-hwrap-page.xml b/e2e/safe-area/app/scrollview/action-bar/vscroll-hwrap-page.xml
index 15b5f0f20..159657def 100644
--- a/e2e/safe-area/app/scrollview/action-bar/vscroll-hwrap-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/vscroll-hwrap-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:vscroll-hwrap-fragment></fragments:vscroll-hwrap-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/vscroll-vstack-page.xml b/e2e/safe-area/app/scrollview/action-bar/vscroll-vstack-page.xml
index b10420c5d..7c5328b68 100644
--- a/e2e/safe-area/app/scrollview/action-bar/vscroll-vstack-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/vscroll-vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:vscroll-vstack-fragment></fragments:vscroll-vstack-fragment>
diff --git a/e2e/safe-area/app/scrollview/action-bar/vscroll-vwrap-page.xml b/e2e/safe-area/app/scrollview/action-bar/vscroll-vwrap-page.xml
index a02f3b661..565a0b0ab 100644
--- a/e2e/safe-area/app/scrollview/action-bar/vscroll-vwrap-page.xml
+++ b/e2e/safe-area/app/scrollview/action-bar/vscroll-vwrap-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:fragments="scrollview/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:vscroll-vwrap-fragment></fragments:vscroll-vwrap-fragment>
diff --git a/e2e/safe-area/app/scrollview/fragments/grid-3x3-hscroll-hstack-fragment.xml b/e2e/safe-area/app/scrollview/fragments/grid-3x3-hscroll-hstack-fragment.xml
index 14b8a72b4..a36afd107 100644
--- a/e2e/safe-area/app/scrollview/fragments/grid-3x3-hscroll-hstack-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/grid-3x3-hscroll-hstack-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="scroll">
     <ScrollView row="0" col="0" orientation="horizontal" backgroundColor="SkyBlue">
         <StackLayout orientation="horizontal">
             <Label text="overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/scrollview/fragments/grid-3x3-vscroll-vstack-fragment.xml b/e2e/safe-area/app/scrollview/fragments/grid-3x3-vscroll-vstack-fragment.xml
index c15e116f7..060227ab7 100644
--- a/e2e/safe-area/app/scrollview/fragments/grid-3x3-vscroll-vstack-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/grid-3x3-vscroll-vstack-fragment.xml
@@ -1,4 +1,4 @@
-<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+<GridLayout rows="*, *, *" columns="*, *, *" class="scroll">
     <ScrollView row="0" col="0" backgroundColor="SkyBlue">
         <StackLayout>
             <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml b/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml
index e9b6c999e..807013e48 100644
--- a/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml
@@ -1,5 +1,5 @@
-<ScrollView orientation="horizontal" backgroundColor="LightGreen">
-    <GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="LightBlue">
+<ScrollView orientation="horizontal" class="scroll">
+    <GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="CadetBlue">
         <StackLayout row="0" col="0" backgroundColor="SkyBlue">
             <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
             <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
diff --git a/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml b/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml
index b5c8cb337..648c681d8 100644
--- a/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml
@@ -1,4 +1,4 @@
-<ScrollView orientation="horizontal" backgroundColor="BurlyWood">
+<ScrollView orientation="horizontal" class="scroll">
     <StackLayout orientation="horizontal" backgroundColor="Crimson">
         <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>
diff --git a/e2e/safe-area/app/scrollview/fragments/hscroll-hwrap-fragment.xml b/e2e/safe-area/app/scrollview/fragments/hscroll-hwrap-fragment.xml
index caf12e40e..e4013e431 100644
--- a/e2e/safe-area/app/scrollview/fragments/hscroll-hwrap-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/hscroll-hwrap-fragment.xml
@@ -1,5 +1,5 @@
-<ScrollView orientation="horizontal" backgroundColor="BurlyWood">
-    <WrapLayout orientation="horizontal" backgroundColor="LightGreen">
+<ScrollView orientation="horizontal" class="scroll">
+    <WrapLayout orientation="horizontal" backgroundColor="Orchid">
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
diff --git a/e2e/safe-area/app/scrollview/fragments/hscroll-vwrap-fragment.xml b/e2e/safe-area/app/scrollview/fragments/hscroll-vwrap-fragment.xml
index 109a691f7..dab852efb 100644
--- a/e2e/safe-area/app/scrollview/fragments/hscroll-vwrap-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/hscroll-vwrap-fragment.xml
@@ -1,5 +1,5 @@
-<ScrollView orientation="horizontal" backgroundColor="BurlyWood">
-    <WrapLayout orientation="vertical" backgroundColor="LightGreen">
+<ScrollView orientation="horizontal" class="scroll">
+    <WrapLayout orientation="vertical" backgroundColor="Orchid">
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
diff --git a/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml b/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml
index 723ab2d5a..2aecefaec 100644
--- a/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml
@@ -1,5 +1,5 @@
-<ScrollView orientation="vertical" backgroundColor="LightGreen">
-    <GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="LightBlue">
+<ScrollView orientation="vertical" class="scroll">
+    <GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="CadetBlue">
         <StackLayout row="0" col="0" backgroundColor="SkyBlue">
             <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
             <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
diff --git a/e2e/safe-area/app/scrollview/fragments/vscroll-hwrap-fragment.xml b/e2e/safe-area/app/scrollview/fragments/vscroll-hwrap-fragment.xml
index 1b678b505..147066409 100644
--- a/e2e/safe-area/app/scrollview/fragments/vscroll-hwrap-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/vscroll-hwrap-fragment.xml
@@ -1,5 +1,5 @@
-<ScrollView backgroundColor="BurlyWood">
-    <WrapLayout orientation="vertical" backgroundColor="LightGreen">
+<ScrollView class="scroll">
+    <WrapLayout orientation="vertical" backgroundColor="Orchid">
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
diff --git a/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml b/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml
index 7212dc70a..43f1caf15 100644
--- a/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml
@@ -1,4 +1,4 @@
-<ScrollView backgroundColor="BurlyWood">
+<ScrollView class="scroll">
     <StackLayout backgroundColor="Crimson">
         <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>
diff --git a/e2e/safe-area/app/scrollview/fragments/vscroll-vwrap-fragment.xml b/e2e/safe-area/app/scrollview/fragments/vscroll-vwrap-fragment.xml
index 6b1a8e196..086bdd370 100644
--- a/e2e/safe-area/app/scrollview/fragments/vscroll-vwrap-fragment.xml
+++ b/e2e/safe-area/app/scrollview/fragments/vscroll-vwrap-fragment.xml
@@ -1,5 +1,5 @@
-<ScrollView backgroundColor="BurlyWood">
-    <WrapLayout orientation="vertical" backgroundColor="LightGreen">
+<ScrollView class="scroll">
+    <WrapLayout orientation="vertical" backgroundColor="Orchid">
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
         <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
diff --git a/e2e/safe-area/app/scrollview/scrollview-page.xml b/e2e/safe-area/app/scrollview/scrollview-page.xml
index 9174d53ec..ff80dcac9 100644
--- a/e2e/safe-area/app/scrollview/scrollview-page.xml
+++ b/e2e/safe-area/app/scrollview/scrollview-page.xml
@@ -1,35 +1,37 @@
 <Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
     
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+    <ActionBar>
+        <Label text="ScrollView Examples"></Label>
     </ActionBar>
 
-    <StackLayout>
+    <ScrollView>
         <StackLayout horizontalAlignment="center">
-            <Label text="Pages w/ ActionBar"></Label>
-            <Button text="HScroll HStack" tap="onNavigate" route="scrollview/action-bar/hscroll-hstack-page" />
-            <Button text="VScroll VStack" tap="onNavigate" route="scrollview/action-bar/vscroll-vstack-page" />
-            <Button text="HScroll HWrap" tap="onNavigate" route="scrollview/action-bar/hscroll-hwrap-page" />
-            <Button text="VScroll VWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-vwrap-page" />
-            <Button text="HScroll VWrap" tap="onNavigate" route="scrollview/action-bar/hscroll-vwrap-page" />
-            <Button text="VScroll HWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-hwrap-page" />
-            <Button text="HScroll Grid" tap="onNavigate" route="scrollview/action-bar/hscroll-grid-page" />
-            <Button text="VScroll Grid" tap="onNavigate" route="scrollview/action-bar/vscroll-grid-page" />
-            <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-hscroll-hstack-page" />
-            <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-vscroll-vstack-page" />
+            <StackLayout>
+                <Label text="Pages w/ ActionBar"></Label>
+                <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-hscroll-hstack-page" />
+                <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-vscroll-vstack-page" />
+                <Button text="HScroll Grid" tap="onNavigate" route="scrollview/action-bar/hscroll-grid-page" />
+                <Button text="HScroll HStack" tap="onNavigate" route="scrollview/action-bar/hscroll-hstack-page" />
+                <Button text="HScroll VWrap" tap="onNavigate" route="scrollview/action-bar/hscroll-vwrap-page" />
+                <Button text="HScroll HWrap" tap="onNavigate" route="scrollview/action-bar/hscroll-hwrap-page" />
+                <Button text="VScroll Grid" tap="onNavigate" route="scrollview/action-bar/vscroll-grid-page" />
+                <Button text="VScroll HWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-hwrap-page" />
+                <Button text="VScroll VStack" tap="onNavigate" route="scrollview/action-bar/vscroll-vstack-page" />
+                <Button text="VScroll VWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-vwrap-page" />
+            </StackLayout>
+            <StackLayout>
+                <Label text="Pages w/o ActionBar"></Label>
+                <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-hscroll-hstack-page" />
+                <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-vscroll-vstack-page" />
+                <Button text="HScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/hscroll-grid-page" />
+                <Button text="HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hstack-page" />
+                <Button text="HScroll HWrap" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hwrap-page" />
+                <Button text="HScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/hscroll-vwrap-page" />
+                <Button text="VScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/vscroll-grid-page" />
+                <Button text="VScroll HWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-hwrap-page" />
+                <Button text="VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vstack-page" />
+                <Button text="VScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vwrap-page" />
+            </StackLayout>
         </StackLayout>
-        <StackLayout horizontalAlignment="center">
-            <Label text="Pages w/o ActionBar"></Label>
-            <Button text="HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hstack-page" />
-            <Button text="VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vstack-page" />
-            <Button text="HScroll HWrap" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hwrap-page" />
-            <Button text="VScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vwrap-page" />
-            <Button text="HScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/hscroll-vwrap-page" />
-            <Button text="VScroll HWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-hwrap-page" />
-            <Button text="HScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/hscroll-grid-page" />
-            <Button text="VScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/vscroll-grid-page" />
-            <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-hscroll-hstack-page" />
-            <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-vscroll-vstack-page" />
-        </StackLayout>
-    </StackLayout>
+    </ScrollView>
 </Page>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/hstack-nested-hstack-page.xml b/e2e/safe-area/app/stacklayout/action-bar/hstack-nested-hstack-page.xml
similarity index 56%
rename from e2e/safe-area/app/gridlayout/action-bar/hstack-nested-hstack-page.xml
rename to e2e/safe-area/app/stacklayout/action-bar/hstack-nested-hstack-page.xml
index e86a4d2f1..bb41bf628 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/hstack-nested-hstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/action-bar/hstack-nested-hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    xmlns:fragments="stacklayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:hstack-nested-hstack-fragment></fragments:hstack-nested-hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/hstack-nested-vstack-page.xml b/e2e/safe-area/app/stacklayout/action-bar/hstack-nested-vstack-page.xml
similarity index 56%
rename from e2e/safe-area/app/gridlayout/action-bar/hstack-nested-vstack-page.xml
rename to e2e/safe-area/app/stacklayout/action-bar/hstack-nested-vstack-page.xml
index dc617dca1..a627dc400 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/hstack-nested-vstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/action-bar/hstack-nested-vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    xmlns:fragments="stacklayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:hstack-nested-vstack-fragment></fragments:hstack-nested-vstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/hstack-page.xml b/e2e/safe-area/app/stacklayout/action-bar/hstack-page.xml
similarity index 51%
rename from e2e/safe-area/app/gridlayout/action-bar/hstack-page.xml
rename to e2e/safe-area/app/stacklayout/action-bar/hstack-page.xml
index 0ee3e1319..b5a8fac3a 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/hstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/action-bar/hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    xmlns:fragments="stacklayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:hstack-fragment></fragments:hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/vstack-nested-hstack-page.xml b/e2e/safe-area/app/stacklayout/action-bar/vstack-nested-hstack-page.xml
similarity index 56%
rename from e2e/safe-area/app/gridlayout/action-bar/vstack-nested-hstack-page.xml
rename to e2e/safe-area/app/stacklayout/action-bar/vstack-nested-hstack-page.xml
index 8799f213e..4da5665a4 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/vstack-nested-hstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/action-bar/vstack-nested-hstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    xmlns:fragments="stacklayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:vstack-nested-hstack-fragment></fragments:vstack-nested-hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/vstack-nested-vstack-page.xml b/e2e/safe-area/app/stacklayout/action-bar/vstack-nested-vstack-page.xml
similarity index 56%
rename from e2e/safe-area/app/gridlayout/action-bar/vstack-nested-vstack-page.xml
rename to e2e/safe-area/app/stacklayout/action-bar/vstack-nested-vstack-page.xml
index 2c6d7cde8..311c87697 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/vstack-nested-vstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/action-bar/vstack-nested-vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    xmlns:fragments="stacklayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:vstack-nested-vstack-fragment></fragments:vstack-nested-vstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/action-bar/vstack-page.xml b/e2e/safe-area/app/stacklayout/action-bar/vstack-page.xml
similarity index 51%
rename from e2e/safe-area/app/gridlayout/action-bar/vstack-page.xml
rename to e2e/safe-area/app/stacklayout/action-bar/vstack-page.xml
index 73d980fd8..e95f26ad7 100644
--- a/e2e/safe-area/app/gridlayout/action-bar/vstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/action-bar/vstack-page.xml
@@ -1,9 +1,9 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
+    xmlns:fragments="stacklayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
     </ActionBar>
 
     <fragments:vstack-fragment></fragments:vstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml b/e2e/safe-area/app/stacklayout/fragments/hstack-fragment.xml
similarity index 95%
rename from e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml
rename to e2e/safe-area/app/stacklayout/fragments/hstack-fragment.xml
index 01c994567..74d6c2d65 100644
--- a/e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml
+++ b/e2e/safe-area/app/stacklayout/fragments/hstack-fragment.xml
@@ -1,4 +1,4 @@
-<StackLayout orientation="horizontal" backgroundColor="Crimson">
+<StackLayout orientation="horizontal" class="stack">
     <Label text="123"></Label>
     <Label text="456"></Label>
     <Label text="789"></Label>
diff --git a/e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml b/e2e/safe-area/app/stacklayout/fragments/hstack-nested-hstack-fragment.xml
similarity index 99%
rename from e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml
rename to e2e/safe-area/app/stacklayout/fragments/hstack-nested-hstack-fragment.xml
index f3dd7c07f..3c0690028 100644
--- a/e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml
+++ b/e2e/safe-area/app/stacklayout/fragments/hstack-nested-hstack-fragment.xml
@@ -1,4 +1,4 @@
-<StackLayout orientation="horizontal" backgroundColor="Crimson">
+<StackLayout orientation="horizontal" class="stack">
     <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
         <Label text="123"></Label>
         <Label text="456"></Label>
diff --git a/e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml b/e2e/safe-area/app/stacklayout/fragments/hstack-nested-vstack-fragment.xml
similarity index 99%
rename from e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml
rename to e2e/safe-area/app/stacklayout/fragments/hstack-nested-vstack-fragment.xml
index 062867c31..56e163cd4 100644
--- a/e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml
+++ b/e2e/safe-area/app/stacklayout/fragments/hstack-nested-vstack-fragment.xml
@@ -1,4 +1,4 @@
-<StackLayout orientation="horizontal" backgroundColor="Crimson">
+<StackLayout orientation="horizontal" class="stack">
     <StackLayout backgroundColor="GoldenRod">
         <Label text="overflowing text, overflowing text"></Label>
         <Label text="overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/gridlayout/fragments/vstack-fragment.xml b/e2e/safe-area/app/stacklayout/fragments/vstack-fragment.xml
similarity index 99%
rename from e2e/safe-area/app/gridlayout/fragments/vstack-fragment.xml
rename to e2e/safe-area/app/stacklayout/fragments/vstack-fragment.xml
index 1e2ed4c3b..844ac4e3e 100644
--- a/e2e/safe-area/app/gridlayout/fragments/vstack-fragment.xml
+++ b/e2e/safe-area/app/stacklayout/fragments/vstack-fragment.xml
@@ -1,4 +1,4 @@
-<StackLayout backgroundColor="Crimson">
+<StackLayout class="stack">
     <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>
diff --git a/e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml b/e2e/safe-area/app/stacklayout/fragments/vstack-nested-hstack-fragment.xml
similarity index 99%
rename from e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml
rename to e2e/safe-area/app/stacklayout/fragments/vstack-nested-hstack-fragment.xml
index b236ecba1..cbd2bb2a8 100644
--- a/e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml
+++ b/e2e/safe-area/app/stacklayout/fragments/vstack-nested-hstack-fragment.xml
@@ -1,4 +1,4 @@
-<StackLayout backgroundColor="Crimson">
+<StackLayout class="stack">
     <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
         <Label text="overflowing text, overflowing text"></Label>
         <Label text="overflowing text, overflowing text"></Label>
diff --git a/e2e/safe-area/app/gridlayout/fragments/vstack-nested-vstack-fragment.xml b/e2e/safe-area/app/stacklayout/fragments/vstack-nested-vstack-fragment.xml
similarity index 99%
rename from e2e/safe-area/app/gridlayout/fragments/vstack-nested-vstack-fragment.xml
rename to e2e/safe-area/app/stacklayout/fragments/vstack-nested-vstack-fragment.xml
index bc8abdeed..c9fe6b5c1 100644
--- a/e2e/safe-area/app/gridlayout/fragments/vstack-nested-vstack-fragment.xml
+++ b/e2e/safe-area/app/stacklayout/fragments/vstack-nested-vstack-fragment.xml
@@ -1,4 +1,4 @@
-<StackLayout backgroundColor="Crimson">
+<StackLayout class="stack">
     <StackLayout 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>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml b/e2e/safe-area/app/stacklayout/no-action-bar/hstack-nested-hstack-page.xml
similarity index 81%
rename from e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml
rename to e2e/safe-area/app/stacklayout/no-action-bar/hstack-nested-hstack-page.xml
index 982dfeddd..03d0be91c 100644
--- a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/no-action-bar/hstack-nested-hstack-page.xml
@@ -1,6 +1,6 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments"
+    xmlns:fragments="stacklayout/fragments"
     actionBarHidden="true">
 
     <fragments:hstack-nested-hstack-fragment></fragments:hstack-nested-hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml b/e2e/safe-area/app/stacklayout/no-action-bar/hstack-nested-vstack-page.xml
similarity index 81%
rename from e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml
rename to e2e/safe-area/app/stacklayout/no-action-bar/hstack-nested-vstack-page.xml
index 828818223..e408648b8 100644
--- a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/no-action-bar/hstack-nested-vstack-page.xml
@@ -1,6 +1,6 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments"
+    xmlns:fragments="stacklayout/fragments"
     actionBarHidden="true">
 
     <fragments:hstack-nested-vstack-fragment></fragments:hstack-nested-vstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml b/e2e/safe-area/app/stacklayout/no-action-bar/hstack-page.xml
similarity index 79%
rename from e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml
rename to e2e/safe-area/app/stacklayout/no-action-bar/hstack-page.xml
index e52177183..35ae2e1c3 100644
--- a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/no-action-bar/hstack-page.xml
@@ -1,6 +1,6 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments"
+    xmlns:fragments="stacklayout/fragments"
     actionBarHidden="true">
 
     <fragments:hstack-fragment></fragments:hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml b/e2e/safe-area/app/stacklayout/no-action-bar/vstack-nested-hstack-page.xml
similarity index 81%
rename from e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml
rename to e2e/safe-area/app/stacklayout/no-action-bar/vstack-nested-hstack-page.xml
index f49915aef..15d84932b 100644
--- a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/no-action-bar/vstack-nested-hstack-page.xml
@@ -1,6 +1,6 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments"
+    xmlns:fragments="stacklayout/fragments"
     actionBarHidden="true">
 
     <fragments:vstack-nested-hstack-fragment></fragments:vstack-nested-hstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml b/e2e/safe-area/app/stacklayout/no-action-bar/vstack-nested-vstack-page.xml
similarity index 81%
rename from e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml
rename to e2e/safe-area/app/stacklayout/no-action-bar/vstack-nested-vstack-page.xml
index 02b31da6c..32f69d303 100644
--- a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/no-action-bar/vstack-nested-vstack-page.xml
@@ -1,6 +1,6 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments"
+    xmlns:fragments="stacklayout/fragments"
     actionBarHidden="true">
 
     <fragments:vstack-nested-vstack-fragment></fragments:vstack-nested-vstack-fragment>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml b/e2e/safe-area/app/stacklayout/no-action-bar/vstack-page.xml
similarity index 79%
rename from e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml
rename to e2e/safe-area/app/stacklayout/no-action-bar/vstack-page.xml
index 9c17db846..4c6add942 100644
--- a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml
+++ b/e2e/safe-area/app/stacklayout/no-action-bar/vstack-page.xml
@@ -1,6 +1,6 @@
 <Page class="page"
     xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="gridlayout/fragments"
+    xmlns:fragments="stacklayout/fragments"
     actionBarHidden="true">
 
     <fragments:vstack-fragment></fragments:vstack-fragment>
diff --git a/e2e/safe-area/app/stacklayout/stacklayout-page.ts b/e2e/safe-area/app/stacklayout/stacklayout-page.ts
new file mode 100644
index 000000000..c0f982757
--- /dev/null
+++ b/e2e/safe-area/app/stacklayout/stacklayout-page.ts
@@ -0,0 +1,8 @@
+import { View, EventData } from "tns-core-modules/ui/core/view";
+
+export function onNavigate(args: EventData) {
+    const view = args.object as View;
+    const route = view["route"];
+
+    view.page.frame.navigate(route);
+}
\ No newline at end of file
diff --git a/e2e/safe-area/app/stacklayout/stacklayout-page.xml b/e2e/safe-area/app/stacklayout/stacklayout-page.xml
new file mode 100644
index 000000000..2dd99c16f
--- /dev/null
+++ b/e2e/safe-area/app/stacklayout/stacklayout-page.xml
@@ -0,0 +1,29 @@
+<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar>
+        <Label text="StackLayout Examples"></Label>
+    </ActionBar>
+
+    <ScrollView>
+        <StackLayout horizontalAlignment="center">
+            <StackLayout>
+                <Label text="Pages w/ ActionBar"></Label>
+                <Button text="HStack" tap="onNavigate" route="stacklayout/action-bar/hstack-page" />
+                <Button text="HStack Nested HStack" tap="onNavigate" route="stacklayout/action-bar/hstack-nested-hstack-page" />
+                <Button text="HStack Nested VStack" tap="onNavigate" route="stacklayout/action-bar/hstack-nested-vstack-page" />
+                <Button text="VStack" tap="onNavigate" route="stacklayout/action-bar/vstack-page" />
+                <Button text="VStack Nested HStack" tap="onNavigate" route="stacklayout/action-bar/vstack-nested-hstack-page" />
+                <Button text="VStack Nested VStack" tap="onNavigate" route="stacklayout/action-bar/vstack-nested-vstack-page" />
+            </StackLayout>
+            <StackLayout>
+                <Label text="Pages w/o ActionBar"></Label>
+                <Button text="HStack" tap="onNavigate" route="stacklayout/no-action-bar/hstack-page" />
+                <Button text="HStack Nested HStack" tap="onNavigate" route="stacklayout/no-action-bar/hstack-nested-hstack-page" />
+                <Button text="HStack Nested VStack" tap="onNavigate" route="stacklayout/no-action-bar/hstack-nested-vstack-page" />
+                <Button text="VStack" tap="onNavigate" route="stacklayout/no-action-bar/vstack-page" />
+                <Button text="VStack Nested HStack" tap="onNavigate" route="stacklayout/no-action-bar/vstack-nested-hstack-page" />
+                <Button text="VStack Nested VStack" tap="onNavigate" route="stacklayout/no-action-bar/vstack-nested-vstack-page" />
+            </StackLayout>
+        </StackLayout>
+    </ScrollView>
+</Page>
diff --git a/e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-hwrap-page.xml b/e2e/safe-area/app/wraplayout/action-bar/grid-3x3-nested-hwrap-page.xml
similarity index 67%
rename from e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-hwrap-page.xml
rename to e2e/safe-area/app/wraplayout/action-bar/grid-3x3-nested-hwrap-page.xml
index a9bd96a63..baa10ce22 100644
--- a/e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-hwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/action-bar/grid-3x3-nested-hwrap-page.xml
@@ -5,6 +5,5 @@
         <Label text="Action Bar"></Label>
     </ActionBar>
 
-    <fragments:vwrap-nested-hwrap-fragment></fragments:vwrap-nested-hwrap-fragment>
-
+    <fragments:grid-3x3-nested-hwrap-fragment></fragments:grid-3x3-nested-hwrap-fragment>
 </Page>
diff --git a/e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-hwrap-page.xml b/e2e/safe-area/app/wraplayout/action-bar/grid-3x3-nested-vwrap-page.xml
similarity index 67%
rename from e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-hwrap-page.xml
rename to e2e/safe-area/app/wraplayout/action-bar/grid-3x3-nested-vwrap-page.xml
index 2e60176c3..e2b2f9aaf 100644
--- a/e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-hwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/action-bar/grid-3x3-nested-vwrap-page.xml
@@ -5,6 +5,5 @@
         <Label text="Action Bar"></Label>
     </ActionBar>
 
-    <fragments:hwrap-nested-hwrap-fragment></fragments:hwrap-nested-hwrap-fragment>
-
+    <fragments:grid-3x3-nested-vwrap-fragment></fragments:grid-3x3-nested-vwrap-fragment>
 </Page>
diff --git a/e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-vwrap-page.xml b/e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-vwrap-page.xml
deleted file mode 100644
index a8a4fe194..000000000
--- a/e2e/safe-area/app/wraplayout/action-bar/hwrap-nested-vwrap-page.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="wraplayout/fragments">
-
-    <ActionBar>
-        <Label text="Action Bar"></Label>
-    </ActionBar>
-
-    <fragments:hwrap-nested-vwrap-fragment></fragments:hwrap-nested-vwrap-fragment>
-
-</Page>
diff --git a/e2e/safe-area/app/wraplayout/action-bar/hwrap-page.xml b/e2e/safe-area/app/wraplayout/action-bar/hwrap-page.xml
index 11c173792..8213f8427 100644
--- a/e2e/safe-area/app/wraplayout/action-bar/hwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/action-bar/hwrap-page.xml
@@ -6,5 +6,4 @@
     </ActionBar>
 
     <fragments:hwrap-fragment></fragments:hwrap-fragment>
-
 </Page>
diff --git a/e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-vwrap-page.xml b/e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-vwrap-page.xml
deleted file mode 100644
index b06e4284c..000000000
--- a/e2e/safe-area/app/wraplayout/action-bar/vwrap-nested-vwrap-page.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="wraplayout/fragments">
-
-    <ActionBar>
-        <Label text="Action Bar"></Label>
-    </ActionBar>
-
-    <fragments:vwrap-nested-vwrap-fragment></fragments:vwrap-nested-vwrap-fragment>
-
-</Page>
diff --git a/e2e/safe-area/app/wraplayout/action-bar/vwrap-page.xml b/e2e/safe-area/app/wraplayout/action-bar/vwrap-page.xml
index f6c7f4b2e..822e3fddc 100644
--- a/e2e/safe-area/app/wraplayout/action-bar/vwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/action-bar/vwrap-page.xml
@@ -6,5 +6,4 @@
     </ActionBar>
 
     <fragments:vwrap-fragment></fragments:vwrap-fragment>
-
 </Page>
diff --git a/e2e/safe-area/app/wraplayout/docs/hwrap-page.xml b/e2e/safe-area/app/wraplayout/docs/hwrap-page.xml
index e67b33bb1..de572c3de 100644
--- a/e2e/safe-area/app/wraplayout/docs/hwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/docs/hwrap-page.xml
@@ -1,5 +1,5 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd">
-  <WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
+  <WrapLayout orientation="horizontal" width="210" height="210" class="wrap">
     <Label text="Label 1" width="70" height="70" backgroundColor="red"/>
     <Label text="Label 2" width="70" height="70" backgroundColor="green"/>
     <Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
diff --git a/e2e/safe-area/app/wraplayout/docs/vwrap-page.xml b/e2e/safe-area/app/wraplayout/docs/vwrap-page.xml
index 9238df188..def2b11dc 100644
--- a/e2e/safe-area/app/wraplayout/docs/vwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/docs/vwrap-page.xml
@@ -1,5 +1,5 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd">
-  <WrapLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
+  <WrapLayout orientation="vertical" width="210" height="210" class="wrap">
     <Label text="Label 1" width="70" height="70" backgroundColor="red"/>
     <Label text="Label 2" width="70" height="70" backgroundColor="green"/>
     <Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
diff --git a/e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-hwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-hwrap-fragment.xml
new file mode 100644
index 000000000..90476c442
--- /dev/null
+++ b/e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-hwrap-fragment.xml
@@ -0,0 +1,155 @@
+<GridLayout rows="*, *, *" columns="*, *, *" class="grid">
+    <WrapLayout row="0" col="0" orientation="horizontal" backgroundColor="SkyBlue">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="0" col="1" orientation="horizontal" backgroundColor="Indigo">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="0" col="2" orientation="horizontal" backgroundColor="Crimson">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="1" col="0" orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="1" col="1" orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="1" col="2" orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="2" col="0" orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="2" col="1" orientation="horizontal" backgroundColor="Khaki">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+    <WrapLayout row="2" col="2" orientation="horizontal" backgroundColor="IndianRed">
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+    </WrapLayout>
+</GridLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-vwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-vwrap-fragment.xml
new file mode 100644
index 000000000..49fc9dc56
--- /dev/null
+++ b/e2e/safe-area/app/wraplayout/fragments/grid-3x3-nested-vwrap-fragment.xml
@@ -0,0 +1,128 @@
+<GridLayout rows="*, *, *" columns="*, *, *" class="grid">
+    <WrapLayout row="0" col="0" orientation="vertical" backgroundColor="SkyBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="0" col="1" orientation="vertical" backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="0" col="2" orientation="vertical" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="1" col="0" orientation="vertical" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="1" col="1" orientation="vertical" backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="1" col="2" orientation="vertical" backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="2" col="0" orientation="vertical" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="2" col="1" orientation="vertical" backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+    <WrapLayout row="2" col="2" orientation="vertical" backgroundColor="IndianRed">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </WrapLayout>
+</GridLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/hwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/hwrap-fragment.xml
index f21f7a7f0..b552be91e 100644
--- a/e2e/safe-area/app/wraplayout/fragments/hwrap-fragment.xml
+++ b/e2e/safe-area/app/wraplayout/fragments/hwrap-fragment.xml
@@ -1,4 +1,4 @@
-<WrapLayout orientation="horizontal" backgroundColor="LightGreen">
-    <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" height="100%" backgroundColor="Green"></Button>
+<WrapLayout orientation="horizontal" class="wrap">
+    <Button 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 text="H" backgroundColor="Pink"></Button>
 </WrapLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/hwrap-nested-hwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/hwrap-nested-hwrap-fragment.xml
deleted file mode 100644
index e23f03d2d..000000000
--- a/e2e/safe-area/app/wraplayout/fragments/hwrap-nested-hwrap-fragment.xml
+++ /dev/null
@@ -1,42 +0,0 @@
-<WrapLayout orientation="horizontal" backgroundColor="LightGreen">
-    <WrapLayout orientation="horizontal" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-</WrapLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/hwrap-nested-vwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/hwrap-nested-vwrap-fragment.xml
deleted file mode 100644
index aac3d7366..000000000
--- a/e2e/safe-area/app/wraplayout/fragments/hwrap-nested-vwrap-fragment.xml
+++ /dev/null
@@ -1,42 +0,0 @@
-<WrapLayout orientation="horizontal" backgroundColor="LightGreen">
-    <WrapLayout orientation="vertical" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-</WrapLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/vwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/vwrap-fragment.xml
index f1c2738c8..2a2771ae9 100644
--- a/e2e/safe-area/app/wraplayout/fragments/vwrap-fragment.xml
+++ b/e2e/safe-area/app/wraplayout/fragments/vwrap-fragment.xml
@@ -1,4 +1,4 @@
-<WrapLayout orientation="vertical" backgroundColor="LightGreen">
-    <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" height="100%" backgroundColor="Blue"></Button>
+<WrapLayout orientation="vertical" class="wrap">
+    <Button 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 text="V" backgroundColor="Pink"></Button>
 </WrapLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/vwrap-nested-hwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/vwrap-nested-hwrap-fragment.xml
deleted file mode 100644
index 4719a7aae..000000000
--- a/e2e/safe-area/app/wraplayout/fragments/vwrap-nested-hwrap-fragment.xml
+++ /dev/null
@@ -1,42 +0,0 @@
-<WrapLayout orientation="vertical" backgroundColor="LightGreen">
-    <WrapLayout orientation="horizontal" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="horizontal" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-</WrapLayout>
diff --git a/e2e/safe-area/app/wraplayout/fragments/vwrap-nested-vwrap-fragment.xml b/e2e/safe-area/app/wraplayout/fragments/vwrap-nested-vwrap-fragment.xml
deleted file mode 100644
index 045754a02..000000000
--- a/e2e/safe-area/app/wraplayout/fragments/vwrap-nested-vwrap-fragment.xml
+++ /dev/null
@@ -1,42 +0,0 @@
-<WrapLayout orientation="vertical" backgroundColor="LightGreen">
-    <WrapLayout orientation="vertical" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightPink">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightBlue">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightYellow">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-    <WrapLayout orientation="vertical" backgroundColor="LightGray">
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-        <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Button>
-    </WrapLayout>
-</WrapLayout>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-hwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-hwrap-page.xml
new file mode 100644
index 000000000..0bb6e987b
--- /dev/null
+++ b/e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-hwrap-page.xml
@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="wraplayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-nested-hwrap-fragment></fragments:grid-3x3-nested-hwrap-fragment>
+</Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-vwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-vwrap-page.xml
new file mode 100644
index 000000000..7fd1b0234
--- /dev/null
+++ b/e2e/safe-area/app/wraplayout/no-action-bar/grid-3x3-nested-vwrap-page.xml
@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="wraplayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-nested-vwrap-fragment></fragments:grid-3x3-nested-vwrap-fragment>
+</Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-hwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-hwrap-page.xml
deleted file mode 100644
index a2b30e00f..000000000
--- a/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-hwrap-page.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="wraplayout/fragments" actionBarHidden="true">
-
-    <fragments:hwrap-nested-hwrap-fragment></fragments:hwrap-nested-hwrap-fragment>
-
-</Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-vwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-vwrap-page.xml
deleted file mode 100644
index 5ab457545..000000000
--- a/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-nested-vwrap-page.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="wraplayout/fragments" actionBarHidden="true">
-
-    <fragments:hwrap-nested-vwrap-fragment></fragments:hwrap-nested-vwrap-fragment>
-
-</Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-page.xml
index c548c583a..b5893352a 100644
--- a/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/no-action-bar/hwrap-page.xml
@@ -2,5 +2,4 @@
     xmlns:fragments="wraplayout/fragments" actionBarHidden="true">
 
     <fragments:hwrap-fragment></fragments:hwrap-fragment>
-
 </Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-hwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-hwrap-page.xml
deleted file mode 100644
index 8028389b1..000000000
--- a/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-hwrap-page.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="wraplayout/fragments" actionBarHidden="true">
-
-    <fragments:vwrap-nested-hwrap-fragment></fragments:vwrap-nested-hwrap-fragment>
-
-</Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-vwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-vwrap-page.xml
deleted file mode 100644
index 2b1d2e965..000000000
--- a/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-nested-vwrap-page.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-    xmlns:fragments="wraplayout/fragments" actionBarHidden="true">
-
-    <fragments:vwrap-nested-vwrap-fragment></fragments:vwrap-nested-vwrap-fragment>
-
-</Page>
diff --git a/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-page.xml b/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-page.xml
index 7f566db80..0484f46de 100644
--- a/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-page.xml
+++ b/e2e/safe-area/app/wraplayout/no-action-bar/vwrap-page.xml
@@ -2,5 +2,4 @@
     xmlns:fragments="wraplayout/fragments" actionBarHidden="true">
 
     <fragments:vwrap-fragment></fragments:vwrap-fragment>
-
 </Page>
diff --git a/e2e/safe-area/app/wraplayout/wraplayout-page.ts b/e2e/safe-area/app/wraplayout/wraplayout-page.ts
index c651c4d84..f7c751c11 100644
--- a/e2e/safe-area/app/wraplayout/wraplayout-page.ts
+++ b/e2e/safe-area/app/wraplayout/wraplayout-page.ts
@@ -1,4 +1,4 @@
-import { View, EventData } from "tns-core-modules/ui/core/view/view";
+import { View, EventData } from "tns-core-modules/ui/core/view";
 
 export function onNavigate(args: EventData) {
     const view = args.object as View;
diff --git a/e2e/safe-area/app/wraplayout/wraplayout-page.xml b/e2e/safe-area/app/wraplayout/wraplayout-page.xml
index 929833bda..a57cfbcac 100644
--- a/e2e/safe-area/app/wraplayout/wraplayout-page.xml
+++ b/e2e/safe-area/app/wraplayout/wraplayout-page.xml
@@ -4,30 +4,27 @@
         <Label text="WrapLayout Examples"></Label>
     </ActionBar>
 
-    <StackLayout horizontalAlignment="center">
-        <StackLayout horizontalAlignment="center">
-            <Label text="Pages w/ ActionBar"></Label>
-            <Button text="HWrap" tap="onNavigate" route="wraplayout/action-bar/hwrap-page"></Button>
-            <!-- <Button text="HWrap Nested HWrap" tap="onNavigate" route="wraplayout/action-bar/hwrap-nested-hwrap-page"></Button>
-            <Button text="HWrap Nested VWrap" tap="onNavigate" route="wraplayout/action-bar/hwrap-nested-vwrap-page"></Button> -->
-            <Button text="VWrap" tap="onNavigate" route="wraplayout/action-bar/vwrap-page"></Button>
-            <!-- <Button text="VWrap Nested HWrap" tap="onNavigate" route="wraplayout/action-bar/vwrap-nested-hwrap-page"></Button>
-            <Button text="VWrap Nested VWrap" tap="onNavigate" route="wraplayout/action-bar/vwrap-nested-vwrap-page"></Button> -->
+    <ScrollView>
+        <StackLayout>
+            <StackLayout horizontalAlignment="center">
+                <Label text="Pages w/ ActionBar"></Label>
+                <Button text="Grid 3x3 Nested HWrap" tap="onNavigate" route="wraplayout/action-bar/grid-3x3-nested-hwrap-page"></Button>
+                <Button text="Grid 3x3 Nested VWrap" tap="onNavigate" route="wraplayout/action-bar/grid-3x3-nested-vwrap-page"></Button>
+                <Button text="HWrap" tap="onNavigate" route="wraplayout/action-bar/hwrap-page"></Button>
+                <Button text="VWrap" tap="onNavigate" route="wraplayout/action-bar/vwrap-page"></Button>
+            </StackLayout>
+            <StackLayout horizontalAlignment="center">
+                <Label text="Pages w/o ActionBar"></Label>
+                <Button text="Grid 3x3 Nested HWrap" tap="onNavigate" route="wraplayout/no-action-bar/grid-3x3-nested-hwrap-page"></Button>
+                <Button text="Grid 3x3 Nested VWrap" tap="onNavigate" route="wraplayout/no-action-bar/grid-3x3-nested-vwrap-page"></Button>
+                <Button text="HWrap" tap="onNavigate" route="wraplayout/no-action-bar/hwrap-page"></Button>
+                <Button text="VWrap" tap="onNavigate" route="wraplayout/no-action-bar/vwrap-page"></Button>
+            </StackLayout>
+            <StackLayout horizontalAlignment="center">
+                <Label text="Docs Pages"></Label>
+                <Button text="HWrap" tap="onNavigate" route="wraplayout/docs/hwrap-page"></Button>
+                <Button text="VWrap" tap="onNavigate" route="wraplayout/docs/vwrap-page"></Button>
+            </StackLayout>
         </StackLayout>
-        <StackLayout horizontalAlignment="center">
-            <Label text="Pages w/o ActionBar"></Label>
-            <Button text="HWrap" tap="onNavigate" route="wraplayout/no-action-bar/hwrap-page"></Button>
-            <!-- <Button text="HWrap Nested HWrap" tap="onNavigate" route="wraplayout/no-action-bar/hwrap-nested-hwrap-page"></Button>
-            <Button text="HWrap Nested VWrap" tap="onNavigate" route="wraplayout/no-action-bar/hwrap-nested-vwrap-page"></Button> -->
-            <Button text="VWrap" tap="onNavigate" route="wraplayout/no-action-bar/vwrap-page"></Button>
-            <!-- <Button text="VWrap Nested HWrap" tap="onNavigate" route="wraplayout/no-action-bar/vwrap-nested-hwrap-page"></Button>
-            <Button text="VWrap Nested VWrap" tap="onNavigate" route="wraplayout/no-action-bar/vwrap-nested-vwrap-page"></Button> -->
-        </StackLayout>
-        <StackLayout horizontalAlignment="center">
-            <Label text="Docs Pages"></Label>
-            <Button text="HWrap" tap="onNavigate" route="wraplayout/docs/hwrap-page"></Button>
-            <Button text="VWrap" tap="onNavigate" route="wraplayout/docs/vwrap-page"></Button>
-        </StackLayout>
-    </StackLayout>
-
+    </ScrollView>
 </Page>