Merge pull request #7528 from NativeScript/svetoslavtsenov/merge-release-in-master

chore: merge release in master

CHANGELOG.md

@@ -1,3 +1,116 @@
+<a name="6.0.0"></a>
+# [6.0.0](https://github.com/NativeScript/NativeScript/compare/5.4.2...6.0.0) (2019-06-28)
+
+
+### Bug Fixes
+
+* **bundle:** support for file qualifiers with webpack ([#7386](https://github.com/NativeScript/NativeScript/issues/7386)) ([9fcc1dd](https://github.com/NativeScript/NativeScript/commit/9fcc1dd))
+* **bundle:** code-only typescript custom components with webpack ([#7321](https://github.com/NativeScript/NativeScript/issues/7321)) ([9fcc1dd](https://github.com/NativeScript/NativeScript/commit/9fcc1dd))
+* **bundle:** component builder support for codeFile / cssFile / import with webpack ([#7324](https://github.com/NativeScript/NativeScript/issues/7324)) ([9fcc1dd](https://github.com/NativeScript/NativeScript/commit/9fcc1dd))
+* **bundle:** different event order ([NativeScript/nativescript-cli#4633](https://github.com/NativeScript/nativescript-cli/issues/4633)) ([8851835](https://github.com/NativeScript/NativeScript/commit/8851835))
+* restore TextField.textChange and Switch.checkedChange event syntax in xml ([#7403](https://github.com/NativeScript/NativeScript/issues/7403)) ([76b5089](https://github.com/NativeScript/NativeScript/commit/76b5089))
+* **android:** ignore gzip content-encoding for status code 204 ([#7417](https://github.com/NativeScript/NativeScript/issues/7417)) ([4437cd6](https://github.com/NativeScript/NativeScript/commit/4437cd6))
+* **android-transition:** exit transition not executed after app suspend resume ([#7402](https://github.com/NativeScript/NativeScript/issues/7402)) ([f08b491](https://github.com/NativeScript/NativeScript/commit/f08b491))
+* **css-state:** _appliedSelectorsVersion assignment ([#7405](https://github.com/NativeScript/NativeScript/issues/7405)) ([9ecf07f](https://github.com/NativeScript/NativeScript/commit/9ecf07f))
+* **observable-array**: splice to notify correct amount of added items ([#7426](https://github.com/NativeScript/NativeScript/pull/7426)) ([5e14de6](https://github.com/NativeScript/NativeScript/commit/5e14de6))
+* cancel contradictory gesture events ([#7296](https://github.com/NativeScript/NativeScript/issues/7296)) ([b8a82f2](https://github.com/NativeScript/NativeScript/commit/b8a82f2))
+* allow span descendants in FormattedString ([#7369](https://github.com/NativeScript/NativeScript/issues/7369)) ([01c4b8c](https://github.com/NativeScript/NativeScript/commit/01c4b8c))
+
+
+### Features
+
+* **bundle:** bundle workflow support ([#7320](https://github.com/NativeScript/NativeScript/issues/7320)) ([ecd9fc3](https://github.com/NativeScript/NativeScript/commit/ecd9fc3))
+* **android:** androidX support ([#7039](https://github.com/NativeScript/NativeScript/issues/7039)) ([c5db112](https://github.com/NativeScript/NativeScript/commit/c5db112))
+* **BETA/EXPERIMENTAL:** bottom navigation and tabs components ([#6967](https://github.com/NativeScript/NativeScript/issues/6967)) ([0c2c1cc](https://github.com/NativeScript/NativeScript/commit/0c2c1cc))
+* add support for :focus pseudo class in TextField / TextView ([#7396](https://github.com/NativeScript/NativeScript/pull/7396)) ([0bfddab](https://github.com/NativeScript/NativeScript/commit/0bfddab))
+
+
+### BREAKING CHANGES
+
+* `AndroidApplication.currentContext` in `tns-core-modules/application` module is now removed.
+
+Use `AndroidApplication.startActivity`, `AndroidApplication.foregroundActivity`, or `AndroidApplication.context` properties instead.
+
+
+* `start(...)` method in `tns-core-modules/application` module is now removed.
+
+Use `application.run(...)` method instead.
+
+
+* `loadPage(...)` method in `tns-core-modules/ui/builder` module is now removed.
+
+Use `createViewFromEntry(entry: NavigationEntry)` method in `tns-core-modules/ui/builder` module instead.
+
+
+* `tns-core-modules/ui/core/dependency-observable` module is now removed.
+
+Use `tns-core-modules/ui/core/properties` module instead.
+
+
+* `ViewBase.showModal()`, `ViewBase.showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): ViewBase`, and `ViewBase.showModal(view: ViewBase, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): ViewBase` method overloads are now removed.
+
+Use `ViewBase.showModal(moduleName: string, modalOptions: ShowModalOptions): ViewBase` or `ViewBase.showModal(view: ViewBase, modalOptions: ShowModalOptions): ViewBase` instead.
+
+
+* `Frame.androidOptionSelectedEvent` and `AndroidOptionEventData` interfrace in `tns-core-modules/ui/frame` module are now removed.
+
+Event not raised by NativeScript core framework anymore.
+
+
+* `AndroidFrame.cachePagesOnNavigate` in `tns-core-modules/ui/frame` module is now removed.
+
+Not used internally in NativeScript core framework anymore.
+
+
+* `stack()` method in `tns-core-modules/ui/frame` module is now removed.
+
+Use `getFrameById(...)` method if you want to retrieve a frame different than the topmost one instead.
+
+
+* `AndroidActivityCallbacks.onCreate(activity: any, savedInstanceState: any, superFunc: Function)` method overload in `tns-core-modules/ui/frame` module is now removed.
+
+Use `AndroidActivityCallbacks.onCreate(activity: any, savedInstanceState: any, intent: any, superFunc: Function)` instead.
+
+
+* `WebView.url` property in `tns-core-modules/ui/web-view` module is now removed.
+
+Use `WebView.src` property instead.
+
+
+* `ios.getter(...)` function in `tns-core-modules/utils` module is now removed.
+
+Use the respective native property directly instead.
+
+
+* `View.observe(...)` method in `tns-core-modules/ui/core/view` module is now removed.
+
+Use `View.on(...)` method instead.
+
+* The addedCount variable from ObservableArray.splice(...) change event is always the amount of added items.
+
+Migration steps:
+The old addedCount can be obtained by `const addedCount = event.addedCount - event.removed.length`
+
+* Fix to cancel contradictory gesture events (e.g. tap and double tap) introduces the following behavior breaking change
+
+Before:
+* **iOS / Android**:
+    * double tap: child tap -> parent tap -> child double tap -> parent double tap
+    * tap: child tap -> parent tap
+
+After: 
+* **iOS**:
+    * double tap: child double tap
+    * tap: child tap
+* **Android**:
+    * double tap: child double tap -> parent double tap
+    * tap: child tap -> parent tap
+
+Migration steps:
+Move event handlers accordingly.
+
+
+
 ## [5.4.3](https://github.com/NativeScript/NativeScript/compare/5.4.2...5.4.3) (2019-06-21)
 
 

e2e/file-qualifiers/app/App_Resources/Android/app.gradle

@@ -2,15 +2,19 @@
 
 // Uncomment to add recyclerview-v7 dependency
 //dependencies {
-//	compile 'com.android.support:recyclerview-v7:+'
+//	implementation 'com.android.support:recyclerview-v7:+'
 //}
 
-android {  
-  defaultConfig {  
+// If you want to add something to be applied before applying plugins' include.gradle files
+// e.g. project.ext.googlePlayServicesVersion = "15.0.1"
+// create a file named before-plugins.gradle in the current directory and place it there
+
+android {
+  defaultConfig {
+    minSdkVersion 17
     generatedDensities = []
-    applicationId = "org.nativescript.animation"
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

e2e/file-qualifiers/app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -10,10 +10,6 @@
 		android:largeScreens="true"
 		android:xlargeScreens="true"/>
 
-	<uses-sdk
-		android:minSdkVersion="17"
-		android:targetSdkVersion="__APILEVEL__"/>
-
 	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 	<uses-permission android:name="android.permission.INTERNET"/>
@@ -28,7 +24,7 @@
 		<activity
 			android:name="com.tns.NativeScriptActivity"
 			android:label="@string/title_activity_kimera"
-			android:configChanges="keyboardHidden|orientation|screenSize"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
 			android:theme="@style/LaunchScreenTheme">
 
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

e2e/file-qualifiers/app/App_Resources/Android/src/main/res/values/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">TestApp</string>
+    <string name="title_activity_kimera">TestApp</string>
+</resources>

e2e/file-qualifiers/app/App_Resources/Android/src/main/res/xml/provider_paths.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="external_files" path="."/>
+</paths>

e2e/file-qualifiers/app/app.css

@@ -1,5 +1,4 @@
 .root-footer {
-    horizontal-align: middle;
     color: black;
     background-color: lightgreen
 }

e2e/file-qualifiers/app/app.land.css

@@ -1,5 +1,4 @@
 .root-footer {
-    horizontal-align: middle;
     color: black;
     background-color: lightpink;
 }

e2e/file-qualifiers/app/app.ts

@@ -1,3 +1,7 @@
 import * as application from "tns-core-modules/application";
+import { setCategories, categories, enable } from "tns-core-modules/trace";
+
+setCategories(categories.Livesync);
+enable();
 
 application.run({ moduleName: "app-root" });

e2e/file-qualifiers/app/components/my-component.css

@@ -0,0 +1,5 @@
+.custom-component {
+    color: navy;
+    font-weight: bold;
+    font-size: 20;
+}

e2e/file-qualifiers/app/components/my-component.land.css

@@ -0,0 +1,5 @@
+.custom-component {
+    color: darkolivegreen;
+    font-weight: bold;
+    font-size: 20;
+}

e2e/file-qualifiers/app/components/my-component.land.ts

@@ -0,0 +1,3 @@
+export function onLoaded() {
+    console.log("---> Custom component LANDSCAPE loaded");
+}

e2e/file-qualifiers/app/components/my-component.land.xml

@@ -0,0 +1,3 @@
+<StackLayout class="p-20" loaded="onLoaded">
+    <Label text="CUSTOM COMPONENT - LANDSCAPE" class="custom-component" />
+</StackLayout>

e2e/file-qualifiers/app/components/my-component.ts

@@ -0,0 +1,3 @@
+export function onLoaded() {
+    console.log("---> Custom component DEFAULT loaded");
+}

e2e/file-qualifiers/app/components/my-component.xml

@@ -0,0 +1,3 @@
+<StackLayout class="p-20" loaded="onLoaded">
+    <Label text="CUSTOM COMPONENT - DEFAULT" class="custom-component" />
+</StackLayout>

e2e/file-qualifiers/app/main/main-page-vm.ts

@@ -0,0 +1,3 @@
+import { fromObject } from "tns-core-modules/data/observable";
+
+export const vm = fromObject({ prop: "property from VM" });

e2e/file-qualifiers/app/main/main-page.land.ts

@@ -1,7 +1,17 @@
-export function onNavigatedTo(args) {
-    console.log("---> [LANDSCAPE] onNavigatedTo");
+import { topmost } from "tns-core-modules/ui/frame";
+import { vm } from "./main-page-vm";
+
+export function onNavigatingTo(args) {
+    console.log("---> [LANDSCAPE] onNavigatingTo");
+    args.object.page.bindingContext = vm;
+}
+
+export function tap(args) {
+    console.log("---> [LANDSCAPE] tap");
 }
 
 export function navigate(args) {
     console.log("---> [LANDSCAPE] navigate");
-}
+
+    topmost().navigate("other/other-page");
+}

e2e/file-qualifiers/app/main/main-page.land.xml

@@ -1,7 +1,13 @@
-<Page navigatedTo="onNavigatedTo">
+<Page navigatingTo="onNavigatingTo" xmlns:cc="components">
     <StackLayout class="page-content">
         <Label text="This is LANDSACPE page" />
         
-        <Button text="hey there" tap="navigate" />
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <Label text="{{ prop }}" />
+
+        <cc:my-component />
     </StackLayout>
 </Page>

e2e/file-qualifiers/app/main/main-page.ts

@@ -1,7 +1,17 @@
-export function onNavigatedTo(args) {
-    console.log("---> [DEFAULT] onNavigatedTo");
+import { topmost } from "tns-core-modules/ui/frame";
+import { vm } from "./main-page-vm";
+
+export function onNavigatingTo(args) {
+    console.log("---> [DEFAULT] onNavigatingTo");
+    args.object.page.bindingContext = vm;
+}
+
+export function tap(args) {
+    console.log("---> [DEFAULT] tap");
 }
 
 export function navigate(args) {
     console.log("---> [DEFAULT] navigate");
+
+    topmost().navigate("other/other-page");
 }

e2e/file-qualifiers/app/main/main-page.xml

@@ -1,7 +1,13 @@
-<Page navigatedTo="onNavigatedTo">
+<Page navigatingTo="onNavigatingTo" xmlns:cc="components">
     <StackLayout class="page-content">
         <Label text="This is DEFAULT page" />
         
-        <Button text="hey there" tap="navigate" />
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <Label text="{{ prop }}" />
+        
+        <cc:my-component />
     </StackLayout>
 </Page>

e2e/file-qualifiers/app/other/other-page.css

@@ -0,0 +1,4 @@
+.page-content {
+    padding: 20;
+    background-color: lightblue;
+}

e2e/file-qualifiers/app/other/other-page.land.css

@@ -0,0 +1,4 @@
+.page-content {
+    padding: 20;
+    background-color: lightcoral;
+}

e2e/file-qualifiers/app/other/other-page.land.ts

@@ -0,0 +1,15 @@
+import { topmost } from "tns-core-modules/ui/frame";
+
+export function onNavigatedTo(args) {
+    console.log("---> [LANDSCAPE other] onNavigatedTo");
+}
+
+export function tap(args) {
+    console.log("---> [LANDSCAPE other] tap");
+}
+
+export function navigate(args) {
+    console.log("---> [LANDSCAPE other] navigate");
+
+    topmost().navigate("main/main-page");
+}

e2e/file-qualifiers/app/other/other-page.land.xml

@@ -0,0 +1,12 @@
+<Page navigatedTo="onNavigatedTo" xmlns:cc="components">
+    <StackLayout class="page-content">
+        <Label text="This is LANDSACPE other page" />
+        
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <cc:my-component />
+
+    </StackLayout>
+</Page>

e2e/file-qualifiers/app/other/other-page.ts

@@ -0,0 +1,15 @@
+import { topmost } from "tns-core-modules/ui/frame";
+
+export function onNavigatedTo(args) {
+    console.log("---> [DEFAULT other] onNavigatedTo");
+}
+
+export function tap(args) {
+    console.log("---> [DEFAULT other] tap");
+}
+
+export function navigate(args) {
+    console.log("---> [DEFAULT other] navigate");
+
+    topmost().navigate("main/main-page");
+}

e2e/file-qualifiers/app/other/other-page.xml

@@ -0,0 +1,11 @@
+<Page navigatedTo="onNavigatedTo" xmlns:cc="components">
+    <StackLayout class="page-content">
+        <Label text="This is DEFAULT other page" />
+        
+        <Button text="tap" tap="tap" />
+
+        <Button text="navigate" tap="navigate" />
+
+        <cc:my-component />
+    </StackLayout>
+</Page>

e2e/file-qualifiers/app/package.json

@@ -2,7 +2,5 @@
   "android": {
     "v8Flags": "--expose_gc"
   },
-  "main": "app.js",
-  "name": "tns-template-hello-world-ts",
-  "version": "3.4.0"
+  "main": "app.js"
 }

e2e/file-qualifiers/webpack.config.js

@@ -179,25 +179,14 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
-                                registerModules: /(root|page|app)(\.(land|port|phone|tablet|minH\d+|minW\d+|minWH\d+))?\.(xml|css|js|ts|scss)$/ // NB: MODIFIED                              
                             }
                         },
                     ].filter(loader => !!loader)
                 },
 
                 {
-                    test: /(page|app)(\.(land|port|phone|tablet|minH\d+|minW\d+|minWH\d+))?\.ts$/,
-                    use: "nativescript-dev-webpack/script-hot-loader"
-                },
-
-                {
-                    test: /\.(css|scss)$/,
-                    use: "nativescript-dev-webpack/style-hot-loader"
-                },
-
-                {
-                    test: /\.(html|xml)$/,
-                    use: "nativescript-dev-webpack/markup-hot-loader"
+                    test: /\.(ts|css|scss|less|html|xml)$/,
+                    use: "nativescript-dev-webpack/hmr/hot-loader"
                 },
 
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },

e2e/nested-frame-navigation/app/bottom-navigation-page/bottom-navigation-page.xml

@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="tabBottomBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="bottom navigation page" horizontalAlignment="center" />
+    </ActionBar>
+    
+    <GridLayout rows="auto, *">
+        <StackLayout>
+            <Button text="navigate to some page (default transition)" tap="onNavigate" />
+            <Button text="navigate to some page (no transition)" tap="onNavigateNone" />
+            <Button text="navigate to some page (slide transition)" tap="onNavigateSlide" />
+            <Button text="navigate to some page (flip transition)" tap="onNavigateFlip" />
+        </StackLayout>
+
+        <GridLayout row="1">
+            <BottomNavigation>
+                <TabStrip>
+                    <TabStripItem title="Players"></TabStripItem>
+                    <TabStripItem title="Dummy"></TabStripItem>
+                    <TabStripItem title="Teams"></TabStripItem>
+                </TabStrip>
+
+                <TabContentItem>
+                    <Frame defaultPage="players/players-items-page" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Label text="this is a tab" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Frame defaultPage="teams/teams-items-page" />
+                </TabContentItem>
+            </BottomNavigation>
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/nested-frame-navigation/app/bottom-navigation-root/bottom-navigation-root.ts

@@ -0,0 +1,5 @@
+import * as application from "tns-core-modules/application";
+
+export function onReset() {
+    application._resetRootView({ moduleName: "app-root" });
+}

e2e/nested-frame-navigation/app/bottom-navigation-root/bottom-navigation-root.xml

@@ -0,0 +1,27 @@
+<BottomNavigation>
+    <TabStrip>
+        <TabStripItem title="Players"></TabStripItem>
+        <!-- this tab serves as dummy so the actual teams tab is not loaded by default  -->
+        <TabStripItem title="Dummy"></TabStripItem>
+        <TabStripItem title="Teams"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <GridLayout rows="auto, auto, *">
+            <Label text="tabs root top home" />
+            <Button row="1" text="reset app" tap="onReset" />
+            <GridLayout row="2">
+                <Frame defaultPage="players/players-items-page" />
+            </GridLayout>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <Label text="this is a tab" />
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="auto, *">
+            <Button text="reset app" tap="onReset" />
+            <Frame row="1" defaultPage="teams/teams-items-page" />
+        </GridLayout>
+    </TabContentItem>
+</BottomNavigation>

e2e/nested-frame-navigation/app/home/home-page.ts

@@ -20,22 +20,49 @@ export function onNavigateToPageMultiFrame(args: EventData) {
     button.page.frame.navigate("frame-root/frame-multi-home-page");
 }
 
+export function onNavigateToTabViewTopPage(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("tab-page/tab-top-page");
+}
+
+export function onNavigateToTabViewBottomPage(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("tab-page/tab-bottom-page");
+}
+
+export function onNavigateToTabViewTopRoot(args: EventData) {
+    application._resetRootView({ moduleName: "tab-root/tab-top-root" });
+}
+
+export function onNavigateToTabViewBottomRoot(args: EventData) {
+    application._resetRootView({ moduleName: "tab-root/tab-bottom-root" });
+}
+
+export function onNavigateToBottomNavigationPage(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("bottom-navigation-page/bottom-navigation-page");
+}
+
+export function onNavigateToBottomNavigationRoot(args: EventData) {
+    application._resetRootView({ moduleName: "bottom-navigation-root/bottom-navigation-root" });
+}
+
 export function onNavigateToTabsTopPage(args: EventData) {
     const button = <Button>args.object;
-    button.page.frame.navigate("tab-page/tabs-top-page");
+    button.page.frame.navigate("tabs-page/tabs-top-page");
 }
 
 export function onNavigateToTabsBottomPage(args: EventData) {
     const button = <Button>args.object;
-    button.page.frame.navigate("tab-page/tabs-bottom-page");
+    button.page.frame.navigate("tabs-page/tabs-bottom-page");
 }
 
 export function onNavigateToTabsTopRoot(args: EventData) {
-    application._resetRootView({ moduleName: "tab-root/tab-top-root" });
+    application._resetRootView({ moduleName: "tabs-root/tabs-top-root" });
 }
 
 export function onNavigateToTabsBottomRoot(args: EventData) {
-    application._resetRootView({ moduleName: "tab-root/tab-bottom-root" });
+    application._resetRootView({ moduleName: "tabs-root/tabs-bottom-root" });
 }
 
 export function onNavigateToSomePage(args: EventData) {

e2e/nested-frame-navigation/app/home/home-page.xml

@@ -10,6 +10,12 @@
             <Button text="Layout w/ multi frame" tap="onNavigateToLayoutMultiFrame" />
             <Button text="Page w/ frame" tap="onNavigateToPageFrame" />
             <Button text="Page w/ multi frame" tap="onNavigateToPageMultiFrame" />
+            <Button text="Page w/ tabview (top)" tap="onNavigateToTabViewTopPage" />
+            <Button text="Page w/ tabview (bottom)" tap="onNavigateToTabViewBottomPage" />
+            <Button text="Root tabview (top)" tap="onNavigateToTabViewTopRoot" />
+            <Button text="Root tabview (bottom)" tap="onNavigateToTabViewBottomRoot" />
+            <Button text="Page w/ bottom navigation" tap="onNavigateToBottomNavigationPage" />
+            <Button text="Root bottom navigation" tap="onNavigateToBottomNavigationRoot" />
             <Button text="Page w/ tabs (top)" tap="onNavigateToTabsTopPage" />
             <Button text="Page w/ tabs (bottom)" tap="onNavigateToTabsBottomPage" />
             <Button text="Root tabs (top)" tap="onNavigateToTabsTopRoot" />

e2e/nested-frame-navigation/app/tab-page/tab-bottom-page.xml

@@ -2,7 +2,7 @@
 
     <ActionBar class="action-bar">
         <NavigationButton text="tabBottomBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
-        <Label class="action-bar-title" text="tab bottom page" horizontalAlignment="center" />
+        <Label class="action-bar-title" text="tabview bottom page" horizontalAlignment="center" />
     </ActionBar>
     
     <GridLayout rows="auto, *">

e2e/nested-frame-navigation/app/tab-page/tab-top-page.ts

@@ -0,0 +1,46 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onNavigate(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("some-page/some-page");
+}
+
+export function onNavigateNone(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: false
+    });
+}
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onNavigateFlip(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "flip",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/tab-page/tab-top-page.xml

@@ -2,7 +2,7 @@
 
     <ActionBar class="action-bar">
         <NavigationButton text="tabTopBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
-        <Label class="action-bar-title" text="tab top page" horizontalAlignment="center" />
+        <Label class="action-bar-title" text="tabview top page" horizontalAlignment="center" />
     </ActionBar>
 
     <GridLayout rows="auto, *">

e2e/nested-frame-navigation/app/tab-root/tab-bottom-root.xml

@@ -1,7 +1,7 @@
 <TabView androidTabsPosition="bottom">
     <TabViewItem title="Players">
         <GridLayout rows="auto, auto, *">
-            <Label text="tab root bottom home" />
+            <Label text="tabview root bottom home" />
             <Button row="1" text="reset app" tap="onReset" />
             <GridLayout row="2">
                 <Frame defaultPage="players/players-items-page" />

e2e/nested-frame-navigation/app/tab-root/tab-top-root.xml

@@ -1,7 +1,7 @@
 <TabView androidTabsPosition="top">
     <TabViewItem title="Players">
         <GridLayout rows="auto, auto, *">
-            <Label text="tab root top home" />
+            <Label text="tabview root top home" />
             <Button row="1" text="reset app" tap="onReset" />
             <GridLayout row="2">
                 <Frame defaultPage="players/players-items-page" />

e2e/nested-frame-navigation/app/tabs-page/tabs-bottom-page.ts

@@ -0,0 +1,46 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onNavigate(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("some-page/some-page");
+}
+
+export function onNavigateNone(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: false
+    });
+}
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onNavigateFlip(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "flip",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/tabs-page/tabs-bottom-page.xml

@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="tabBottomBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="tabs bottom page" horizontalAlignment="center" />
+    </ActionBar>
+    
+    <GridLayout rows="auto, *">
+        <StackLayout>
+            <Button text="navigate to some page (default transition)" tap="onNavigate" />
+            <Button text="navigate to some page (no transition)" tap="onNavigateNone" />
+            <Button text="navigate to some page (slide transition)" tap="onNavigateSlide" />
+            <Button text="navigate to some page (flip transition)" tap="onNavigateFlip" />
+        </StackLayout>
+
+        <GridLayout row="1">
+            <Tabs tabsPosition="bottom">
+                <TabStrip>
+                    <TabStripItem title="Players"></TabStripItem>
+                    <TabStripItem title="Dummy"></TabStripItem>
+                    <TabStripItem title="Teams"></TabStripItem>
+                </TabStrip>
+
+                <TabContentItem>
+                    <Frame defaultPage="players/players-items-page" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Label text="this is a tab" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Frame defaultPage="teams/teams-items-page" />
+                </TabContentItem>
+            </Tabs>
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/nested-frame-navigation/app/tabs-page/tabs-top-page.ts

@@ -0,0 +1,46 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onNavigate(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate("some-page/some-page");
+}
+
+export function onNavigateNone(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: false
+    });
+}
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onNavigateFlip(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "some-page/some-page",
+        animated: true,
+        transition: {
+            name: "flip",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/tabs-page/tabs-top-page.xml

@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="tabTopBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="tabs top page" horizontalAlignment="center" />
+    </ActionBar>
+
+    <GridLayout rows="auto, *">
+        <StackLayout>
+            <Button text="navigate to some page (default transition)" tap="onNavigate" />
+            <Button text="navigate to some page (no transition)" tap="onNavigateNone" />
+            <Button text="navigate to some page (slide transition)" tap="onNavigateSlide" />
+            <Button text="navigate to some page (flip transition)" tap="onNavigateFlip" />
+        </StackLayout>
+
+        <GridLayout row="1">
+            <Tabs tabsPosition="top">
+                <TabStrip>
+                    <TabStripItem title="Players"></TabStripItem>
+                    <TabStripItem title="Dummy"></TabStripItem>
+                    <TabStripItem title="Teams"></TabStripItem>
+                </TabStrip>
+
+                <TabContentItem>
+                    <Frame defaultPage="players/players-items-page" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Label text="this is a tab" />
+                </TabContentItem>
+                <TabContentItem>
+                    <Frame defaultPage="teams/teams-items-page" />
+                </TabContentItem>
+            </Tabs>
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/nested-frame-navigation/app/tabs-root/tabs-bottom-root.ts

@@ -0,0 +1,5 @@
+import * as application from "tns-core-modules/application";
+
+export function onReset() {
+    application._resetRootView({ moduleName: "app-root" });
+}

e2e/nested-frame-navigation/app/tabs-root/tabs-bottom-root.xml

@@ -0,0 +1,27 @@
+<Tabs tabsPosition="bottom">
+    <TabStrip>
+        <TabStripItem title="Players"></TabStripItem>
+        <!-- this tab serves as dummy so the actual teams tab is not loaded by default  -->
+        <TabStripItem title="Dummy"></TabStripItem>
+        <TabStripItem title="Teams"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <GridLayout rows="auto, auto, *">
+            <Label text="tabs root top home" />
+            <Button row="1" text="reset app" tap="onReset" />
+            <GridLayout row="2">
+                <Frame defaultPage="players/players-items-page" />
+            </GridLayout>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <Label text="this is a tab" />
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="auto, *">
+            <Button text="reset app" tap="onReset" />
+            <Frame row="1" defaultPage="teams/teams-items-page" />
+        </GridLayout>
+    </TabContentItem>
+</Tabs>

e2e/nested-frame-navigation/app/tabs-root/tabs-top-root.ts

@@ -0,0 +1,5 @@
+import * as application from "tns-core-modules/application";
+
+export function onReset() {
+    application._resetRootView({ moduleName: "app-root" });
+}

e2e/nested-frame-navigation/app/tabs-root/tabs-top-root.xml

@@ -0,0 +1,27 @@
+<Tabs tabsPosition="top">
+    <TabStrip>
+        <TabStripItem title="Players"></TabStripItem>
+        <!-- this tab serves as dummy so the actual teams tab is not loaded by default  -->
+        <TabStripItem title="Dummy"></TabStripItem>
+        <TabStripItem title="Teams"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <GridLayout rows="auto, auto, *">
+            <Label text="tabs root top home" />
+            <Button row="1" text="reset app" tap="onReset" />
+            <GridLayout row="2">
+                <Frame defaultPage="players/players-items-page" />
+            </GridLayout>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <Label text="this is a tab" />
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="auto, *">
+            <Button text="reset app" tap="onReset" />
+            <Frame row="1" defaultPage="teams/teams-items-page" />
+        </GridLayout>
+    </TabContentItem>
+</Tabs>

e2e/nested-frame-navigation/e2e/screen.ts

@@ -6,18 +6,18 @@ const layoutWithMultiFrame = "Layout w/ multi frame";
 const pageWithFrame = "Page w/ frame";
 const pageWithFrameNonDefaultTransition = "Frame to NestedFrame (non-default transition)";
 const pageWithMultiFrame = "Page w/ multi frame";
-const pageTabTopWithFrames = "Page w/ tabs (top)";
-const pageTabBottomWithFrames = "Page w/ tabs (bottom)";
-const tabTopRootWithFrames = "Root tabs (top)";
-const tabBottomRootWithFrames = "Root tabs (bottom)";
+const pageTabTopWithFrames = "Page w/ tabview (top)";
+const pageTabBottomWithFrames = "Page w/ tabview (bottom)";
+const tabTopRootWithFrames = "Root tabview (top)";
+const tabBottomRootWithFrames = "Root tabview (bottom)";
 const layoutHome = "layout home page";
 const layoutHomeSecondary = "layout home secondary page";
 const frameHome = "frame home page";
 const frameHomeSecondary = "multi frame home page";
-const tabTopHome = "tab top page";
-const tabBottomHome = "tab bottom page";
-const tabRootTopHome = "tab root top home";
-const tabRootBottomHome = "tab root bottom home";
+const tabViewTopHome = "tabview top page";
+const tabViewBottomHome = "tabview bottom page";
+const tabViewRootTopHome = "tabview root top home";
+const tabViewRootBottomHome = "tabview root bottom home";
 const navigateToStillOtherPageSlide = "navigate to still other page (slide transition)";
 const navigateToSomePageDefault = "navigate to some page (default transition)";
 const navigateToSomePageNone = "navigate to some page (no transition)";
@@ -300,19 +300,19 @@ export class Screen {
     }
 
     loadedPageTabTopWithFrames = async () => {
-        await this.loadedPage(tabTopHome);
+        await this.loadedPage(tabViewTopHome);
     }
 
     loadedPageTabBottomWithFrames = async () => {
-        await this.loadedPage(tabBottomHome);
+        await this.loadedPage(tabViewBottomHome);
     }
 
     loadedTabTopRootWithFrames = async () => {
-        await this.loadedPage(tabRootTopHome);
+        await this.loadedPage(tabViewRootTopHome);
     }
 
     loadedTabBottomRootWithFrames = async () => {
-        await this.loadedPage(tabRootBottomHome);
+        await this.loadedPage(tabViewRootBottomHome);
     }
     
     loadedStillOtherPage = async () => {

e2e/ui-tests-app/app/action-bar/font-icons-page.css

@@ -0,0 +1,11 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+.font-size {
+    font-size: 48;
+}
+
+.color {
+    color: blue;
+}

e2e/ui-tests-app/app/action-bar/font-icons-page.ts

@@ -0,0 +1,17 @@
+import * as frame from "tns-core-modules/ui/frame";
+import { EventData } from "tns-core-modules/ui/frame";
+import { Button } from "tns-core-modules/ui/button";
+import { ActionBar } from "tns-core-modules/ui/action-bar";
+
+const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
+
+export function navigate(args) {
+    frame.topmost().navigate("ui-tests-app/action-bar/clean");
+}
+
+export function onChangeRenderingMode(args: EventData) {
+    const button = <Button>args.object;
+    const actionBar = <ActionBar>button.page.actionBar;
+    actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
+    button.text = "" + actionBar.iosIconRenderingMode;
+}

e2e/ui-tests-app/app/action-bar/font-icons-page.xml

@@ -0,0 +1,19 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar>
+      <ActionBar.actionItems>
+        <!-- font family + font size + color -->
+        <ActionItem icon="font://&#xF10B;" class="font-awesome font-size color" tap="navigate"/>
+        <!-- default font + valid char code -->
+        <ActionItem icon="font://&#xF10B;" tap="navigate"/>
+        <!-- font family + invalid char code -->
+        <ActionItem icon="font://&#xF556;" class="font-awesome font-size" tap="navigate"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+    <Button text="undefined" tap="onChangeRenderingMode"/>
+  </StackLayout>
+</Page> 

e2e/ui-tests-app/app/action-bar/main-page.ts

@@ -23,6 +23,7 @@ export function loadExamples() {
     examples.set("actTransparentBgCss", "action-bar/transparent-bg-css-page");
     examples.set("modalHiddenActBar", "action-bar/modal-test-hidden-action-bar-page");
     examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar-page");
+    examples.set("font-icons", "action-bar/font-icons-page");
     examples.set("flat", "action-bar/flat-page");
     examples.set("flat-tab", "action-bar/flat-tab-page");
     examples.set("flat-tab-opaque-bar", "action-bar/flat-tab-opaque-bar-page");

e2e/ui-tests-app/app/bottom-navigation/background-color-page.css

@@ -2,6 +2,18 @@ BottomNavigation {
   background-color: gold;
 }
 
+TabContentItem.special {
+  background-color: olive;
+}
+
 TabStrip {
   background-color: skyblue;
+}
+
+TabStripItem.special {
+  background-color: teal;
+}
+
+TabStripItem.special:active {
+  background-color: yellowgreen;
 }

e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml

@@ -5,11 +5,11 @@
 
   <BottomNavigation>
     <TabStrip>
-        <TabStripItem title="First"></TabStripItem>
+        <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
-    <TabContentItem>
+    <TabContentItem class="special">
         <GridLayout>
           <Label text="First View" />
         </GridLayout>

e2e/ui-tests-app/app/bottom-navigation/binding-page.ts

@@ -0,0 +1,12 @@
+import * as vmModule from "./bottom-navigation-view-model";
+
+var viewModel = vmModule.bottomNavigationViewModel;
+
+export function bottomNavigaitonLoaded(args) {
+    let bottomNav = args.object;
+    bottomNav.bindingContext = viewModel;
+}
+
+export function addTabs(args) {
+    viewModel.createItems();
+}

e2e/ui-tests-app/app/bottom-navigation/binding-page.xml

@@ -0,0 +1,15 @@
+<Page class="page">
+
+  <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
+  </ActionBar>
+
+    <GridLayout rows="auto,*">
+        <Button row="0" text="Add Tab" tap="addTabs"/>
+        <GridLayout row="1">
+            <BottomNavigation loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
+                <TabStrip items="{{ tabStripItems }}">
+                </TabStrip>
+            </BottomNavigation> 
+        </GridLayout>
+    </GridLayout>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml

@@ -31,6 +31,7 @@
         <Label text="Places" />
       </TabStripItem>
       <TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
+            <TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
     </TabStrip>
 
     <TabContentItem>
@@ -62,6 +63,12 @@
         <Label text="First View"/>
         <Button tap="goToSecond" text="go to second" />
       </StackLayout>
+    </TabContentItem>
+        <TabContentItem>
+      <StackLayout>
+        <Label text="First View"/>
+        <Button tap="goToSecond" text="go to second" />
+      </StackLayout>
     </TabContentItem>
   </BottomNavigation>
 

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts

@@ -0,0 +1,53 @@
+
+import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
+import { Label } from "tns-core-modules/ui/label";
+import { Observable } from "tns-core-modules/data/observable";
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
+import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
+
+export class BottomNavigationViewModel extends Observable {
+    private itemsCount: number = 1;
+    public tabStripItems = new Array<TabStripItem>();
+    public tabContentItems = new Array<TabContentItem>();
+
+    constructor() {
+        super();
+        this.createItems();
+        this.createItems();
+    }
+
+    createItems() {
+        const _tabStripItems = new Array<TabStripItem>();
+        const _tabContentItems = new Array<TabContentItem>();
+
+        for (let index = 0; index < this.itemsCount; index++) {
+            _tabStripItems.push(this.createTabStripItem(index));
+            _tabContentItems.push(this.createContentStripItem(index));
+        }
+
+        this.tabStripItems = _tabStripItems;
+        this.tabContentItems = _tabContentItems;
+        this.itemsCount++;
+    }
+
+    private createTabStripItem(index: number): TabStripItem {
+        const item = new TabStripItem();
+        item.title = "Item " + index;
+        item.iconSource = "res://icon";
+
+        return item;
+    }
+
+    private createContentStripItem(index: number): TabContentItem {
+        const contentItem = new TabContentItem();
+        const label = new Label();
+        const gridlayout = new GridLayout();
+        label.text = "Content Item " + index;
+        gridlayout.addChild(label);
+        contentItem.view = gridlayout;
+
+        return contentItem;
+    }
+}
+export var bottomNavigationViewModel = new BottomNavigationViewModel();

e2e/ui-tests-app/app/bottom-navigation/color-page.css

@@ -0,0 +1,19 @@
+BottomNavigation {
+  color: gold;
+}
+
+TabContentItem.special {
+  color: olive;
+}
+
+TabStrip {
+  color: skyblue;
+}
+
+TabStripItem.special {
+  color: teal;
+}
+
+TabStripItem.special:active {
+  color: yellowgreen;
+}

e2e/ui-tests-app/app/bottom-navigation/color-page.xml

@@ -1,23 +1,24 @@
 <Page class="page">
+
   <ActionBar title="BottomNavigation color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation style="color: green;">
+  <BottomNavigation>
     <TabStrip>
-      <TabStripItem title="First"></TabStripItem>
-      <TabStripItem title="Second"></TabStripItem>
+        <TabStripItem title="First" class="special"></TabStripItem>
+        <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
-    <TabContentItem>
-      <GridLayout>
-        <Label text="First View" />
-      </GridLayout>
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-      <GridLayout>
-        <Label text="Second View" />
-      </GridLayout>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
     </TabContentItem>
   </BottomNavigation>
 </Page>

e2e/ui-tests-app/app/bottom-navigation/font-icons-page.css

@@ -0,0 +1,11 @@
+.font-awesome {
+  font-family: "FontAwesome";
+}
+
+.font-size {
+  font-size: 36;
+}
+
+.color {
+  color: blue;
+}