From 30be10e4deac7c5159e652449cd66eecc7bd8aa9 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Mon, 23 Jul 2018 14:34:37 +0300
Subject: [PATCH] add scrollview safe area examples

---
 .../gridlayout-3x3-nested-grid-page.xml       |   0
 .../gridlayout-3x3-nested-hstack-page.xml     |   0
 .../gridlayout-3x3-nested-vstack-page.xml     |   0
 .../{ => action-bar}/gridlayout-3x3-page.xml  |   0
 .../hstack-nested-hstack-page.xml             |   0
 .../hstack-nested-vstack-page.xml             |   0
 .../{ => action-bar}/hstack-page.xml          |   0
 .../vstack-nested-hstack-page.xml             |   0
 .../vstack-nested-vstack-page.xml             |   0
 .../{ => action-bar}/vstack-page.xml          |   0
 .../app/gridlayout/gridlayout-page.xml        |  36 +++-
 .../gridlayout-3x3-nested-grid-page.xml       |   7 +
 .../gridlayout-3x3-nested-hstack-page.xml     |   7 +
 .../gridlayout-3x3-nested-vstack-page.xml     |   7 +
 .../no-action-bar/gridlayout-3x3-page.xml     |   7 +
 .../hstack-nested-hstack-page.xml             |   7 +
 .../hstack-nested-vstack-page.xml             |   7 +
 .../gridlayout/no-action-bar/hstack-page.xml  |   7 +
 .../vstack-nested-hstack-page.xml             |   7 +
 .../vstack-nested-vstack-page.xml             |   7 +
 .../gridlayout/no-action-bar/vstack-page.xml  |   7 +
 e2e/safe-area/app/home/home-page.xml          |   1 +
 .../grid-3x3-hscroll-hstack-page.xml          |  10 +
 .../grid-3x3-vscroll-vstack-page.xml          |  10 +
 .../action-bar/hscroll-hstack-page.xml        |  10 +
 .../action-bar/vscroll-vstack-page.xml        |  10 +
 .../grid-3x3-hscroll-hstack-fragment.xml      |  65 +++++++
 .../grid-3x3-vscroll-vstack-fragment.xml      | 173 ++++++++++++++++++
 .../fragments/hscroll-hstack-fragment.xml     |   9 +
 .../fragments/vscroll-vstack-fragment.xml     |  86 +++++++++
 .../grid-3x3-hscroll-hstack-page.xml          |   7 +
 .../grid-3x3-vscroll-vstack-page.xml          |   7 +
 .../no-action-bar/hscroll-hstack-page.xml     |   7 +
 .../no-action-bar/vscroll-vstack-page.xml     |   7 +
 .../app/scrollview/scrollview-page.ts         |   8 +
 .../app/scrollview/scrollview-page.xml        |  23 +++
 e2e/safe-area/package.json                    |   6 +-
 37 files changed, 532 insertions(+), 13 deletions(-)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/gridlayout-3x3-nested-grid-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/gridlayout-3x3-nested-hstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/gridlayout-3x3-nested-vstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/gridlayout-3x3-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/hstack-nested-hstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/hstack-nested-vstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/hstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/vstack-nested-hstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/vstack-nested-vstack-page.xml (100%)
 rename e2e/safe-area/app/gridlayout/{ => action-bar}/vstack-page.xml (100%)
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-grid-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-vstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/action-bar/grid-3x3-hscroll-hstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/action-bar/grid-3x3-vscroll-vstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/action-bar/hscroll-hstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/action-bar/vscroll-vstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/fragments/grid-3x3-hscroll-hstack-fragment.xml
 create mode 100644 e2e/safe-area/app/scrollview/fragments/grid-3x3-vscroll-vstack-fragment.xml
 create mode 100644 e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml
 create mode 100644 e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml
 create mode 100644 e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-hscroll-hstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-vscroll-vstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/no-action-bar/hscroll-hstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/no-action-bar/vscroll-vstack-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/scrollview-page.ts
 create mode 100644 e2e/safe-area/app/scrollview/scrollview-page.xml

diff --git a/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-grid-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-grid-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-grid-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-grid-page.xml
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-hstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-hstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-hstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-vstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-vstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-nested-vstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-3x3-page.xml b/e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/gridlayout-3x3-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/gridlayout-3x3-page.xml
diff --git a/e2e/safe-area/app/gridlayout/hstack-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/hstack-nested-hstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/hstack-nested-hstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/hstack-nested-hstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/hstack-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/hstack-nested-vstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/hstack-nested-vstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/hstack-nested-vstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/hstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/hstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/hstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/hstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/vstack-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/vstack-nested-hstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/vstack-nested-hstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/vstack-nested-hstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/vstack-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/vstack-nested-vstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/vstack-nested-vstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/vstack-nested-vstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/vstack-page.xml b/e2e/safe-area/app/gridlayout/action-bar/vstack-page.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/vstack-page.xml
rename to e2e/safe-area/app/gridlayout/action-bar/vstack-page.xml
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-page.xml b/e2e/safe-area/app/gridlayout/gridlayout-page.xml
index cbee1b0f8..3aeca6fed 100644
--- a/e2e/safe-area/app/gridlayout/gridlayout-page.xml
+++ b/e2e/safe-area/app/gridlayout/gridlayout-page.xml
@@ -5,15 +5,31 @@
     </ActionBar>
 
     <StackLayout>
-        <Button text="Grid 3x3" tap="onNavigate" route="gridlayout/gridlayout-3x3-page" />
-        <Button text="Grid 3x3 Nested Grid" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-grid-page" />
-        <Button text="Grid 3x3 Nested VStack" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-vstack-page" />
-        <Button text="Grid 3x3 Nested HStack" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-hstack-page" />
-        <Button text="VStack" tap="onNavigate" route="gridlayout/vstack-page" />
-        <Button text="VStack Nested VStack" tap="onNavigate" route="gridlayout/vstack-nested-vstack-page" />
-        <Button text="VStack Nested HStack" tap="onNavigate" route="gridlayout/vstack-nested-hstack-page" />
-        <Button text="HStack" tap="onNavigate" route="gridlayout/hstack-page" />
-        <Button text="HStack Nested VStack" tap="onNavigate" route="gridlayout/hstack-nested-vstack-page" />
-        <Button text="HStack Nested HStack" tap="onNavigate" route="gridlayout/hstack-nested-hstack-page" />
+        <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" />
+        </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>
 </Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-grid-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-grid-page.xml
new file mode 100644
index 000000000..bdbf4f830
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-grid-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-nested-grid-fragment></fragments:grid-3x3-nested-grid-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-hstack-page.xml
new file mode 100644
index 000000000..aab3b6ab9
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-hstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-nested-hstack-fragment></fragments:grid-3x3-nested-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-vstack-page.xml
new file mode 100644
index 000000000..cfcd1cb64
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-nested-vstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-nested-vstack-fragment></fragments:grid-3x3-nested-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-page.xml
new file mode 100644
index 000000000..b8ddaef72
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/gridlayout-3x3-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-fragment></fragments:grid-3x3-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml
new file mode 100644
index 000000000..982dfeddd
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-hstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:hstack-nested-hstack-fragment></fragments:hstack-nested-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml
new file mode 100644
index 000000000..828818223
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/hstack-nested-vstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:hstack-nested-vstack-fragment></fragments:hstack-nested-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml
new file mode 100644
index 000000000..e52177183
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/hstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:hstack-fragment></fragments:hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml
new file mode 100644
index 000000000..f49915aef
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-hstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:vstack-nested-hstack-fragment></fragments:vstack-nested-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml
new file mode 100644
index 000000000..02b31da6c
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/vstack-nested-vstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:vstack-nested-vstack-fragment></fragments:vstack-nested-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml b/e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml
new file mode 100644
index 000000000..9c17db846
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/no-action-bar/vstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:vstack-fragment></fragments:vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/home/home-page.xml b/e2e/safe-area/app/home/home-page.xml
index 259beafd3..84b2a551f 100644
--- a/e2e/safe-area/app/home/home-page.xml
+++ b/e2e/safe-area/app/home/home-page.xml
@@ -6,5 +6,6 @@
 
     <StackLayout>
         <Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page" />
+        <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page" />
     </StackLayout>
 </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
new file mode 100644
index 000000000..a8aea4669
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/action-bar/grid-3x3-hscroll-hstack-page.xml
@@ -0,0 +1,10 @@
+<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>
+
+    <fragments:grid-3x3-hscroll-hstack-fragment></fragments:grid-3x3-hscroll-hstack-fragment>
+</Page>
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
new file mode 100644
index 000000000..269b5ed20
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/action-bar/grid-3x3-vscroll-vstack-page.xml
@@ -0,0 +1,10 @@
+<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>
+
+    <fragments:grid-3x3-vscroll-vstack-fragment></fragments:grid-3x3-vscroll-vstack-fragment>
+</Page>
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
new file mode 100644
index 000000000..a95b0f3f8
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/action-bar/hscroll-hstack-page.xml
@@ -0,0 +1,10 @@
+<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>
+
+    <fragments:hscroll-hstack-fragment></fragments:hscroll-hstack-fragment>
+</Page>
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
new file mode 100644
index 000000000..b10420c5d
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/action-bar/vscroll-vstack-page.xml
@@ -0,0 +1,10 @@
+<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>
+
+    <fragments:vscroll-vstack-fragment></fragments:vscroll-vstack-fragment>
+</Page>
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
new file mode 100644
index 000000000..14b8a72b4
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/fragments/grid-3x3-hscroll-hstack-fragment.xml
@@ -0,0 +1,65 @@
+<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+    <ScrollView row="0" col="0" orientation="horizontal" backgroundColor="SkyBlue">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="0" col="1" orientation="horizontal" backgroundColor="Indigo">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="0" col="2" orientation="horizontal" backgroundColor="Crimson">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="1" col="0" orientation="horizontal" backgroundColor="Chocolate">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="1" col="1" orientation="horizontal" backgroundColor="Cornsilk">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="1" col="2" orientation="horizontal" backgroundColor="BurlyWood">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="2" col="0" orientation="horizontal" backgroundColor="GoldenRod">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="2" col="1" orientation="horizontal" backgroundColor="Khaki">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="2" col="2" orientation="horizontal" backgroundColor="IndianRed">
+        <StackLayout orientation="horizontal">
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+</GridLayout>
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
new file mode 100644
index 000000000..c15e116f7
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/fragments/grid-3x3-vscroll-vstack-fragment.xml
@@ -0,0 +1,173 @@
+<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+    <ScrollView row="0" col="0" backgroundColor="SkyBlue">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="0" col="1" backgroundColor="Indigo">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="0" col="2" backgroundColor="Crimson">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="1" col="0" backgroundColor="Chocolate">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="1" col="1" backgroundColor="Cornsilk">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="1" col="2" backgroundColor="BurlyWood">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="2" col="0" backgroundColor="GoldenRod">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="2" col="1" backgroundColor="Khaki">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+    <ScrollView row="2" col="2" backgroundColor="IndianRed">
+        <StackLayout>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+            <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        </StackLayout>
+    </ScrollView>
+</GridLayout>
diff --git a/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml b/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml
new file mode 100644
index 000000000..b5c8cb337
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/fragments/hscroll-hstack-fragment.xml
@@ -0,0 +1,9 @@
+<ScrollView orientation="horizontal" backgroundColor="BurlyWood">
+    <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>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+    </StackLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml b/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml
new file mode 100644
index 000000000..7212dc70a
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/fragments/vscroll-vstack-fragment.xml
@@ -0,0 +1,86 @@
+<ScrollView backgroundColor="BurlyWood">
+    <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>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+    </StackLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-hscroll-hstack-page.xml b/e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-hscroll-hstack-page.xml
new file mode 100644
index 000000000..3080ddb95
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-hscroll-hstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-hscroll-hstack-fragment></fragments:grid-3x3-hscroll-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-vscroll-vstack-page.xml b/e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-vscroll-vstack-page.xml
new file mode 100644
index 000000000..e30ce372f
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/no-action-bar/grid-3x3-vscroll-vstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments"
+    actionBarHidden="true">
+
+    <fragments:grid-3x3-vscroll-vstack-fragment></fragments:grid-3x3-vscroll-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/no-action-bar/hscroll-hstack-page.xml b/e2e/safe-area/app/scrollview/no-action-bar/hscroll-hstack-page.xml
new file mode 100644
index 000000000..1aa5916ce
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/no-action-bar/hscroll-hstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments"
+    actionBarHidden="true">
+
+    <fragments:hscroll-hstack-fragment></fragments:hscroll-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/no-action-bar/vscroll-vstack-page.xml b/e2e/safe-area/app/scrollview/no-action-bar/vscroll-vstack-page.xml
new file mode 100644
index 000000000..1982ccefc
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/no-action-bar/vscroll-vstack-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments"
+    actionBarHidden="true">
+
+    <fragments:vscroll-vstack-fragment></fragments:vscroll-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/scrollview-page.ts b/e2e/safe-area/app/scrollview/scrollview-page.ts
new file mode 100644
index 000000000..c0f982757
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/scrollview-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/scrollview/scrollview-page.xml b/e2e/safe-area/app/scrollview/scrollview-page.xml
new file mode 100644
index 000000000..b8871e5d8
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/scrollview-page.xml
@@ -0,0 +1,23 @@
+<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="ScrollView Examples"></Label>
+    </ActionBar>
+
+    <StackLayout>
+        <StackLayout>
+            <Label text="Pages w/ ActionBar"></Label>
+            <Button text="VScroll VStack" tap="onNavigate" route="scrollview/action-bar/vscroll-vstack-page" />
+            <Button text="HScroll HStack" tap="onNavigate" route="scrollview/action-bar/hscroll-hstack-page" />
+            <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-vscroll-vstack-page" />
+            <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-hscroll-hstack-page" />
+        </StackLayout>
+        <StackLayout>
+            <Label text="Pages w/o ActionBar"></Label>
+            <Button text="VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vstack-page" />
+            <Button text="HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hstack-page" />
+            <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-vscroll-vstack-page" />
+            <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-hscroll-hstack-page" />
+        </StackLayout>
+    </StackLayout>
+</Page>
diff --git a/e2e/safe-area/package.json b/e2e/safe-area/package.json
index 90576ea09..be975b619 100644
--- a/e2e/safe-area/package.json
+++ b/e2e/safe-area/package.json
@@ -5,11 +5,11 @@
   "repository": "<fill-your-repository-here>",
   "nativescript": {
     "id": "org.nativescript.safearea",
-    "tns-ios": {
-      "version": "next"
-    },
     "tns-android": {
       "version": "next"
+    },
+    "tns-ios": {
+      "version": "4.1.1"
     }
   },
   "dependencies": {