diff --git a/e2e/safe-area/app/component/action-bar/component-page.xml b/e2e/safe-area/app/component/action-bar/component-page.xml
new file mode 100644
index 000000000..bd9c95c52
--- /dev/null
+++ b/e2e/safe-area/app/component/action-bar/component-page.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="component/fragments" backgroundColor="LightGreen">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
+    </ActionBar>
+
+    <fragments:label-fragment></fragments:label-fragment>
+
+</Page>
diff --git a/e2e/safe-area/app/component/component-page.ts b/e2e/safe-area/app/component/component-page.ts
new file mode 100644
index 000000000..c651c4d84
--- /dev/null
+++ b/e2e/safe-area/app/component/component-page.ts
@@ -0,0 +1,8 @@
+import { View, EventData } from "tns-core-modules/ui/core/view/view";
+
+export function onNavigate(args: EventData) {
+    const view = args.object as View;
+    const route = view["route"];
+
+    view.page.frame.navigate(route);
+}
diff --git a/e2e/safe-area/app/component/component-page.xml b/e2e/safe-area/app/component/component-page.xml
new file mode 100644
index 000000000..6c2e13f33
--- /dev/null
+++ b/e2e/safe-area/app/component/component-page.xml
@@ -0,0 +1,18 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar>
+        <Label text="Component Examples"></Label>
+    </ActionBar>
+
+    <StackLayout horizontalAlignment="center">
+        <StackLayout>
+            <Label text="Pages w/ ActionBar"></Label>
+            <Button text="Label Component" tap="onNavigate" route="component/action-bar/component-page"></Button>
+        </StackLayout>
+        <StackLayout>
+            <Label text="Pages w/o ActionBar"></Label>
+            <Button text="Label Component" tap="onNavigate" route="component/no-action-bar/component-page"></Button>
+        </StackLayout>
+    </StackLayout>
+
+</Page>
diff --git a/e2e/safe-area/app/component/fragments/label-fragment.xml b/e2e/safe-area/app/component/fragments/label-fragment.xml
new file mode 100644
index 000000000..8d629b6fb
--- /dev/null
+++ b/e2e/safe-area/app/component/fragments/label-fragment.xml
@@ -0,0 +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>
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
new file mode 100644
index 000000000..9ccb603b2
--- /dev/null
+++ b/e2e/safe-area/app/component/no-action-bar/component-page.xml
@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="component/fragments" actionBarHidden="true" backgroundColor="LightGreen">
+
+    <fragments:label-fragment></fragments:label-fragment>
+
+</Page>
diff --git a/e2e/safe-area/app/home/home-page.ts b/e2e/safe-area/app/home/home-page.ts
index c0f982757..f7c751c11 100644
--- a/e2e/safe-area/app/home/home-page.ts
+++ b/e2e/safe-area/app/home/home-page.ts
@@ -5,4 +5,4 @@ export function onNavigate(args: EventData) {
     const route = view["route"];
 
     view.page.frame.navigate(route);
-}
\ No newline at end of file
+}
diff --git a/e2e/safe-area/app/home/home-page.xml b/e2e/safe-area/app/home/home-page.xml
index 84b2a551f..4fed008ed 100644
--- a/e2e/safe-area/app/home/home-page.xml
+++ b/e2e/safe-area/app/home/home-page.xml
@@ -1,11 +1,12 @@
-<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
-    
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
     <ActionBar class="action-bar">
         <Label class="action-bar-title" text="Home"></Label>
     </ActionBar>
 
     <StackLayout>
-        <Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page" />
-        <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page" />
+        <Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page"></Button>
+        <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
+        <Button text="Component Examples" tap="onNavigate" route="component/component-page"></Button>
     </StackLayout>
 </Page>
diff --git a/e2e/safe-area/package.json b/e2e/safe-area/package.json
index be975b619..ef99f2c1a 100644
--- a/e2e/safe-area/package.json
+++ b/e2e/safe-area/package.json
@@ -20,20 +20,10 @@
     "@types/chai": "~4.1.3",
     "@types/mocha": "~5.2.1",
     "@types/node": "^7.0.5",
-    "awesome-typescript-loader": "~5.0.0",
-    "clean-webpack-plugin": "~0.1.19",
-    "copy-webpack-plugin": "~4.5.1",
-    "css-loader": "~0.28.11",
-    "extract-text-webpack-plugin": "~3.0.2",
     "nativescript-dev-appium": "next",
+    "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "next",
-    "nativescript-worker-loader": "~0.9.0",
-    "raw-loader": "~0.5.1",
-    "uglifyjs-webpack-plugin": "~1.2.5",
-    "webpack": "~4.6.0",
-    "webpack-bundle-analyzer": "~2.13.0",
-    "webpack-cli": "~2.1.3",
-    "webpack-sources": "~1.1.0"
+    "typescript": "~2.7.2"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts",