From e62acba79243a91da6a0e915b47751daac3c985e Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Mon, 15 Mar 2021 20:44:44 -0700
Subject: [PATCH] fix: move BottomNavigation and Tabs to
 @nativescript-community

Cocoapods no longer required with @nativescript/core out of the box and users are no longer taxed with MaterialTabs even if they didn't use those components.

BREAKING CHANGES

If using `BottomNavigation`, just install `@nativescript-community/ui-material-bottom-navigation` and update your imports to use it. API is exactly the same.

If using `Tabs`, just install `@nativescript-community/ui-material-tabs` and update your imports to use it. API is exactly the same.
---
 .../bottom-navigation-navigation-tests.ts     |  284 ----
 .../bottom-navigation-root-tests.ts           |  177 ---
 .../bottom-navigation-tests-native.android.ts |   40 -
 .../bottom-navigation-tests-native.d.ts       |    8 -
 .../bottom-navigation-tests-native.ios.ts     |   35 -
 .../bottom-navigation-tests-new.ts            |   33 -
 .../bottom-navigation-tests.ts                |  347 -----
 .../src/ui/tabs/tabs-navigation-tests.ts      |  284 ----
 apps/automated/src/ui/tabs/tabs-root-tests.ts |  194 ---
 .../src/ui/tabs/tabs-tests-native.android.ts  |   40 -
 .../src/ui/tabs/tabs-tests-native.d.ts        |    8 -
 .../src/ui/tabs/tabs-tests-native.ios.ts      |   44 -
 apps/automated/src/ui/tabs/tabs-tests-new.ts  |   33 -
 apps/automated/src/ui/tabs/tabs-tests.ts      |  350 -----
 .../bottom-navigation-base-page.ts            |   34 -
 ...ttom-navigation-css-properties.e2e-spec.ts |   73 -
 .../bottom-navigation.e2e-spec.ts             |  371 -----
 .../tabs/tabs-tests.e2e-spec.ts               |  370 -----
 .../tabs/tabs-view-base-page.ts               |   39 -
 .../background-color-page.css                 |   19 -
 .../background-color-page.xml                 |   24 -
 apps/ui/src/bottom-navigation/binding-page.ts |    6 -
 .../ui/src/bottom-navigation/binding-page.xml |   19 -
 .../bottom-navigation-css-page.css            |    1 -
 .../bottom-navigation-css-page.ts             |   19 -
 .../bottom-navigation-css-page.xml            |   35 -
 .../bottom-navigation-page.ts                 |   17 -
 .../bottom-navigation-page.xml                |   59 -
 .../bottom-navigation-view-model.ts           |   58 -
 apps/ui/src/bottom-navigation/color-page.css  |   27 -
 apps/ui/src/bottom-navigation/color-page.xml  |   33 -
 .../custom-tabstrip-page.css                  |   31 -
 .../bottom-navigation/custom-tabstrip-page.ts |   24 -
 .../custom-tabstrip-page.xml                  |   41 -
 .../dynamic-color-change-page.css             |   28 -
 .../dynamic-color-change-page.ts              |   39 -
 .../dynamic-color-change-page.xml             |   44 -
 apps/ui/src/bottom-navigation/events-page.ts  |   42 -
 apps/ui/src/bottom-navigation/events-page.xml |   36 -
 .../bottom-navigation/fancy-fonts-page.css    |   45 -
 .../src/bottom-navigation/fancy-fonts-page.ts |    9 -
 .../bottom-navigation/fancy-fonts-page.xml    |   82 --
 apps/ui/src/bottom-navigation/first-page.ts   |   14 -
 apps/ui/src/bottom-navigation/first-page.xml  |    7 -
 .../src/bottom-navigation/font-icons-page.css |   39 -
 .../src/bottom-navigation/font-icons-page.xml |   63 -
 apps/ui/src/bottom-navigation/font-page.css   |   27 -
 apps/ui/src/bottom-navigation/font-page.xml   |   33 -
 .../src/bottom-navigation/icon-change-page.ts |   17 -
 .../bottom-navigation/icon-change-page.xml    |   23 -
 .../icon-title-placement-page.xml             |   30 -
 .../src/bottom-navigation/issue-5470-page.xml |   27 -
 .../src/bottom-navigation/item-color-page.css |    7 -
 .../src/bottom-navigation/item-color-page.xml |   40 -
 apps/ui/src/bottom-navigation/main-page.ts    |   33 -
 apps/ui/src/bottom-navigation/main-page.xml   |    6 -
 .../ui/src/bottom-navigation/reselect-page.ts |   56 -
 .../src/bottom-navigation/reselect-page.xml   |   37 -
 apps/ui/src/bottom-navigation/second-page.ts  |   13 -
 apps/ui/src/bottom-navigation/second-page.xml |    7 -
 .../bottom-navigation/text-transform-page.css |   27 -
 .../bottom-navigation/text-transform-page.xml |   33 -
 apps/ui/src/main-page.ts                      |    2 -
 apps/ui/src/tabs/background-color-page.css    |   19 -
 apps/ui/src/tabs/background-color-page.xml    |   24 -
 apps/ui/src/tabs/color-page.css               |   27 -
 apps/ui/src/tabs/color-page.xml               |   33 -
 apps/ui/src/tabs/custom-tabstrip-page.css     |   31 -
 apps/ui/src/tabs/custom-tabstrip-page.ts      |   22 -
 apps/ui/src/tabs/custom-tabstrip-page.xml     |   41 -
 apps/ui/src/tabs/default-page.ts              |   15 -
 apps/ui/src/tabs/default-page.xml             |   89 --
 .../ui/src/tabs/dynamic-color-change-page.css |   28 -
 apps/ui/src/tabs/dynamic-color-change-page.ts |   37 -
 .../ui/src/tabs/dynamic-color-change-page.xml |   44 -
 apps/ui/src/tabs/events-page.ts               |   40 -
 apps/ui/src/tabs/events-page.xml              |   36 -
 apps/ui/src/tabs/first-page.ts                |   13 -
 apps/ui/src/tabs/first-page.xml               |    7 -
 apps/ui/src/tabs/font-icons-page.css          |   39 -
 apps/ui/src/tabs/font-icons-page.xml          |   63 -
 apps/ui/src/tabs/font-page.css                |   27 -
 apps/ui/src/tabs/font-page.xml                |   33 -
 .../src/tabs/frame-in-tabs-inner-page-1.xml   |   12 -
 .../src/tabs/frame-in-tabs-inner-page-2.xml   |    3 -
 .../src/tabs/frame-in-tabs-inner-page-3.xml   |    3 -
 .../src/tabs/frame-in-tabs-inner-page-4.xml   |    3 -
 apps/ui/src/tabs/frame-in-tabs-overflow.xml   |   24 -
 apps/ui/src/tabs/frame-in-tabs.ts             |    3 -
 apps/ui/src/tabs/frame-in-tabs.xml            |   24 -
 apps/ui/src/tabs/highlight-color-page.css     |    3 -
 apps/ui/src/tabs/highlight-color-page.xml     |   24 -
 apps/ui/src/tabs/icon-change-page.ts          |   17 -
 apps/ui/src/tabs/icon-change-page.xml         |   23 -
 .../ui/src/tabs/icon-title-placement-page.xml |   30 -
 apps/ui/src/tabs/issue-5470-page.xml          |   27 -
 apps/ui/src/tabs/item-color-page.css          |   20 -
 apps/ui/src/tabs/item-color-page.xml          |   40 -
 apps/ui/src/tabs/main-page.ts                 |   39 -
 apps/ui/src/tabs/main-page.xml                |    6 -
 .../tabs/nested-bottom-navigation-page.xml    |   39 -
 apps/ui/src/tabs/nested-layout-page.xml       |   26 -
 apps/ui/src/tabs/reselect-page.ts             |   68 -
 apps/ui/src/tabs/reselect-page.xml            |   37 -
 apps/ui/src/tabs/second-page.ts               |   13 -
 apps/ui/src/tabs/second-page.xml              |    7 -
 apps/ui/src/tabs/swipe-disabled-page.ts       |   15 -
 apps/ui/src/tabs/swipe-disabled-page.xml      |   40 -
 apps/ui/src/tabs/tab-strip-item-page.xml      |   16 -
 apps/ui/src/tabs/tab-strip-items-page.xml     |   88 --
 apps/ui/src/tabs/tabs-binding-page.ts         |    6 -
 apps/ui/src/tabs/tabs-binding-page.xml        |   17 -
 apps/ui/src/tabs/tabs-binding-view-model.ts   |   59 -
 apps/ui/src/tabs/tabs-page.ts                 |   15 -
 apps/ui/src/tabs/tabs-page.xml                |   36 -
 apps/ui/src/tabs/tabs-position-page.xml       |   40 -
 apps/ui/src/tabs/text-transform-page.css      |   27 -
 apps/ui/src/tabs/text-transform-page.xml      |   33 -
 packages/core/platforms/ios/Podfile           |   12 -
 .../ui/bottom-navigation/index.android.ts     |  944 -------------
 packages/core/ui/bottom-navigation/index.d.ts |   72 -
 .../core/ui/bottom-navigation/index.ios.ts    |  817 -----------
 .../tab-content-item/index.android.ts         |   76 -
 .../tab-content-item/index.d.ts               |   11 -
 .../tab-content-item/index.ios.ts             |   32 -
 .../tab-content-item-common.ts                |   29 -
 .../tab-navigation-base/index.d.ts            |  255 ----
 .../tab-navigation-base/index.ts              |  334 -----
 .../tab-strip-item/index.d.ts                 |   70 -
 .../tab-strip-item/index.ts                   |  292 ----
 .../tab-navigation-base/tab-strip/index.d.ts  |   83 --
 .../ui/tab-navigation-base/tab-strip/index.ts |  206 ---
 packages/core/ui/tabs/index.android.ts        | 1004 -------------
 packages/core/ui/tabs/index.d.ts              |  100 --
 packages/core/ui/tabs/index.ios.ts            | 1255 -----------------
 packages/core/ui/tabs/tabs-common.ts          |   53 -
 136 files changed, 11239 deletions(-)
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-navigation-tests.ts
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-root-tests.ts
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.android.ts
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.d.ts
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.ios.ts
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-new.ts
 delete mode 100644 apps/automated/src/ui/bottom-navigation/bottom-navigation-tests.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-navigation-tests.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-root-tests.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-tests-native.android.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-tests-native.d.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-tests-native.ios.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-tests-new.ts
 delete mode 100644 apps/automated/src/ui/tabs/tabs-tests.ts
 delete mode 100644 apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-base-page.ts
 delete mode 100644 apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-css-properties.e2e-spec.ts
 delete mode 100644 apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
 delete mode 100644 apps/ui/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
 delete mode 100644 apps/ui/e2e/suites/tab-navigation/tabs/tabs-view-base-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/background-color-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/background-color-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/binding-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/binding-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/bottom-navigation-css-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/bottom-navigation-css-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/bottom-navigation-css-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/bottom-navigation-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/bottom-navigation-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/bottom-navigation-view-model.ts
 delete mode 100644 apps/ui/src/bottom-navigation/color-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/color-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/custom-tabstrip-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/custom-tabstrip-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/custom-tabstrip-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/dynamic-color-change-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/dynamic-color-change-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/dynamic-color-change-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/events-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/events-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/fancy-fonts-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/fancy-fonts-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/fancy-fonts-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/first-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/first-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/font-icons-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/font-icons-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/font-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/font-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/icon-change-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/icon-change-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/icon-title-placement-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/issue-5470-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/item-color-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/item-color-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/main-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/main-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/reselect-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/reselect-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/second-page.ts
 delete mode 100644 apps/ui/src/bottom-navigation/second-page.xml
 delete mode 100644 apps/ui/src/bottom-navigation/text-transform-page.css
 delete mode 100644 apps/ui/src/bottom-navigation/text-transform-page.xml
 delete mode 100644 apps/ui/src/tabs/background-color-page.css
 delete mode 100644 apps/ui/src/tabs/background-color-page.xml
 delete mode 100644 apps/ui/src/tabs/color-page.css
 delete mode 100644 apps/ui/src/tabs/color-page.xml
 delete mode 100644 apps/ui/src/tabs/custom-tabstrip-page.css
 delete mode 100644 apps/ui/src/tabs/custom-tabstrip-page.ts
 delete mode 100644 apps/ui/src/tabs/custom-tabstrip-page.xml
 delete mode 100644 apps/ui/src/tabs/default-page.ts
 delete mode 100644 apps/ui/src/tabs/default-page.xml
 delete mode 100644 apps/ui/src/tabs/dynamic-color-change-page.css
 delete mode 100644 apps/ui/src/tabs/dynamic-color-change-page.ts
 delete mode 100644 apps/ui/src/tabs/dynamic-color-change-page.xml
 delete mode 100644 apps/ui/src/tabs/events-page.ts
 delete mode 100644 apps/ui/src/tabs/events-page.xml
 delete mode 100644 apps/ui/src/tabs/first-page.ts
 delete mode 100644 apps/ui/src/tabs/first-page.xml
 delete mode 100644 apps/ui/src/tabs/font-icons-page.css
 delete mode 100644 apps/ui/src/tabs/font-icons-page.xml
 delete mode 100644 apps/ui/src/tabs/font-page.css
 delete mode 100644 apps/ui/src/tabs/font-page.xml
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs-inner-page-2.xml
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs-inner-page-3.xml
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs-inner-page-4.xml
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs-overflow.xml
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs.ts
 delete mode 100644 apps/ui/src/tabs/frame-in-tabs.xml
 delete mode 100644 apps/ui/src/tabs/highlight-color-page.css
 delete mode 100644 apps/ui/src/tabs/highlight-color-page.xml
 delete mode 100644 apps/ui/src/tabs/icon-change-page.ts
 delete mode 100644 apps/ui/src/tabs/icon-change-page.xml
 delete mode 100644 apps/ui/src/tabs/icon-title-placement-page.xml
 delete mode 100644 apps/ui/src/tabs/issue-5470-page.xml
 delete mode 100644 apps/ui/src/tabs/item-color-page.css
 delete mode 100644 apps/ui/src/tabs/item-color-page.xml
 delete mode 100644 apps/ui/src/tabs/main-page.ts
 delete mode 100644 apps/ui/src/tabs/main-page.xml
 delete mode 100644 apps/ui/src/tabs/nested-bottom-navigation-page.xml
 delete mode 100644 apps/ui/src/tabs/nested-layout-page.xml
 delete mode 100644 apps/ui/src/tabs/reselect-page.ts
 delete mode 100644 apps/ui/src/tabs/reselect-page.xml
 delete mode 100644 apps/ui/src/tabs/second-page.ts
 delete mode 100644 apps/ui/src/tabs/second-page.xml
 delete mode 100644 apps/ui/src/tabs/swipe-disabled-page.ts
 delete mode 100644 apps/ui/src/tabs/swipe-disabled-page.xml
 delete mode 100644 apps/ui/src/tabs/tab-strip-item-page.xml
 delete mode 100644 apps/ui/src/tabs/tab-strip-items-page.xml
 delete mode 100644 apps/ui/src/tabs/tabs-binding-page.ts
 delete mode 100644 apps/ui/src/tabs/tabs-binding-page.xml
 delete mode 100644 apps/ui/src/tabs/tabs-binding-view-model.ts
 delete mode 100644 apps/ui/src/tabs/tabs-page.ts
 delete mode 100644 apps/ui/src/tabs/tabs-page.xml
 delete mode 100644 apps/ui/src/tabs/tabs-position-page.xml
 delete mode 100644 apps/ui/src/tabs/text-transform-page.css
 delete mode 100644 apps/ui/src/tabs/text-transform-page.xml
 delete mode 100644 packages/core/platforms/ios/Podfile
 delete mode 100644 packages/core/ui/bottom-navigation/index.android.ts
 delete mode 100644 packages/core/ui/bottom-navigation/index.d.ts
 delete mode 100644 packages/core/ui/bottom-navigation/index.ios.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-content-item/index.android.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-content-item/index.d.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-content-item/index.ios.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-content-item/tab-content-item-common.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-navigation-base/index.d.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-navigation-base/index.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-strip-item/index.d.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-strip-item/index.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-strip/index.d.ts
 delete mode 100644 packages/core/ui/tab-navigation-base/tab-strip/index.ts
 delete mode 100644 packages/core/ui/tabs/index.android.ts
 delete mode 100644 packages/core/ui/tabs/index.d.ts
 delete mode 100644 packages/core/ui/tabs/index.ios.ts
 delete mode 100644 packages/core/ui/tabs/tabs-common.ts

diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-navigation-tests.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-navigation-tests.ts
deleted file mode 100644
index 01789168d..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-navigation-tests.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import * as TKUnit from '../../tk-unit';
-import * as helper from '../../ui-helper';
-import { Label } from '@nativescript/core/ui/label';
-import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
-import { Frame } from '@nativescript/core/ui/frame';
-import { Page } from '@nativescript/core/ui/page';
-import { ListView, ItemEventData } from '@nativescript/core/ui/list-view';
-import { BottomNavigation, TabContentItem, TabStrip, TabStripItem } from '@nativescript/core';
-import { Button } from '@nativescript/core/ui/button';
-
-var ASYNC = 2;
-
-function _createBottomNavigation(): BottomNavigation {
-	var tabView = new BottomNavigation();
-	tabView.id = 'BottomNavigation';
-
-	return tabView;
-}
-
-function _createContentItems(count: number): Array<TabContentItem> {
-	const items = new Array<TabContentItem>();
-	for (let i = 0; i < count; i++) {
-		const label = new Label();
-		label.text = 'Tab ' + i;
-		const tabEntry = new TabContentItem();
-		tabEntry.content = label;
-		items.push(tabEntry);
-	}
-
-	return items;
-}
-
-function _createTabStrip(count: number): TabStrip {
-	const items = new Array<TabStripItem>();
-	for (let i = 0; i < count; i++) {
-		let tabStripEntry = new TabStripItem();
-		tabStripEntry.title = 'Tab ' + i;
-		items.push(tabStripEntry);
-	}
-
-	const tabStrip = new TabStrip();
-	tabStrip.items = items;
-
-	return tabStrip;
-}
-
-function _createListView(): ListView {
-	var listView = new ListView();
-	listView.id = 'ListView';
-	var items = Array.apply(null, Array(10)).map(function (_, i) {
-		return i;
-	});
-
-	listView.on(ListView.itemLoadingEvent, function (args: ItemEventData) {
-		var button = <Button>args.view;
-		if (!button) {
-			button = new Button();
-			button.on(Button.tapEvent, _clickHandlerFactory(args.index));
-			args.view = button;
-		}
-
-		button.text = 'Button' + args.index;
-		button.id = button.text;
-	});
-
-	listView.items = items;
-
-	return listView;
-}
-
-function _clickHandlerFactory(index: number) {
-	return function () {
-		var pageFactory = function (): Page {
-			var detailsLabel = new Label();
-			detailsLabel.text = 'Details Page ' + index;
-			var detailsPage = new Page();
-			detailsPage.id = 'details-page';
-			detailsPage.content = detailsLabel;
-
-			return detailsPage;
-		};
-
-		helper.navigateWithHistory(pageFactory);
-	};
-}
-
-function _createFrameView(): Frame {
-	const frame = new Frame();
-	frame.navigate({ create: () => new Page() });
-
-	return frame;
-}
-
-export function testBackNavigationToTabViewWithNestedFramesShouldWork() {
-	// https://github.com/NativeScript/NativeScript/issues/6490
-	const topFrame = Frame.topmost();
-
-	let tabViewPage: Page;
-	let tabView: BottomNavigation;
-
-	const pageFactory = function (): Page {
-		tabView = _createBottomNavigation();
-		let items = Array<TabContentItem>();
-		let tabViewitem = new TabContentItem();
-		// tabViewitem.title = "Item1";
-		tabViewitem.content = _createFrameView();
-		items.push(tabViewitem);
-
-		let tabViewitem2 = new TabContentItem();
-		// tabViewitem2.title = "Item2";
-		tabViewitem2.content = _createFrameView();
-		items.push(tabViewitem2);
-
-		tabView.items = items;
-		tabView.tabStrip = _createTabStrip(2);
-
-		tabViewPage = new Page();
-		tabViewPage.id = 'tab-view-page';
-		tabViewPage.content = tabView;
-
-		return tabViewPage;
-	};
-
-	helper.waitUntilNavigatedFrom(() => topFrame.navigate(pageFactory), topFrame);
-
-	TKUnit.waitUntilReady(() => topFrame.currentPage === tabViewPage);
-	TKUnit.waitUntilReady(() => tabViewIsFullyLoaded(tabView));
-
-	// navigate to a different page
-	helper.waitUntilNavigatedFrom(() => topFrame.navigate({ create: () => new Page(), animated: false }), topFrame);
-
-	// navigate back to the page that hold the tabview with nested frames
-	topFrame.goBack();
-
-	// make sure the app did not crash
-	TKUnit.waitUntilReady(() => topFrame.navigationQueueIsEmpty());
-}
-
-export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithAListViewTheListViewIsThere() {
-	var topFrame = Frame.topmost();
-
-	let tabViewPage: Page;
-	let tabView: BottomNavigation;
-
-	let pageFactory = function (): Page {
-		tabView = _createBottomNavigation();
-		let items = Array<TabContentItem>();
-		let tabViewitem = new TabContentItem();
-		// tabViewitem.title = "List";
-		tabViewitem.content = _createListView();
-		items.push(tabViewitem);
-
-		let label = new Label();
-		label.text = 'About';
-		let aboutLayout = new StackLayout();
-		aboutLayout.id = 'AboutLayout';
-		aboutLayout.addChild(label);
-		tabViewitem = new TabContentItem();
-		// tabViewitem.title = "About";
-		tabViewitem.content = aboutLayout;
-		items.push(tabViewitem);
-
-		tabView.items = items;
-		tabView.tabStrip = _createTabStrip(2);
-
-		tabViewPage = new Page();
-		tabViewPage.id = 'tab-view-page';
-		tabViewPage.content = tabView;
-
-		return tabViewPage;
-	};
-
-	let rootPage = helper.getCurrentPage();
-
-	helper.navigateWithHistory(pageFactory);
-	TKUnit.waitUntilReady(() => topFrame.currentPage === tabViewPage);
-	TKUnit.waitUntilReady(() => tabViewIsFullyLoaded(tabView));
-
-	// This will navigate to a details page. The wait is inside the method.
-	_clickTheFirstButtonInTheListViewNatively(tabView);
-
-	Frame.goBack();
-	TKUnit.waitUntilReady(() => topFrame.navigationQueueIsEmpty()); //() => topFrame.currentPage === tabViewPage);
-
-	Frame.goBack();
-
-	TKUnit.waitUntilReady(() => topFrame.currentPage === rootPage);
-
-	TKUnit.assert(tabView.items[0].content instanceof ListView, 'ListView should be created when navigating back to the main page.');
-}
-
-function tabViewIsFullyLoaded(tabView: BottomNavigation): boolean {
-	if (!tabView.isLoaded) {
-		return false;
-	}
-
-	const i = tabView.selectedIndex;
-	if (i >= 0 && !tabView.items[i].isLoaded) {
-		return false;
-	}
-
-	if (tabView.android) {
-		const bottomNavigationBar = <org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar;
-		if (bottomNavigationBar.getItemCount() === 0) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
-	let topFrame = Frame.topmost();
-	let rootPage = helper.getCurrentPage();
-
-	let itemCount = 2;
-	let loadedEventsCount = [0, 0];
-	let unloadedEventsCount = [0, 0];
-
-	const tabView = _createBottomNavigation();
-	tabView.items = _createContentItems(itemCount);
-	tabView.tabStrip = _createTabStrip(itemCount);
-
-	function createLoadedFor(tabIndex: number) {
-		return function () {
-			loadedEventsCount[tabIndex] = loadedEventsCount[tabIndex] + 1;
-		};
-	}
-
-	function createUnloadedFor(tabIndex: number) {
-		return function () {
-			unloadedEventsCount[tabIndex] = unloadedEventsCount[tabIndex] + 1;
-		};
-	}
-
-	tabView.items.forEach((item, i) => {
-		item.content.on('loaded', createLoadedFor(i));
-		item.content.on('unloaded', createUnloadedFor(i));
-	});
-
-	const tabViewPage = new Page();
-	helper.navigateWithHistory(() => {
-		tabViewPage.content = tabView;
-
-		return tabViewPage;
-	});
-	TKUnit.waitUntilReady(() => tabViewIsFullyLoaded(tabView), ASYNC);
-
-	const detailsPage = new Page();
-	helper.navigateWithHistory(() => detailsPage);
-	TKUnit.assertEqual(topFrame.currentPage, detailsPage);
-
-	helper.goBack();
-	TKUnit.assertEqual(topFrame.currentPage, tabViewPage);
-
-	for (let i = 0; i < itemCount; i++) {
-		tabView.items[i].content.off('loaded');
-		tabView.items[i].content.off('unloaded');
-	}
-
-	helper.goBack();
-	TKUnit.assertEqual(topFrame.currentPage, rootPage);
-
-	topFrame.currentPage.id = null;
-
-	TKUnit.arrayAssert(loadedEventsCount, [2, 0]);
-	TKUnit.arrayAssert(unloadedEventsCount, [1, 0]);
-}
-
-function _clickTheFirstButtonInTheListViewNatively(tabView: BottomNavigation) {
-	if (tabView.android) {
-		const androidListView = <android.widget.ListView>tabView.items[0].content.nativeView;
-		// var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
-		// var androidListView = <android.widget.ListView>viewPager.getChildAt(0);
-		var stackLayout = <org.nativescript.widgets.StackLayout>androidListView.getChildAt(0);
-		var button = <android.widget.Button>stackLayout.getChildAt(0);
-		button.performClick();
-	} else {
-		const tableView = <UITableView>tabView.ios.selectedViewController.view.subviews[0];
-		const cell = <UITableViewCell>tableView.cellForRowAtIndexPath(NSIndexPath.indexPathForItemInSection(0, 0));
-		const btn = <UIButton>cell.contentView.subviews[0];
-		btn.sendActionsForControlEvents(UIControlEvents.TouchUpInside);
-	}
-}
diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-root-tests.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-root-tests.ts
deleted file mode 100644
index 397209d02..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-root-tests.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import * as TKUnit from '../../tk-unit';
-import { isAndroid } from '@nativescript/core/platform';
-import { _resetRootView } from '@nativescript/core/application/';
-import { Frame, NavigationEntry } from '@nativescript/core/ui/frame';
-import { Page } from '@nativescript/core/ui/page';
-// import { TabView, TabViewItem } from "@nativescript/core/ui/tab-view";
-import { BottomNavigation, TabContentItem, TabStrip, TabStripItem } from '@nativescript/core';
-
-function waitUntilNavigatedToMaxTimeout(pages: Page[], action: Function) {
-	const maxTimeout = 8;
-	let completed = 0;
-	function navigatedTo(args) {
-		args.object.page.off('navigatedTo', navigatedTo);
-		completed++;
-	}
-
-	pages.forEach((page) => page.on('navigatedTo', navigatedTo));
-	action();
-	TKUnit.waitUntilReady(() => completed === pages.length, maxTimeout);
-}
-
-function waitUntilTabViewReady(page: Page, action: Function) {
-	action();
-
-	if (isAndroid) {
-		TKUnit.waitUntilReady(() => page.frame._currentEntry.fragment.isAdded());
-	} else {
-		TKUnit.waitUntilReady(() => page.isLoaded);
-	}
-}
-
-function createPage(i: number) {
-	const page = new Page();
-	page.id = `Tab${i} Frame${i} Page${i}`;
-
-	return page;
-}
-
-function createFrame(i: number, page: Page) {
-	const frame = new Frame();
-	frame.navigate(() => page);
-	frame.id = `Tab${i} Frame${i}`;
-
-	return frame;
-}
-
-function createTabItem(i: number, frame: Frame) {
-	const tabEntry = new TabContentItem();
-	// tabEntry.title = "Tab " + i;
-	tabEntry.content = frame;
-	tabEntry['index'] = i;
-
-	return tabEntry;
-}
-
-function createTabItemsWithFrames(count: number) {
-	const items = [];
-
-	for (var i = 0; i < count; i++) {
-		const page = createPage(i);
-		const frame = createFrame(i, page);
-		const tabItem = createTabItem(i, frame);
-
-		items.push({ page, frame, tabItem });
-	}
-
-	return items;
-}
-
-function createTabStrip(count: number): TabStrip {
-	const items = new Array<TabStripItem>();
-	for (let i = 0; i < count; i++) {
-		let tabStripEntry = new TabStripItem();
-		tabStripEntry.title = 'Tab ' + i;
-		items.push(tabStripEntry);
-	}
-
-	const tabStrip = new TabStrip();
-	tabStrip.items = items;
-
-	return tabStrip;
-}
-
-export function test_frame_topmost_matches_selectedIndex() {
-	const items = createTabItemsWithFrames(3);
-	const tabView = new BottomNavigation();
-	tabView.items = items.map((item) => item.tabItem);
-	tabView.tabStrip = createTabStrip(3);
-
-	// iOS cannot preload tab items
-	// Android preloads 1 tab item to the sides by default
-	// set this to 0, so that both platforms behave the same.
-	// tabView.androidOffscreenTabLimit = 0;
-
-	const entry: NavigationEntry = {
-		create: () => tabView,
-	};
-
-	waitUntilNavigatedToMaxTimeout([items[0].page], () => _resetRootView(entry));
-	TKUnit.assertEqual(Frame.topmost().id, 'Tab0 Frame0');
-
-	waitUntilNavigatedToMaxTimeout([items[1].page], () => (tabView.selectedIndex = 1));
-	TKUnit.assertEqual(Frame.topmost().id, 'Tab1 Frame1');
-}
-
-export function test_no_preloading_on_index_change() {
-	let actualEventsRaised = [];
-
-	function resetActualEventsRaised() {
-		for (var i = 0; i < actualEventsRaised.length; i++) {
-			actualEventsRaised[i] = [];
-		}
-	}
-
-	function attachEventHandlers(i: number, item) {
-		actualEventsRaised.push([]);
-
-		const page = item.page;
-		page.on(Page.loadedEvent, () => actualEventsRaised[i].push(`${page.id} loaded`));
-		page.on(Page.unloadedEvent, () => actualEventsRaised[i].push(`${page.id} unloaded`));
-		page.on(Page.navigatingToEvent, () => actualEventsRaised[i].push(`${page.id} navigatingTo`));
-		page.on(Page.navigatingFromEvent, () => actualEventsRaised[i].push(`${page.id} navigatingFrom`));
-		page.on(Page.navigatedToEvent, () => actualEventsRaised[i].push(`${page.id} navigatedTo`));
-		page.on(Page.navigatedFromEvent, () => actualEventsRaised[i].push(`${page.id} navigatedFrom`));
-
-		const frame = item.frame;
-		frame.on(Frame.loadedEvent, () => actualEventsRaised[i].push(`${frame.id} loaded`));
-		frame.on(Frame.unloadedEvent, () => actualEventsRaised[i].push(`${frame.id} unloaded`));
-	}
-
-	const items = createTabItemsWithFrames(3);
-
-	items.forEach((item, i) => {
-		attachEventHandlers(i, item);
-	});
-
-	const tabView = new BottomNavigation();
-	tabView.items = items.map((item) => item.tabItem);
-	tabView.tabStrip = createTabStrip(3);
-
-	const entry: NavigationEntry = {
-		create: () => tabView,
-	};
-
-	waitUntilNavigatedToMaxTimeout([items[0].page], () => _resetRootView(entry));
-
-	const expectedEventsRaisedAfterTabCreated = [['Tab0 Frame0 loaded', 'Tab0 Frame0 Page0 navigatingTo', 'Tab0 Frame0 Page0 loaded', 'Tab0 Frame0 Page0 navigatedTo'], [], []];
-
-	TKUnit.assertDeepEqual(actualEventsRaised, expectedEventsRaisedAfterTabCreated);
-
-	resetActualEventsRaised();
-	waitUntilNavigatedToMaxTimeout([items[2].page], () => (tabView.selectedIndex = 2));
-
-	const expectedEventsRaisedAfterSelectThirdTab = [['Tab0 Frame0 Page0 unloaded', 'Tab0 Frame0 unloaded'], [], ['Tab2 Frame2 loaded', 'Tab2 Frame2 Page2 navigatingTo', 'Tab2 Frame2 Page2 loaded', 'Tab2 Frame2 Page2 navigatedTo']];
-
-	TKUnit.assertDeepEqual(actualEventsRaised, expectedEventsRaisedAfterSelectThirdTab);
-
-	resetActualEventsRaised();
-
-	waitUntilTabViewReady(items[0].page, () => (tabView.selectedIndex = 0));
-
-	const expectedEventsRaisedAfterReturnToFirstTab = [['Tab0 Frame0 Page0 loaded', 'Tab0 Frame0 loaded'], [], ['Tab2 Frame2 Page2 unloaded', 'Tab2 Frame2 unloaded']];
-
-	TKUnit.assertDeepEqual(actualEventsRaised, expectedEventsRaisedAfterReturnToFirstTab);
-}
-
-export function tearDownModule() {
-	const page = new Page();
-	const frame = new Frame();
-	frame.navigate(() => page);
-
-	const entry: NavigationEntry = {
-		create: () => frame,
-	};
-
-	waitUntilNavigatedToMaxTimeout([page], () => _resetRootView(entry));
-}
diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.android.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.android.ts
deleted file mode 100644
index 7a29ecfaf..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.android.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
-
-export function getNativeTabCount(tabView: BottomNavigation): number {
-	// there is no native tab content view implementation for Android Bottom Navigation
-	return tabView.items.length;
-}
-
-export function selectNativeTab(tabView: BottomNavigation, index: number): void {
-	const bottomNavigationBar = <org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar;
-
-	if (bottomNavigationBar) {
-		bottomNavigationBar.setSelectedPosition(index);
-	}
-}
-
-export function getNativeSelectedIndex(tabView: BottomNavigation): number {
-	// there is no native tab content view implementation for Android Bottom Navigation
-	return tabView.selectedIndex;
-}
-
-export function getNativeFont(tabView: BottomNavigation): any {
-	const tv: android.widget.TextView = (<org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar).getTextViewForItemAt(0);
-	if (tv) {
-		return {
-			typeface: tv.getTypeface(),
-			size: tv.getTextSize(),
-		};
-	}
-
-	return null;
-}
-
-export function getOriginalFont(tabView: BottomNavigation): any {
-	const tv: android.widget.TextView = (<org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar).getTextViewForItemAt(0);
-
-	return {
-		typeface: tv.getTypeface(),
-		size: tv.getTextSize(),
-	};
-}
diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.d.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.d.ts
deleted file mode 100644
index b3fc87168..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-//@private
-import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
-
-export function getNativeTabCount(tabView: BottomNavigation): number;
-export function selectNativeTab(tabView: BottomNavigation, index: number): void;
-export function getNativeSelectedIndex(tabView: BottomNavigation): number;
-export function getNativeFont(tabView: BottomNavigation): any;
-export function getOriginalFont(tabView: BottomNavigation): any;
diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.ios.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.ios.ts
deleted file mode 100644
index 080f36607..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-native.ios.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import tabViewModule = require('@nativescript/core/ui/tab-view');
-import { Font } from '@nativescript/core/ui/styling/font';
-
-export function getNativeTabCount(tabView: tabViewModule.TabView): number {
-	if (!tabView.ios.viewControllers) {
-		return 0;
-	}
-
-	return tabView.ios.viewControllers.count;
-}
-
-export function selectNativeTab(tabView: tabViewModule.TabView, index: number): void {
-	tabView.ios.selectedIndex = index;
-	tabView.ios.delegate.tabBarControllerDidSelectViewController(tabView.ios, tabView.ios.selectedViewController);
-}
-
-export function getNativeSelectedIndex(tabView: tabViewModule.TabView): number {
-	return tabView.ios.selectedIndex;
-}
-
-export function getNativeFont(tabView: tabViewModule.TabView): UIFont {
-	const tabBar = <UITabBar>tabView.ios.tabBar;
-	if (tabBar.items.count > 0) {
-		const currentAttrs = tabBar.items[0].titleTextAttributesForState(UIControlState.Normal);
-		if (currentAttrs) {
-			return currentAttrs.objectForKey(NSFontAttributeName);
-		}
-	}
-
-	return null;
-}
-
-export function getOriginalFont(tabView: tabViewModule.TabView): UIFont {
-	return (tabView.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(10));
-}
diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-new.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-new.ts
deleted file mode 100644
index 89f433951..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests-new.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Image, Label, BottomNavigation, Builder, TabContentItem, TabStrip, TabStripItem } from '@nativescript/core/ui';
-import * as TKUnit from '../../tk-unit';
-
-export function test_lowercase_declaration() {
-	const root = Builder.parse(`
-        <bottom-navigation>
-            <tab-strip id="tab-strip">
-                <tab-strip-item id="tab-strip-item">
-                    <image src="res://icon"  id="tab-strip-item-image" />
-                    <label text="test" id="tab-strip-item-label" />
-                </tab-strip-item>
-            </tab-strip>
-            <tab-content-item id="tab-content-item">
-                <label text="test" id="tab-content-item-label" />
-            </tab-content-item>
-        </bottom-navigation>
-    `);
-
-	const tabStrip = root.getViewById('tab-strip');
-	const tabStripItem = root.getViewById('tab-strip-item');
-	const tabStripItemImage = root.getViewById('tab-strip-item-image');
-	const tabStripItemLabel = root.getViewById('tab-strip-item-label');
-	const tabContentItem = root.getViewById('tab-content-item');
-	const tabContentItemLabel = root.getViewById('tab-content-item-label');
-
-	TKUnit.assert(root instanceof BottomNavigation, 'Expected result: BottomNavigation!; Actual result: ' + root);
-	TKUnit.assert(tabStrip instanceof TabStrip, 'Expected result: TabStrip!; Actual result: ' + tabStrip);
-	TKUnit.assert(tabStripItem instanceof TabStripItem, 'Expected result: TabStripItem!; Actual result: ' + tabStripItem);
-	TKUnit.assert(tabStripItemImage instanceof Image, 'Expected result: Image!; Actual result: ' + tabStripItemImage);
-	TKUnit.assert(tabStripItemLabel instanceof Label, 'Expected result: Label!; Actual result: ' + tabStripItemLabel);
-	TKUnit.assert(tabContentItem instanceof TabContentItem, 'Expected result: TabContentItem!; Actual result: ' + tabContentItem);
-	TKUnit.assert(tabContentItemLabel instanceof Label, 'Expected result: Label!; Actual result: ' + tabContentItemLabel);
-}
diff --git a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests.ts b/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests.ts
deleted file mode 100644
index edaebde74..000000000
--- a/apps/automated/src/ui/bottom-navigation/bottom-navigation-tests.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-import { UITest } from '../../ui-test';
-import { Label } from '@nativescript/core/ui/label';
-import * as TKUnit from '../../tk-unit';
-import * as helper from '../../ui-helper';
-import * as tabViewTestsNative from './bottom-navigation-tests-native';
-
-import { BottomNavigation, TabContentItem, TabStrip, TabStripItem, SelectedIndexChangedEventData } from '@nativescript/core';
-
-export class BottomNavigationTest extends UITest<BottomNavigation> {
-	public create(): BottomNavigation {
-		var tabView = new BottomNavigation();
-		tabView.id = 'TabView';
-
-		return tabView;
-	}
-
-	// public test_recycling() {
-	//     const setters = new Map<string, Array<any>>();
-	//     setters.set("items", this._createItems(3));
-	//     helper.nativeView_recycling_test(() => new BottomNavigation(), null, null, setters);
-	// }
-
-	_createContentItems(count: number): Array<TabContentItem> {
-		const items = new Array<TabContentItem>();
-		for (let i = 0; i < count; i++) {
-			const label = new Label();
-			label.text = 'Tab ' + i;
-			const tabEntry = new TabContentItem();
-			tabEntry.content = label;
-			items.push(tabEntry);
-		}
-
-		return items;
-	}
-
-	_createTabStrip(count: number): TabStrip {
-		const items = new Array<TabStripItem>();
-		for (let i = 0; i < count; i++) {
-			let tabStripEntry = new TabStripItem();
-			tabStripEntry.title = 'Tab ' + i;
-			items.push(tabStripEntry);
-		}
-
-		const tabStrip = new TabStrip();
-		tabStrip.items = items;
-
-		return tabStrip;
-	}
-
-	public tearDown() {
-		if (this.testView && this.testView.items) {
-			this.testView.items.length = 0;
-		}
-		super.tearDown();
-	}
-
-	public waitUntilSelectedItemIsFullyLoaded(): boolean {
-		const tabView = this.testView;
-		if (!tabView.isLoaded) {
-			return false;
-		}
-
-		const i = tabView.selectedIndex;
-		if (i >= 0 && !tabView.items[i].isLoaded) {
-			return false;
-		}
-
-		if (tabView.android) {
-			const bottomNavigationBar = <org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar;
-			if (bottomNavigationBar.getItemCount() === 0) {
-				return false;
-			}
-		}
-
-		return true;
-	}
-
-	public test_when_created_items_are_undefined = function () {
-		TKUnit.assertEqual(this.testView.items, undefined, 'Items should be undefined initally.');
-	};
-
-	public test_when_created_selected_index_is_undefined = function () {
-		TKUnit.assertEqual(this.testView.selectedIndex, -1, 'selectedIndex should be undefined initally.');
-	};
-
-	// TODO: Do we need this test?
-	public test_when_setting_items_to_non_empty_array_the_same_amount_of_native_tabs_is_created = function () {
-		this.testView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		let expectedValue = this.testView.items.length;
-		let actualValue = tabViewTestsNative.getNativeTabCount(this.testView);
-
-		TKUnit.assertEqual(actualValue, expectedValue, 'NativeItems not equal to JS items.');
-	};
-
-	// TODO: Do we need this test?
-	public test_when_setting_items_to_empty_array_zero_native_tabs_are_created = function () {
-		var tabView = this.testView;
-		tabView.items = [];
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedValue = tabView.items.length;
-		var actualValue = tabViewTestsNative.getNativeTabCount(tabView);
-
-		TKUnit.assertEqual(actualValue, expectedValue, 'Should have 0 native tabs.');
-	};
-
-	public test_selected_index_becomes_zero_when_items_bound_to_non_empty_array = function () {
-		var tabView = this.testView;
-		// var items = [];
-
-		// var StackLayout0 = new StackLayout();
-		// var label0 = new Label();
-		// label0.text = "Tab 0";
-		// StackLayout0.addChild(label0);
-		// var tabEntry0 = new TabContentItem();
-		// // tabEntry0.title = "Tab 0";
-		// tabEntry0.view = StackLayout0;
-		// items.push(tabEntry0);
-
-		// var StackLayout1 = new StackLayout();
-		// var label1 = new Label();
-		// label1.text = "Tab 1";
-		// StackLayout1.addChild(label1);
-		// var tabEntry1 = new TabContentItem();
-		// // tabEntry1.title = "Tab 1";
-		// tabEntry1.view = StackLayout1;
-		// items.push(tabEntry1);
-
-		tabView.items = this._createContentItems(5);
-
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedValue = 0;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'When bound selectedIndex should be 0.');
-	};
-
-	public test_selected_index_becomes_undefined_when_items_bound_to_empty_array = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		tabView.selectedIndex = 4;
-
-		tabView.items = [];
-
-		var expectedValue = -1;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex should be undefined.');
-	};
-
-	public test_selected_index_becomes_undefined_when_items_set_to_undefined = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		// tabView.selectedIndex = 4;
-
-		tabView.items = undefined;
-
-		var expectedValue = -1;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex should be undefined.');
-	};
-
-	public test_selected_index_becomes_undefined_when_items_set_to_null = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		tabView.selectedIndex = 4;
-		this.waitUntilTestElementIsLoaded();
-
-		tabView.items = null;
-
-		var expectedValue = -1;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex should be undefined.');
-	};
-
-	public test_items_is_resolved_correctly_if_set_before_view_is_loaded = function () {
-		var tabView = this.testView;
-		var expectedValue = 5;
-		tabView.items = this._createContentItems(expectedValue);
-		tabView.selectedIndex = 4;
-		this.waitUntilTestElementIsLoaded();
-
-		var actualValue = tabView.items.length;
-		TKUnit.assertEqual(actualValue, expectedValue, 'items.length should be 5');
-	};
-
-	public test_selected_index_is_resolved_correctly_if_set_before_view_is_loaded = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		var expectedValue = 4;
-		tabView.selectedIndex = expectedValue;
-		this.waitUntilTestElementIsLoaded();
-
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex');
-	};
-
-	public test_binding_to_tabitem_with_undefined_view_should_throw = function () {
-		var tabView = this.testView;
-		this.waitUntilTestElementIsLoaded();
-
-		TKUnit.assertThrows(() => {
-			let item = new TabContentItem();
-			// item.title = "Tab 0";
-			item.content = undefined;
-			tabView.items = [item];
-		}, 'Binding TabNavigation to a TabItem with undefined view should throw.');
-	};
-
-	public test_binding_to_tabitem_with_null_view_should_throw = function () {
-		var tabView = this.testView;
-		this.waitUntilTestElementIsLoaded();
-
-		TKUnit.assertThrows(() => {
-			let item = new TabContentItem();
-			// item.title = "Tab 0";
-			item.content = null;
-			tabView.items = [item];
-		}, 'Binding TabNavigation to a TabItem with null view should throw.');
-	};
-
-	public test_when_selecting_tab_natively_selectedIndex_is_updated_properly = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(2);
-		tabView.tabStrip = this._createTabStrip(2);
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedValue = 1;
-		tabViewTestsNative.selectNativeTab(tabView, expectedValue);
-		TKUnit.waitUntilReady(function () {
-			return tabView.selectedIndex === expectedValue;
-		}, helper.ASYNC);
-
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex');
-	};
-
-	public test_when_selecting_tab_natively_selectedIndexChangedEvent_is_raised = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		tabView.tabStrip = this._createTabStrip(5);
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedOldIndex = 3;
-		var expectedNewIndex = 4;
-		var actualOldIndex;
-		var actualNewIndex;
-
-		tabViewTestsNative.selectNativeTab(tabView, expectedOldIndex);
-		TKUnit.waitUntilReady(function () {
-			return tabView.selectedIndex === expectedOldIndex;
-		}, helper.ASYNC);
-
-		tabView.on(BottomNavigation.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
-			actualOldIndex = args.oldIndex;
-			actualNewIndex = args.newIndex;
-		});
-
-		tabViewTestsNative.selectNativeTab(tabView, expectedNewIndex);
-		TKUnit.waitUntilReady(function () {
-			return tabView.selectedIndex === expectedNewIndex;
-		}, helper.ASYNC);
-
-		TKUnit.assertEqual(actualOldIndex, expectedOldIndex, 'expectedOldIndex');
-		TKUnit.assertEqual(actualNewIndex, expectedNewIndex, 'expectedNewIndex');
-	};
-
-	// TODO: Do we need this test?
-	public test_when_setting_selectedIndex_programatically_selectedIndexChangedEvent_is_raised = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedOldIndex = 2;
-		var expectedNewIndex = 4;
-		var actualOldIndex;
-		var actualNewIndex;
-
-		tabView.selectedIndex = expectedOldIndex;
-		TKUnit.waitUntilReady(function () {
-			return tabViewTestsNative.getNativeSelectedIndex(tabView) === expectedOldIndex;
-		}, helper.ASYNC);
-
-		tabView.on(BottomNavigation.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
-			actualOldIndex = args.oldIndex;
-			actualNewIndex = args.newIndex;
-			TKUnit.assertEqual(args.object, tabView, 'args.object should be TabView');
-		});
-
-		tabView.selectedIndex = expectedNewIndex;
-		TKUnit.waitUntilReady(function () {
-			return tabViewTestsNative.getNativeSelectedIndex(tabView) === expectedNewIndex;
-		}, helper.ASYNC);
-
-		TKUnit.assertEqual(actualOldIndex, expectedOldIndex, 'expectedOldIndex');
-		TKUnit.assertEqual(actualNewIndex, expectedNewIndex, 'expectedNewIndex');
-	};
-
-	// TODO: fonts are not yet supported
-	// public test_font_is_reapplied_when_tab_items_change = function () {
-	//     const assertFontsAreEqual = (actual: any, expected: any, message?: string) => {
-	//         if (this.testView.ios) {
-	//             TKUnit.assertEqual(actual, expected, message);
-	//         } else {
-	//             TKUnit.assertEqual(actual.typeface, expected.typeface, `${message} [typeface]`);
-	//             TKUnit.assertEqual(actual.size, expected.size, `${message} [size]`);
-	//         }
-	//     }
-
-	//     this.testView.items = this._createContentItems(1);
-	//     this.testView.tabStrip = this._createTabStrip(1);
-	//     this.waitUntilSelectedItemIsFullyLoaded();
-
-	//     const originalFont = tabViewTestsNative.getOriginalFont(this.testView);
-	//     TKUnit.assertNotNull(originalFont, "Original Font should be applied");
-
-	//     this.testView.style.font = "20 Pacifico";
-	//     let nativeFont = tabViewTestsNative.getNativeFont(this.testView);
-	//     TKUnit.assertNotNull(nativeFont, "Native Font should not be null");
-	//     TKUnit.assertNotEqual(originalFont, nativeFont, "Font should be changed");
-
-	//     this.testView.items = this._createContentItems(2);
-	//     this.testView.tabStrip = this._createTabStrip(2);
-	//     this.waitUntilSelectedItemIsFullyLoaded();
-	//     assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be 20 Pacifico after rebinding items.");
-
-	//     this.testView.style.font = "bold 12 monospace";
-	//     nativeFont = tabViewTestsNative.getNativeFont(this.testView);
-
-	//     this.testView.items = this._createContentItems(3);
-	//     this.testView.tabStrip = this._createTabStrip(3);
-	//     this.waitUntilSelectedItemIsFullyLoaded();
-	//     assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be bold 12 monospace after rebinding items.");
-
-	//     this.testView.style.font = unsetValue;
-	//     assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), originalFont, "Font must be the original one after resetting the style.");
-	// }
-}
-
-export function createTestCase(): BottomNavigationTest {
-	return new BottomNavigationTest();
-}
diff --git a/apps/automated/src/ui/tabs/tabs-navigation-tests.ts b/apps/automated/src/ui/tabs/tabs-navigation-tests.ts
deleted file mode 100644
index 44023ca28..000000000
--- a/apps/automated/src/ui/tabs/tabs-navigation-tests.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import * as TKUnit from '../../tk-unit';
-import * as helper from '../../ui-helper';
-import { Label } from '@nativescript/core/ui/label';
-import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
-import { Frame } from '@nativescript/core/ui/frame';
-import { Page } from '@nativescript/core/ui/page';
-import { ListView, ItemEventData } from '@nativescript/core/ui/list-view';
-import { Tabs, TabContentItem, TabStrip, TabStripItem } from '@nativescript/core/ui/tabs';
-import { Button } from '@nativescript/core/ui/button';
-
-var ASYNC = 2;
-
-function _createTabsNavigation(): Tabs {
-	var tabView = new Tabs();
-	tabView.id = 'BottomNavigation';
-
-	return tabView;
-}
-
-function _createContentItems(count: number): Array<TabContentItem> {
-	const items = new Array<TabContentItem>();
-	for (let i = 0; i < count; i++) {
-		const label = new Label();
-		label.text = 'Tab ' + i;
-		const tabEntry = new TabContentItem();
-		tabEntry.content = label;
-		items.push(tabEntry);
-	}
-
-	return items;
-}
-
-function _createTabStrip(count: number): TabStrip {
-	const items = new Array<TabStripItem>();
-	for (let i = 0; i < count; i++) {
-		let tabStripEntry = new TabStripItem();
-		tabStripEntry.title = 'Tab ' + i;
-		items.push(tabStripEntry);
-	}
-
-	const tabStrip = new TabStrip();
-	tabStrip.items = items;
-
-	return tabStrip;
-}
-
-function _createListView(): ListView {
-	var listView = new ListView();
-	listView.id = 'ListView';
-	var items = Array.apply(null, Array(10)).map(function (_, i) {
-		return i;
-	});
-
-	listView.on(ListView.itemLoadingEvent, function (args: ItemEventData) {
-		var button = <Button>args.view;
-		if (!button) {
-			button = new Button();
-			button.on(Button.tapEvent, _clickHandlerFactory(args.index));
-			args.view = button;
-		}
-
-		button.text = 'Button' + args.index;
-		button.id = button.text;
-	});
-
-	listView.items = items;
-
-	return listView;
-}
-
-function _clickHandlerFactory(index: number) {
-	return function () {
-		var pageFactory = function (): Page {
-			var detailsLabel = new Label();
-			detailsLabel.text = 'Details Page ' + index;
-			var detailsPage = new Page();
-			detailsPage.id = 'details-page';
-			detailsPage.content = detailsLabel;
-
-			return detailsPage;
-		};
-
-		helper.navigateWithHistory(pageFactory);
-	};
-}
-
-function _createFrameView(): Frame {
-	const frame = new Frame();
-	frame.navigate({ create: () => new Page() });
-
-	return frame;
-}
-
-export function testBackNavigationToTabViewWithNestedFramesShouldWork() {
-	// https://github.com/NativeScript/NativeScript/issues/6490
-	const topFrame = Frame.topmost();
-
-	let tabViewPage: Page;
-	let tabView: Tabs;
-
-	const pageFactory = function (): Page {
-		tabView = _createTabsNavigation();
-		let items = Array<TabContentItem>();
-		let tabViewitem = new TabContentItem();
-		// tabViewitem.title = "Item1";
-		tabViewitem.content = _createFrameView();
-		items.push(tabViewitem);
-
-		let tabViewitem2 = new TabContentItem();
-		// tabViewitem2.title = "Item2";
-		tabViewitem2.content = _createFrameView();
-		items.push(tabViewitem2);
-
-		tabView.items = items;
-		tabView.tabStrip = _createTabStrip(2);
-
-		tabViewPage = new Page();
-		tabViewPage.id = 'tab-view-page';
-		tabViewPage.content = tabView;
-
-		return tabViewPage;
-	};
-
-	helper.waitUntilNavigatedFrom(() => topFrame.navigate(pageFactory), topFrame);
-
-	TKUnit.waitUntilReady(() => topFrame.currentPage === tabViewPage);
-	TKUnit.waitUntilReady(() => tabViewIsFullyLoaded(tabView));
-
-	// navigate to a different page
-	helper.waitUntilNavigatedFrom(() => topFrame.navigate({ create: () => new Page(), animated: false }), topFrame);
-
-	// navigate back to the page that hold the tabview with nested frames
-	topFrame.goBack();
-
-	// make sure the app did not crash
-	TKUnit.waitUntilReady(() => topFrame.navigationQueueIsEmpty());
-}
-
-export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithAListViewTheListViewIsThere() {
-	var topFrame = Frame.topmost();
-
-	let tabViewPage: Page;
-	let tabView: Tabs;
-
-	let pageFactory = function (): Page {
-		tabView = _createTabsNavigation();
-		let items = Array<TabContentItem>();
-		let tabViewitem = new TabContentItem();
-		// tabViewitem.title = "List";
-		tabViewitem.content = _createListView();
-		items.push(tabViewitem);
-
-		let label = new Label();
-		label.text = 'About';
-		let aboutLayout = new StackLayout();
-		aboutLayout.id = 'AboutLayout';
-		aboutLayout.addChild(label);
-		tabViewitem = new TabContentItem();
-		// tabViewitem.title = "About";
-		tabViewitem.content = aboutLayout;
-		items.push(tabViewitem);
-
-		tabView.items = items;
-		tabView.tabStrip = _createTabStrip(2);
-
-		tabViewPage = new Page();
-		tabViewPage.id = 'tab-view-page';
-		tabViewPage.content = tabView;
-
-		return tabViewPage;
-	};
-
-	let rootPage = helper.getCurrentPage();
-
-	helper.navigateWithHistory(pageFactory);
-	TKUnit.waitUntilReady(() => topFrame.currentPage === tabViewPage);
-	TKUnit.waitUntilReady(() => tabViewIsFullyLoaded(tabView));
-
-	// This will navigate to a details page. The wait is inside the method.
-	_clickTheFirstButtonInTheListViewNatively(tabView);
-
-	Frame.goBack();
-	TKUnit.waitUntilReady(() => topFrame.navigationQueueIsEmpty()); //() => topFrame.currentPage === tabViewPage);
-
-	Frame.goBack();
-
-	TKUnit.waitUntilReady(() => topFrame.currentPage === rootPage);
-
-	TKUnit.assert(tabView.items[0].content instanceof ListView, 'ListView should be created when navigating back to the main page.');
-}
-
-function tabViewIsFullyLoaded(tabView: Tabs): boolean {
-	if (!tabView.isLoaded) {
-		return false;
-	}
-
-	const i = tabView.selectedIndex;
-	if (i >= 0 && !tabView.items[i].isLoaded) {
-		return false;
-	}
-
-	if (tabView.android) {
-		const bottomNavigationBar = <org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar;
-		if (bottomNavigationBar && bottomNavigationBar.getItemCount() === 0) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
-	let topFrame = Frame.topmost();
-	let rootPage = helper.getCurrentPage();
-
-	let itemCount = 2;
-	let loadedEventsCount = [0, 0];
-	let unloadedEventsCount = [0, 0];
-
-	const tabView = _createTabsNavigation();
-	tabView.items = _createContentItems(itemCount);
-	tabView.tabStrip = _createTabStrip(itemCount);
-
-	function createLoadedFor(tabIndex: number) {
-		return function () {
-			loadedEventsCount[tabIndex] = loadedEventsCount[tabIndex] + 1;
-		};
-	}
-
-	function createUnloadedFor(tabIndex: number) {
-		return function () {
-			unloadedEventsCount[tabIndex] = unloadedEventsCount[tabIndex] + 1;
-		};
-	}
-
-	tabView.items.forEach((item, i) => {
-		item.content.on('loaded', createLoadedFor(i));
-		item.content.on('unloaded', createUnloadedFor(i));
-	});
-
-	const tabViewPage = new Page();
-	helper.navigateWithHistory(() => {
-		tabViewPage.content = tabView;
-
-		return tabViewPage;
-	});
-	TKUnit.waitUntilReady(() => tabViewIsFullyLoaded(tabView), ASYNC);
-
-	const detailsPage = new Page();
-	helper.navigateWithHistory(() => detailsPage);
-	TKUnit.assertEqual(topFrame.currentPage, detailsPage);
-
-	helper.goBack();
-	TKUnit.assertEqual(topFrame.currentPage, tabViewPage);
-
-	for (let i = 0; i < itemCount; i++) {
-		tabView.items[i].content.off('loaded');
-		tabView.items[i].content.off('unloaded');
-	}
-
-	helper.goBack();
-	TKUnit.assertEqual(topFrame.currentPage, rootPage);
-
-	topFrame.currentPage.id = null;
-
-	TKUnit.arrayAssert(loadedEventsCount, [2, 2]);
-	TKUnit.arrayAssert(unloadedEventsCount, [1, 1]);
-}
-
-function _clickTheFirstButtonInTheListViewNatively(tabView: Tabs) {
-	if (tabView.android) {
-		const androidListView = <android.widget.ListView>tabView.items[0].content.nativeView;
-		// var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
-		// var androidListView = <android.widget.ListView>viewPager.getChildAt(0);
-		var stackLayout = <org.nativescript.widgets.StackLayout>androidListView.getChildAt(0);
-		var button = <android.widget.Button>stackLayout.getChildAt(0);
-		button.performClick();
-	} else {
-		const tableView = <UITableView>tabView.viewController.viewControllers[0].view.subviews[0];
-		const cell = <UITableViewCell>tableView.cellForRowAtIndexPath(NSIndexPath.indexPathForItemInSection(0, 0));
-		const btn = <UIButton>cell.contentView.subviews[0];
-		btn.sendActionsForControlEvents(UIControlEvents.TouchUpInside);
-	}
-}
diff --git a/apps/automated/src/ui/tabs/tabs-root-tests.ts b/apps/automated/src/ui/tabs/tabs-root-tests.ts
deleted file mode 100644
index 3ee33bb6d..000000000
--- a/apps/automated/src/ui/tabs/tabs-root-tests.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as TKUnit from '../../tk-unit';
-import { Page, Frame, Tabs, TabContentItem, TabStrip, TabStripItem, NavigationEntry, Application } from '@nativescript/core';
-
-function waitUntilNavigatedToMaxTimeout(pages: Page[], action: Function) {
-	const maxTimeout = 8;
-	let completed = 0;
-	function navigatedTo(args) {
-		args.object.page.off('navigatedTo', navigatedTo);
-		completed++;
-	}
-
-	pages.forEach((page) => page.on('navigatedTo', navigatedTo));
-	action();
-	TKUnit.waitUntilReady(() => completed === pages.length, maxTimeout);
-}
-
-function createPage(i: number) {
-	const page = new Page();
-	page.id = `Tab${i} Frame${i} Page${i}`;
-
-	return page;
-}
-
-function createFrame(i: number, page: Page) {
-	const frame = new Frame();
-	frame.navigate(() => page);
-	frame.id = `Tab${i} Frame${i}`;
-
-	return frame;
-}
-
-function createTabItem(i: number, frame: Frame) {
-	const tabEntry = new TabContentItem();
-	// tabEntry.title = "Tab " + i;
-	tabEntry.content = frame;
-	tabEntry['index'] = i;
-
-	return tabEntry;
-}
-
-function createTabItemsWithFrames(count: number) {
-	const items = [];
-
-	for (var i = 0; i < count; i++) {
-		const page = createPage(i);
-		const frame = createFrame(i, page);
-		const tabItem = createTabItem(i, frame);
-
-		items.push({ page, frame, tabItem });
-	}
-
-	return items;
-}
-
-function createTabStrip(count: number): TabStrip {
-	const items = new Array<TabStripItem>();
-	for (let i = 0; i < count; i++) {
-		let tabStripEntry = new TabStripItem();
-		tabStripEntry.title = 'Tab ' + i;
-		items.push(tabStripEntry);
-	}
-
-	const tabStrip = new TabStrip();
-	tabStrip.items = items;
-
-	return tabStrip;
-}
-
-export function test_frame_topmost_matches_selectedIndex() {
-	const items = createTabItemsWithFrames(3);
-	const tabView = new Tabs();
-	tabView.items = items.map((item) => item.tabItem);
-	tabView.tabStrip = createTabStrip(3);
-
-	// iOS cannot preload tab items
-	// Android preloads 1 tab item to the sides by default
-	// set this to 0, so that both platforms behave the same.
-	// tabView.androidOffscreenTabLimit = 0;
-
-	const entry: NavigationEntry = {
-		create: () => tabView,
-	};
-
-	waitUntilNavigatedToMaxTimeout([items[0].page], () => Application.resetRootView(entry));
-	TKUnit.assertEqual(Frame.topmost().id, 'Tab0 Frame0');
-
-	waitUntilNavigatedToMaxTimeout([items[1].page], () => (tabView.selectedIndex = 1));
-	TKUnit.assertEqual(Frame.topmost().id, 'Tab1 Frame1');
-}
-
-// TODO: _resetRootView doesn't work with TabView or Tabs with pre-loading. The fragments that are removed crash the app with missing reference.
-// export function test_preloading_one_to_the_side_on_index_change() {
-//     let actualEventsRaised = [];
-
-//     function resetActualEventsRaised() {
-//         for (var i = 0; i < actualEventsRaised.length; i++) {
-//             actualEventsRaised[i] = [];
-//         }
-//     }
-
-//     function attachEventHandlers(i: number, item) {
-//         actualEventsRaised.push([]);
-
-//         const page = item.page;
-//         page.on(Page.loadedEvent, () => actualEventsRaised[i].push(`${page.id} loaded`));
-//         page.on(Page.unloadedEvent, () => actualEventsRaised[i].push(`${page.id} unloaded`));
-//         page.on(Page.navigatingToEvent, () => actualEventsRaised[i].push(`${page.id} navigatingTo`));
-//         page.on(Page.navigatingFromEvent, () => actualEventsRaised[i].push(`${page.id} navigatingFrom`));
-//         page.on(Page.navigatedToEvent, () => actualEventsRaised[i].push(`${page.id} navigatedTo`));
-//         page.on(Page.navigatedFromEvent, () => actualEventsRaised[i].push(`${page.id} navigatedFrom`));
-
-//         const frame = item.frame;
-//         frame.on(Frame.loadedEvent, () => actualEventsRaised[i].push(`${frame.id} loaded`));
-//         frame.on(Frame.unloadedEvent, () => actualEventsRaised[i].push(`${frame.id} unloaded`));
-//     }
-
-//     const items = createTabItemsWithFrames(3);
-
-//     items.forEach((item, i) => {
-//         attachEventHandlers(i, item);
-//     });
-
-//     const tabView = new Tabs();
-//     tabView.items = items.map(item => item.tabItem);
-//     tabView.tabStrip = createTabStrip(3);
-
-//     const entry: NavigationEntry = {
-//         create: () => tabView
-//     };
-
-//     waitUntilNavigatedToMaxTimeout([items[0].page], () => Application.resetRootView(entry));
-
-//     const expectedEventsRaisedAfterTabCreated = [
-//         [
-//             "Tab0 Frame0 loaded",
-//             "Tab0 Frame0 Page0 navigatingTo",
-//             "Tab0 Frame0 Page0 loaded",
-//             "Tab0 Frame0 Page0 navigatedTo",
-//         ],
-//         [],
-//         []
-//     ];
-
-//     TKUnit.assertDeepEqual(actualEventsRaised, expectedEventsRaisedAfterTabCreated);
-
-//     resetActualEventsRaised();
-//     waitUntilNavigatedToMaxTimeout([items[2].page], () => tabView.selectedIndex = 2);
-
-//     const expectedEventsRaisedAfterSelectThirdTab = [
-//         [
-//             "Tab0 Frame0 Page0 unloaded",
-//             "Tab0 Frame0 unloaded",
-//         ],
-//         [],
-//         [
-//             "Tab2 Frame2 loaded",
-//             "Tab2 Frame2 Page2 navigatingTo",
-//             "Tab2 Frame2 Page2 loaded",
-//             "Tab2 Frame2 Page2 navigatedTo"
-//         ]
-//     ];
-
-//     TKUnit.assertDeepEqual(actualEventsRaised, expectedEventsRaisedAfterSelectThirdTab);
-
-//     resetActualEventsRaised();
-
-//     waitUntilTabViewReady(items[0].page, () => tabView.selectedIndex = 0);
-
-//     const expectedEventsRaisedAfterReturnToFirstTab = [
-//         [
-//             "Tab0 Frame0 Page0 loaded",
-//             "Tab0 Frame0 loaded",
-//         ],
-//         [],
-//         [
-//             "Tab2 Frame2 Page2 unloaded",
-//             "Tab2 Frame2 unloaded",
-//         ]
-//     ];
-
-//     TKUnit.assertDeepEqual(actualEventsRaised, expectedEventsRaisedAfterReturnToFirstTab);
-// }
-
-export function tearDownModule() {
-	const page = new Page();
-	const frame = new Frame();
-	frame.navigate(() => page);
-
-	const entry: NavigationEntry = {
-		create: () => frame,
-	};
-
-	waitUntilNavigatedToMaxTimeout([page], () => Application.resetRootView(entry));
-}
diff --git a/apps/automated/src/ui/tabs/tabs-tests-native.android.ts b/apps/automated/src/ui/tabs/tabs-tests-native.android.ts
deleted file mode 100644
index 7a29ecfaf..000000000
--- a/apps/automated/src/ui/tabs/tabs-tests-native.android.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
-
-export function getNativeTabCount(tabView: BottomNavigation): number {
-	// there is no native tab content view implementation for Android Bottom Navigation
-	return tabView.items.length;
-}
-
-export function selectNativeTab(tabView: BottomNavigation, index: number): void {
-	const bottomNavigationBar = <org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar;
-
-	if (bottomNavigationBar) {
-		bottomNavigationBar.setSelectedPosition(index);
-	}
-}
-
-export function getNativeSelectedIndex(tabView: BottomNavigation): number {
-	// there is no native tab content view implementation for Android Bottom Navigation
-	return tabView.selectedIndex;
-}
-
-export function getNativeFont(tabView: BottomNavigation): any {
-	const tv: android.widget.TextView = (<org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar).getTextViewForItemAt(0);
-	if (tv) {
-		return {
-			typeface: tv.getTypeface(),
-			size: tv.getTextSize(),
-		};
-	}
-
-	return null;
-}
-
-export function getOriginalFont(tabView: BottomNavigation): any {
-	const tv: android.widget.TextView = (<org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar).getTextViewForItemAt(0);
-
-	return {
-		typeface: tv.getTypeface(),
-		size: tv.getTextSize(),
-	};
-}
diff --git a/apps/automated/src/ui/tabs/tabs-tests-native.d.ts b/apps/automated/src/ui/tabs/tabs-tests-native.d.ts
deleted file mode 100644
index 085904dd7..000000000
--- a/apps/automated/src/ui/tabs/tabs-tests-native.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-//@private
-import { TabView } from '@nativescript/core/ui/tab-view';
-
-export function getNativeTabCount(tabView: TabView): number;
-export function selectNativeTab(tabView: TabView, index: number): void;
-export function getNativeSelectedIndex(tabView: TabView): number;
-export function getNativeFont(tabView: TabView): any;
-export function getOriginalFont(tabView: TabView): any;
diff --git a/apps/automated/src/ui/tabs/tabs-tests-native.ios.ts b/apps/automated/src/ui/tabs/tabs-tests-native.ios.ts
deleted file mode 100644
index 04507ce9f..000000000
--- a/apps/automated/src/ui/tabs/tabs-tests-native.ios.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Tabs } from '@nativescript/core/ui/tabs';
-import { Font } from '@nativescript/core/ui/styling/font';
-
-// TODO: Should we add getCount to UIPageViewController???
-export function getNativeTabCount(tabView: Tabs): number {
-	if (!(<any>tabView).viewControllers) {
-		return 0;
-	}
-
-	return (<any>tabView).viewControllers.length;
-}
-
-// TODO: separate in another function with Tabs implementation - selectNativeTab()
-export function selectNativeTab(tabView: Tabs, index: number): void {
-	const item = tabView.items[index];
-	const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(1);
-
-	let itemController = (<any>item).__controller;
-	controllers.addObject(itemController);
-	let navigationDirection = UIPageViewControllerNavigationDirection.Forward;
-	tabView.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, false, null);
-	tabView.viewController.delegate.pageViewControllerDidFinishAnimatingPreviousViewControllersTransitionCompleted(tabView.viewController, true, null, true);
-}
-
-// TODO: Should we add getNativeSelectedIndex to UIPageViewController???
-export function getNativeSelectedIndex(tabView: Tabs): number {
-	return tabView.selectedIndex;
-}
-
-export function getNativeFont(tabView: Tabs): UIFont {
-	const tabBar = <UITabBar>tabView.viewController.tabBar;
-	if (tabBar.items.count > 0) {
-		const currentAttrs = tabBar.items[0].titleTextAttributesForState(UIControlState.Normal);
-		if (currentAttrs) {
-			return currentAttrs.objectForKey(NSFontAttributeName);
-		}
-	}
-
-	return null;
-}
-
-export function getOriginalFont(tabView: Tabs): UIFont {
-	return (tabView.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(10));
-}
diff --git a/apps/automated/src/ui/tabs/tabs-tests-new.ts b/apps/automated/src/ui/tabs/tabs-tests-new.ts
deleted file mode 100644
index a549cfc02..000000000
--- a/apps/automated/src/ui/tabs/tabs-tests-new.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Image, Label, Builder, TabContentItem, Tabs, TabStrip, TabStripItem } from '@nativescript/core/ui';
-import * as TKUnit from '../../tk-unit';
-
-export function test_lowercase_declaration() {
-	const root = Builder.parse(`
-        <tabs>
-            <tab-strip id="tab-strip">
-                <tab-strip-item id="tab-strip-item">
-                    <image src="res://icon"  id="tab-strip-item-image" />
-                    <label text="test" id="tab-strip-item-label" />
-                </tab-strip-item>
-            </tab-strip>
-            <tab-content-item id="tab-content-item">
-                <label text="test" id="tab-content-item-label" />
-            </tab-content-item>
-        </tabs>
-    `);
-
-	const tabStrip = root.getViewById('tab-strip');
-	const tabStripItem = root.getViewById('tab-strip-item');
-	const tabStripItemImage = root.getViewById('tab-strip-item-image');
-	const tabStripItemLabel = root.getViewById('tab-strip-item-label');
-	const tabContentItem = root.getViewById('tab-content-item');
-	const tabContentItemLabel = root.getViewById('tab-content-item-label');
-
-	TKUnit.assert(root instanceof Tabs, 'Expected result: Tabs!; Actual result: ' + root);
-	TKUnit.assert(tabStrip instanceof TabStrip, 'Expected result: TabStrip!; Actual result: ' + tabStrip);
-	TKUnit.assert(tabStripItem instanceof TabStripItem, 'Expected result: TabStripItem!; Actual result: ' + tabStripItem);
-	TKUnit.assert(tabStripItemImage instanceof Image, 'Expected result: Image!; Actual result: ' + tabStripItemImage);
-	TKUnit.assert(tabStripItemLabel instanceof Label, 'Expected result: Label!; Actual result: ' + tabStripItemLabel);
-	TKUnit.assert(tabContentItem instanceof TabContentItem, 'Expected result: TabContentItem!; Actual result: ' + tabContentItem);
-	TKUnit.assert(tabContentItemLabel instanceof Label, 'Expected result: Label!; Actual result: ' + tabContentItemLabel);
-}
diff --git a/apps/automated/src/ui/tabs/tabs-tests.ts b/apps/automated/src/ui/tabs/tabs-tests.ts
deleted file mode 100644
index 411f29a40..000000000
--- a/apps/automated/src/ui/tabs/tabs-tests.ts
+++ /dev/null
@@ -1,350 +0,0 @@
-import { UITest } from '../../ui-test';
-import { Label } from '@nativescript/core/ui/label';
-import * as TKUnit from '../../tk-unit';
-import * as helper from '../../ui-helper';
-import * as tabViewTestsNative from './tabs-tests-native';
-
-import { Tabs, TabContentItem, TabStrip, TabStripItem, SelectedIndexChangedEventData } from '@nativescript/core/ui/tabs';
-
-export class TabsTest extends UITest<Tabs> {
-	public create(): Tabs {
-		var tabView = new Tabs();
-		tabView.id = 'TabView';
-
-		return tabView;
-	}
-
-	// public test_recycling() {
-	//     const setters = new Map<string, Array<any>>();
-	//     setters.set("items", this._createItems(3));
-	//     helper.nativeView_recycling_test(() => new BottomNavigation(), null, null, setters);
-	// }
-
-	_createContentItems(count: number): Array<TabContentItem> {
-		const items = new Array<TabContentItem>();
-		for (let i = 0; i < count; i++) {
-			const label = new Label();
-			label.text = 'Tab ' + i;
-			const tabEntry = new TabContentItem();
-			tabEntry.content = label;
-			items.push(tabEntry);
-		}
-
-		return items;
-	}
-
-	_createTabStrip(count: number): TabStrip {
-		const items = new Array<TabStripItem>();
-		for (let i = 0; i < count; i++) {
-			let tabStripEntry = new TabStripItem();
-			tabStripEntry.title = 'Tab ' + i;
-			items.push(tabStripEntry);
-		}
-
-		const tabStrip = new TabStrip();
-		tabStrip.items = items;
-
-		return tabStrip;
-	}
-
-	public tearDown() {
-		if (this.testView && this.testView.items) {
-			this.testView.items.length = 0;
-		}
-		super.tearDown();
-	}
-
-	public waitUntilSelectedItemIsFullyLoaded(): boolean {
-		const tabView = this.testView;
-		if (!tabView.isLoaded) {
-			return false;
-		}
-
-		const i = tabView.selectedIndex;
-		if (i >= 0 && !tabView.items[i].isLoaded) {
-			return false;
-		}
-
-		if (tabView.android) {
-			const bottomNavigationBar = <org.nativescript.widgets.BottomNavigationBar>(<any>tabView)._bottomNavigationBar;
-			if (bottomNavigationBar.getItemCount() === 0) {
-				return false;
-			}
-		}
-
-		return true;
-	}
-
-	public test_when_created_items_are_undefined = function () {
-		TKUnit.assertEqual(this.testView.items, undefined, 'Items should be undefined initally.');
-	};
-
-	public test_when_created_selected_index_is_undefined = function () {
-		TKUnit.assertEqual(this.testView.selectedIndex, -1, 'selectedIndex should be undefined initally.');
-	};
-
-	// TODO: Do we need this test? The number of tabs is dynamic and isn't kept in the native implementation.
-	// TODO: Maybe test if all native tabBarItems are created.
-	public test_when_setting_items_to_non_empty_array_the_same_amount_of_native_tabs_is_created = function () {
-		this.testView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		let expectedValue = this.testView.items.length;
-		let actualValue = tabViewTestsNative.getNativeTabCount(this.testView);
-
-		TKUnit.assertEqual(actualValue, expectedValue, 'NativeItems not equal to JS items.');
-	};
-
-	// TODO: Do we need this test? The number of tabs is dynamic and isn't kept in the native implementation.
-	// TODO: Maybe test if all native tabBarItems are created.
-	public test_when_setting_items_to_empty_array_zero_native_tabs_are_created = function () {
-		var tabView = this.testView;
-		tabView.items = [];
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedValue = tabView.items.length;
-		var actualValue = tabViewTestsNative.getNativeTabCount(tabView);
-
-		TKUnit.assertEqual(actualValue, expectedValue, 'Should have 0 native tabs.');
-	};
-
-	public test_selected_index_becomes_zero_when_items_bound_to_non_empty_array = function () {
-		var tabView = this.testView;
-		// var items = [];
-
-		// var StackLayout0 = new StackLayout();
-		// var label0 = new Label();
-		// label0.text = "Tab 0";
-		// StackLayout0.addChild(label0);
-		// var tabEntry0 = new TabContentItem();
-		// // tabEntry0.title = "Tab 0";
-		// tabEntry0.view = StackLayout0;
-		// items.push(tabEntry0);
-
-		// var StackLayout1 = new StackLayout();
-		// var label1 = new Label();
-		// label1.text = "Tab 1";
-		// StackLayout1.addChild(label1);
-		// var tabEntry1 = new TabContentItem();
-		// // tabEntry1.title = "Tab 1";
-		// tabEntry1.view = StackLayout1;
-		// items.push(tabEntry1);
-
-		tabView.items = this._createContentItems(5);
-
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedValue = 0;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'When bound selectedIndex should be 0.');
-	};
-
-	public test_selected_index_becomes_undefined_when_items_bound_to_empty_array = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		tabView.selectedIndex = 4;
-
-		tabView.items = [];
-
-		var expectedValue = -1;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex should be undefined.');
-	};
-
-	public test_selected_index_becomes_undefined_when_items_set_to_undefined = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		// tabView.selectedIndex = 4;
-
-		tabView.items = undefined;
-
-		var expectedValue = -1;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex should be undefined.');
-	};
-
-	public test_selected_index_becomes_undefined_when_items_set_to_null = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		tabView.selectedIndex = 4;
-		this.waitUntilTestElementIsLoaded();
-
-		tabView.items = null;
-
-		var expectedValue = -1;
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex should be undefined.');
-	};
-
-	public test_items_is_resolved_correctly_if_set_before_view_is_loaded = function () {
-		var tabView = this.testView;
-		var expectedValue = 5;
-		tabView.items = this._createContentItems(expectedValue);
-		tabView.selectedIndex = 4;
-		this.waitUntilTestElementIsLoaded();
-
-		var actualValue = tabView.items.length;
-		TKUnit.assertEqual(actualValue, expectedValue, 'items.length should be 5');
-	};
-
-	public test_selected_index_is_resolved_correctly_if_set_before_view_is_loaded = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		var expectedValue = 4;
-		tabView.selectedIndex = expectedValue;
-		this.waitUntilTestElementIsLoaded();
-
-		var actualValue = tabView.selectedIndex;
-		TKUnit.assertEqual(actualValue, expectedValue, 'selectedIndex');
-	};
-
-	public test_binding_to_tabitem_with_undefined_view_should_throw = function () {
-		var tabView = this.testView;
-		this.waitUntilTestElementIsLoaded();
-
-		TKUnit.assertThrows(() => {
-			let item = new TabContentItem();
-			// item.title = "Tab 0";
-			item.content = undefined;
-			tabView.items = [item];
-		}, 'Binding TabNavigation to a TabItem with undefined view should throw.');
-	};
-
-	public test_binding_to_tabitem_with_null_view_should_throw = function () {
-		var tabView = this.testView;
-		this.waitUntilTestElementIsLoaded();
-
-		TKUnit.assertThrows(() => {
-			let item = new TabContentItem();
-			// item.title = "Tab 0";
-			item.content = null;
-			tabView.items = [item];
-		}, 'Binding TabNavigation to a TabItem with null view should throw.');
-	};
-
-	// TODO: times out
-	// public test_when_selecting_tab_natively_selectedIndex_is_updated_properly = function () {
-	//     var tabView = this.testView;
-	//     tabView.items = this._createContentItems(2);
-	//     this.waitUntilTestElementIsLoaded();
-
-	//     var expectedValue = 1;
-	//     tabViewTestsNative.selectNativeTab(tabView, expectedValue);
-	//     TKUnit.waitUntilReady(function () {
-	//         return tabView.selectedIndex === expectedValue;
-	//     }, helper.ASYNC);
-
-	//     var actualValue = tabView.selectedIndex;
-	//     TKUnit.assertEqual(actualValue, expectedValue, "selectedIndex");
-
-	// }
-
-	// TODO: times out
-	// public test_when_selecting_tab_natively_selectedIndexChangedEvent_is_raised = function () {
-	//     var tabView = this.testView;
-	//     tabView.items = this._createContentItems(5);
-	//     this.waitUntilTestElementIsLoaded();
-
-	//     var expectedOldIndex = 3;
-	//     var expectedNewIndex = 4;
-	//     var actualOldIndex;
-	//     var actualNewIndex;
-
-	//     tabViewTestsNative.selectNativeTab(tabView, expectedOldIndex);
-	//     TKUnit.waitUntilReady(function () {
-	//         return tabView.selectedIndex === expectedOldIndex;
-	//     }, 10);
-
-	//     tabView.on(Tabs.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
-	//         actualOldIndex = args.oldIndex;
-	//         actualNewIndex = args.newIndex;
-	//     });
-
-	//     tabViewTestsNative.selectNativeTab(tabView, expectedNewIndex);
-	//     TKUnit.waitUntilReady(function () {
-	//         return tabView.selectedIndex === expectedNewIndex;
-	//     }, helper.ASYNC);
-
-	//     TKUnit.assertEqual(actualOldIndex, expectedOldIndex, "expectedOldIndex");
-	//     TKUnit.assertEqual(actualNewIndex, expectedNewIndex, "expectedNewIndex");
-	// }
-
-	// TODO: Do we need this test?
-	public test_when_setting_selectedIndex_programatically_selectedIndexChangedEvent_is_raised = function () {
-		var tabView = this.testView;
-		tabView.items = this._createContentItems(5);
-		this.waitUntilTestElementIsLoaded();
-
-		var expectedOldIndex = 2;
-		var expectedNewIndex = 4;
-		var actualOldIndex;
-		var actualNewIndex;
-
-		tabView.selectedIndex = expectedOldIndex;
-		TKUnit.waitUntilReady(function () {
-			return tabViewTestsNative.getNativeSelectedIndex(tabView) === expectedOldIndex;
-		}, helper.ASYNC);
-
-		tabView.on(Tabs.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
-			actualOldIndex = args.oldIndex;
-			actualNewIndex = args.newIndex;
-			TKUnit.assertEqual(args.object, tabView, 'args.object should be TabView');
-		});
-
-		tabView.selectedIndex = expectedNewIndex;
-		TKUnit.waitUntilReady(function () {
-			return tabViewTestsNative.getNativeSelectedIndex(tabView) === expectedNewIndex;
-		}, helper.ASYNC);
-
-		TKUnit.assertEqual(actualOldIndex, expectedOldIndex, 'expectedOldIndex');
-		TKUnit.assertEqual(actualNewIndex, expectedNewIndex, 'expectedNewIndex');
-	};
-
-	//TODO: Font styling is not ready
-	// public test_font_is_reapplied_when_tab_items_change = function () {
-	//     const assertFontsAreEqual = (actual: any, expected: any, message?: string) => {
-	//         if (this.testView.ios) {
-	//             TKUnit.assertEqual(actual, expected, message);
-	//         } else {
-	//             TKUnit.assertEqual(actual.typeface, expected.typeface, `${message} [typeface]`);
-	//             TKUnit.assertEqual(actual.size, expected.size, `${message} [size]`);
-	//         }
-	//     }
-
-	//     this.testView.items = this._createContentItems(1);
-	//     this.testView.tabStrip = this._createTabStrip(1);
-	//     this.waitUntilSelectedItemIsFullyLoaded();
-
-	//     const originalFont = tabViewTestsNative.getOriginalFont(this.testView);
-	//     TKUnit.assertNotNull(originalFont, "Original Font should be applied");
-
-	//     this.testView.style.font = "20 Pacifico";
-	//     let nativeFont = tabViewTestsNative.getNativeFont(this.testView);
-	//     TKUnit.assertNotNull(nativeFont, "Native Font should not be null");
-	//     TKUnit.assertNotEqual(originalFont, nativeFont, "Font should be changed");
-
-	//     this.testView.items = this._createContentItems(2);
-	//     this.testView.tabStrip = this._createTabStrip(2);
-	//     this.waitUntilSelectedItemIsFullyLoaded();
-	//     assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be 20 Pacifico after rebinding items.");
-
-	//     this.testView.style.font = "bold 12 monospace";
-	//     nativeFont = tabViewTestsNative.getNativeFont(this.testView);
-
-	//     this.testView.items = this._createContentItems(3);
-	//     this.testView.tabStrip = this._createTabStrip(3);
-	//     this.waitUntilSelectedItemIsFullyLoaded();
-	//     assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be bold 12 monospace after rebinding items.");
-
-	//     this.testView.style.font = unsetValue;
-	//     assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), originalFont, "Font must be the original one after resetting the style.");
-	// }
-}
-
-export function createTestCase(): TabsTest {
-	return new TabsTest();
-}
diff --git a/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-base-page.ts b/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-base-page.ts
deleted file mode 100644
index 4d8ae709d..000000000
--- a/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-base-page.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { AppiumDriver } from "nativescript-dev-appium";
-import { TabNavigationBasePage } from "../tab-navigation-base-page";
-import { NsCapabilities } from "nativescript-dev-appium/lib/ns-capabilities";
-import { AutomationName } from "nativescript-dev-appium/lib/automation-name";
-
-export class BottomNavigationBasePage extends TabNavigationBasePage {
-    private mainWidgetXPath: string;
-    constructor(_driver: AppiumDriver) {
-        super(_driver, ["bottom-navigation"]);
-        this.loadMainWidgetXpath();
-    }
-
-    async getItems() {
-        return await this._driver.findElementsByXPath(`${this.mainWidgetXPath}/*`);
-    }
-
-    async mainWidget() {
-        return await this._driver.findElementByXPath(this.mainWidgetXPath);
-    }
-
-    private loadMainWidgetXpath() {
-        const automationName = (<NsCapabilities>this._driver.nsCapabilities).automationName;
-        if (this._driver.isAndroid
-            && automationName === AutomationName.UiAutomator1 || automationName === AutomationName.Appium) {
-            this.mainWidgetXPath = `//android.view.View[@content-desc="tabNavigation"]/android.widget.LinearLayout/android.widget.LinearLayout`;
-        } else if (this._driver.isAndroid && automationName === AutomationName.UiAutomator2) {
-            this.mainWidgetXPath = `//android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.LinearLayout/android.widget.LinearLayout`;
-        } else if (this._driver.isIOS) {
-            this.mainWidgetXPath = `//XCUIElementTypeOther[@name="tabNavigation"]/XCUIElementTypeTabBar`;
-        } else {
-            throw new Error("Run type is missing! Please, check appium settings and run test again!");
-        }
-    }
-}
diff --git a/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-css-properties.e2e-spec.ts b/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-css-properties.e2e-spec.ts
deleted file mode 100644
index 80aa0b4a6..000000000
--- a/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-css-properties.e2e-spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { nsCapabilities, createDriver, AppiumDriver, Direction } from "nativescript-dev-appium";
-import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
-import { Platform } from "mobile-devices-controller";
-import { setImageName } from "../../../helpers/image-helper";
-import { assert } from "chai";
-
-const suite = "tab-navigation";
-const spec = "bottom-navigation-css";
-const imagePrefix = `${suite}-${spec}`;
-
-describe(`${imagePrefix}-suite`, async function () {
-    let driver: AppiumDriver;
-    let bottomNavigationBasePage: BottomNavigationBasePage;
-
-    const samples = [
-        { sample: "text-transform: uppercase;", tab1: "IteM onE", tab2: "IteM twO" },
-        { sample: "text-transform: lowercase;", tab1: "IteM onE", tab2: "IteM twO" },
-        { sample: "text-transform: capitalize;", tab1: "IteM onE", tab2: "IteM twO" },
-        { sample: "text-transform: none;", tab1: "IteM onE", tab2: "IteM twO" },
-        { sample: "reset", tab1: "IteM onE", tab2: "IteM twO" },
-    ];
-
-    before(async function () {
-        this.skip();
-        nsCapabilities.testReporter.context = this;
-        driver = await createDriver();
-        await driver.restartApp();
-        bottomNavigationBasePage = new BottomNavigationBasePage(driver);
-        await bottomNavigationBasePage.init("css-text-transform");
-    });
-
-    after(async function () {
-        this.skip();
-        await bottomNavigationBasePage.endSuite();
-    });
-
-    afterEach(async function () {
-        this.skip();
-        if (this.currentTest.state === "failed") {
-            await driver.logTestArtifacts(this.currentTest.title);
-            await driver.restartApp();
-            await bottomNavigationBasePage.initSuite();
-        }
-    });
-
-    for (let index = 0; index < samples.length; index++) {
-        const sample = samples[index];
-        let imageName = `${spec}-${sample.sample.replace(/[^a-z]/ig, "-").replace(/(-+)/ig, "-").replace(/(_+)/ig, "_").replace(/-$/, "")}`;
-        it(imageName, async function () {
-            this.skip();
-            if (driver.platformName === Platform.ANDROID
-                && (sample.sample.toLowerCase() === "all"
-                    || sample.sample.toLowerCase() === "reset")) {
-                await driver.scroll(Direction.down, 400, 200, 300, 200);
-            }
-            const scenarioBtn = await driver.waitForElement(sample.sample);
-            await scenarioBtn.click();
-            imageName = setImageName(suite, spec, imageName);
-            await driver.imageHelper.compareScreen({ imageName: imageName });
-            const tabTwo = await driver.waitForElement(sample.tab2);
-            await tabTwo.click();
-            await driver.imageHelper.compareScreen({ imageName: imageName });
-
-            const imageComparisonResult = driver.imageHelper.hasImageComparisonPassed();
-            assert.isTrue(imageComparisonResult);
-
-            if (imageComparisonResult) {
-                const tabOne = await driver.waitForElement(sample.tab1);
-                await tabOne.click();
-            }
-        });
-    }
-});
diff --git a/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts b/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
deleted file mode 100644
index beecb78bb..000000000
--- a/apps/ui/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
+++ /dev/null
@@ -1,371 +0,0 @@
-import { nsCapabilities, createDriver, AppiumDriver, DeviceOrientation, logInfo } from "nativescript-dev-appium";
-import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
-import { assert } from "chai";
-import { setImageName } from "../../../helpers/image-helper";
-
-const suite = "tab-navigation";
-const spec = "bottom-navigation";
-
-describe(`${suite}-${spec}-suite`, async function () {
-    let driver: AppiumDriver;
-    let bottomNavigationBasePage: BottomNavigationBasePage;
-
-    before(async function () {
-        nsCapabilities.testReporter.context = this;
-        driver = await createDriver();
-        await driver.restartApp();
-        bottomNavigationBasePage = new BottomNavigationBasePage(driver);
-        await bottomNavigationBasePage.initSuite();
-    });
-
-    after(async function () {
-        await bottomNavigationBasePage.endSuite();
-    });
-
-    beforeEach(async function () {
-        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
-    });
-
-    afterEach(async function () {
-        const orientation = await driver.getOrientation();
-        if (orientation === DeviceOrientation.LANDSCAPE) {
-            await driver.setOrientation(DeviceOrientation.PORTRAIT);
-        }
-        if (this.currentTest.state === "failed") {
-            await driver.logTestArtifacts(this.currentTest.title);
-            await driver.resetApp();
-            await bottomNavigationBasePage.initSuite();
-        }
-    });
-
-    it(`${spec}-background-color`, async function () {
-        await bottomNavigationBasePage.navigateToSample("background-color");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    /*
-    * Bug
-    */
-    it(`${spec}-binding-add-items`, async function () {
-        await bottomNavigationBasePage.navigateToSample("binding");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        const addTabBtn = await driver.waitForElement("add-tab");
-        const addTabBtnRect = await addTabBtn.getActualRectangle();
-        const clickAddTab = async () => {
-            await driver.clickPoint((addTabBtnRect.y + addTabBtnRect.width) / 2, (addTabBtnRect.x + addTabBtnRect.height) / 2);
-        };
-
-        await clickAddTab();
-        await driver.imageHelper.compareScreen();
-
-        await clickAddTab();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.refreshTabItems();
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    /*
-    * Bug
-    */
-    it(`${spec}-binding-remove-items`, async function () {
-        await bottomNavigationBasePage.navigateToSample("binding");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        const removeTabBtn = await driver.waitForElement("remove-last-tab");
-        const removeTabBtnRect = await removeTabBtn.getActualRectangle();
-        const clickRemoveTab = async () => {
-            await driver.clickPoint((removeTabBtnRect.y + removeTabBtnRect.width) / 2, (removeTabBtnRect.x + removeTabBtnRect.height) / 2);
-        };
-
-        await clickRemoveTab();
-        await driver.imageHelper.compareScreen();
-
-        // Remove all items.
-        await clickRemoveTab();
-        await driver.imageHelper.compareScreen();
-
-        // add items
-        const addTabBtn = await driver.waitForElement("add-tab");
-        await addTabBtn.click();
-        await addTabBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.refreshTabItems();
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-bottom-navigation`, async function () {
-        await bottomNavigationBasePage.navigateToSample("bottom-navigation");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        const goToSecondBtn = await driver.waitForElement("goToSecond");
-        await goToSecondBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-color`, async function () {
-        await bottomNavigationBasePage.navigateToSample("color");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-fancy-fonts-select-tabs`, async function () {
-        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        for (let index = 1; index < 4; index++) {
-            await bottomNavigationBasePage.tabOnItem(index);
-            await driver.imageHelper.compareScreen();
-        }
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-fancy-fonts-selected-index`, async function () {
-        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
-        await bottomNavigationBasePage.refreshTabItems();
-
-        let selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
-        logInfo(`Click on "select second tab button"`);
-        await selectSecondTabFromCodeBehind.click();
-        await driver.imageHelper.compareScreen();
-
-        await driver.backgroundApp(1);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
-        logInfo(`Click on "select second tab button"`);
-        await selectSecondTabFromCodeBehind.click();
-        await driver.imageHelper.compareScreen();
-
-        await driver.backgroundApp(1);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(3);
-        await driver.imageHelper.compareScreen();
-
-        await driver.backgroundApp(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-fancy-fonts-change-orientation`, async function () {
-        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.setOrientation(DeviceOrientation.LANDSCAPE);
-        await driver.imageHelper.compareScreen();
-
-        await driver.backgroundApp(1);
-        if (driver.isAndroid) {
-            driver.imageHelper.resetDefaultOptions();
-        }
-        await driver.imageHelper.compareScreen();
-
-        await driver.setOrientation(DeviceOrientation.PORTRAIT);
-        if (driver.isAndroid) {
-            await driver.imageHelper.compareScreen(
-                {
-                    imageName: "tab-navigation-bottom-navigation-fancy-fonts-change-orientation_2.png",
-                    keepOriginalImageName: true
-                });
-        } else {
-            await driver.imageHelper.compareScreen();
-        }
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-font-icons`, async function () {
-        await bottomNavigationBasePage.navigateToSample("font-icons");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-icon-change`, async function () {
-        await bottomNavigationBasePage.navigateToSample("icon-change");
-        await bottomNavigationBasePage.refreshTabItems();
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(0);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-icon-title-placment`, async function () {
-        await bottomNavigationBasePage.navigateToSample("icon-title-placement");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-5470-issue`, async function () {
-        await bottomNavigationBasePage.navigateToSample("issue-5470");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-text-transform`, async function () {
-        await bottomNavigationBasePage.navigateToSample("text-transform");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-fonts`, async function () {
-        await bottomNavigationBasePage.navigateToSample("text-transform");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-custom-tabstrip`, async function () {
-        await bottomNavigationBasePage.navigateToSample("custom-tabstrip");
-        await driver.imageHelper.compareScreen();
-
-        const secondTab = await driver.waitForElement("second-tab");
-        await secondTab.click();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-item-color`, async function () {
-        await bottomNavigationBasePage.navigateToSample("item-color");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        // go through the tabs and check that they are loaded
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-dynamic-color-change`, async function () {
-        await bottomNavigationBasePage.navigateToSample("dynamic-color-change");
-        await bottomNavigationBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        // go through the tabs and check that they are loaded
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(0);
-        await driver.imageHelper.compareScreen();
-
-        // change icon sources and check the result
-        const changeIconSource = await driver.waitForElement("changeIconSource");
-        await changeIconSource.click();
-        await driver.imageHelper.compareScreen();
-
-        const changeStyleBtn = await driver.waitForElement("changeStyle");
-        await changeStyleBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        // change icon sources again
-        await changeIconSource.click();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        // change style again
-        await changeStyleBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        await bottomNavigationBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        await changeIconSource.click();
-        await driver.imageHelper.compareScreen();
-
-        // change style again
-        await changeStyleBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
-});
diff --git a/apps/ui/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts b/apps/ui/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
deleted file mode 100644
index ec078107b..000000000
--- a/apps/ui/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
+++ /dev/null
@@ -1,370 +0,0 @@
-import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
-import { TabsViewBasePage } from "./tabs-view-base-page";
-import { assert } from "chai";
-import { setImageName } from "../../../helpers/image-helper";
-import { NsCapabilities } from "nativescript-dev-appium/lib/ns-capabilities";
-import { AutomationName } from "nativescript-dev-appium/lib/automation-name";
-
-const suite = "tab-navigation";
-const spec = "tabs";
-const imagePrefix = `${suite}-${spec}`;
-
-describe(`${imagePrefix}-suite`, async function () {
-    let driver: AppiumDriver;
-    let tabsViewBasePage: TabsViewBasePage;
-
-    before(async function () {
-        nsCapabilities.testReporter.context = this;
-        driver = await createDriver();
-        await driver.restartApp();
-        tabsViewBasePage = new TabsViewBasePage(driver);
-        await tabsViewBasePage.initSuite();
-    });
-
-    after(async function () {
-        await tabsViewBasePage.endSuite();
-    });
-
-    beforeEach(async function () {
-        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
-    });
-
-    afterEach(async function () {
-        if (this.currentTest.state === "failed") {
-            await driver.logTestArtifacts(this.currentTest.title);
-            await driver.resetApp();
-            await tabsViewBasePage.initSuite();
-        }
-    });
-
-    it(`${imagePrefix}-background-color`, async function () {
-        await tabsViewBasePage.navigateToSample("background-color");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    // not all css is applied.
-    it(`${imagePrefix}-color`, async function () {
-        await tabsViewBasePage.navigateToSample("color");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-font`, async function () {
-        await tabsViewBasePage.navigateToSample("font");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(0);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-font-icons`, async function () {
-        await tabsViewBasePage.navigateToSample("font-icons");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        if (driver.isAndroid && (<NsCapabilities>driver.nsCapabilities).automationName === AutomationName.UiAutomator1
-            || driver.isAndroid && (<NsCapabilities>driver.nsCapabilities).automationName === AutomationName.Appium) {
-            await tabsViewBasePage.tabOnItem(1);
-        } else {
-            await tabsViewBasePage.tabOnItem(2);
-        }
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-highlight-color`, async function () {
-        await tabsViewBasePage.navigateToSample("highlight-color");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-icon-change`, async function () {
-        await tabsViewBasePage.navigateToSample("icon-change");
-        await tabsViewBasePage.refreshTabItems();
-
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(0);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-icon-title-placment`, async function () {
-        await tabsViewBasePage.navigateToSample("icon-title-placement");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-issue-5470`, async function () {
-        await tabsViewBasePage.navigateToSample("issue-5470");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-strip-item`, async function () {
-        await tabsViewBasePage.navigateToSample("strip-item");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-android-swipe-disabled`, async function () {
-        if (driver.isIOS) {
-            this.skip();
-        }
-        await tabsViewBasePage.navigateToSample("swipe-disabled");
-        await tabsViewBasePage.refreshTabItems();
-
-        await tabsViewBasePage.swipeRightToLeft();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-swipe`, async function () {
-        await tabsViewBasePage.navigateToSample("tabs");
-        await tabsViewBasePage.refreshTabItems();
-        await tabsViewBasePage.swipeRightToLeft();
-
-        await driver.imageHelper.compareScreen();
-        await tabsViewBasePage.swipeRightToLeft();
-
-        await driver.imageHelper.compareScreen();
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    /*
-    * Bug
-    */
-    it(`${imagePrefix}-binding-add-items`, async function () {
-        if (driver.isIOS) {
-            this.skip();
-        }
-        await tabsViewBasePage.navigateToSample("tabs-binding");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        const addTabBtn = await driver.waitForElement("add-tab");
-        const addTabBtnRect = await addTabBtn.getActualRectangle();
-        const clickAddTab = async () => {
-            await driver.clickPoint((addTabBtnRect.y + addTabBtnRect.width) / 2, (addTabBtnRect.x + addTabBtnRect.height) / 2);
-        };
-
-        await clickAddTab();
-        await driver.imageHelper.compareScreen();
-
-        await clickAddTab();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.refreshTabItems();
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    /*
-    * Bug
-    */
-    it(`${imagePrefix}-binding-remove-items`, async function () {
-        if (driver.isIOS) {
-            this.skip();
-        }
-        await tabsViewBasePage.navigateToSample("tabs-binding");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        const removeTabBtn = await driver.waitForElement("remove-last-tab");
-        const removeTabBtnRect = await removeTabBtn.getActualRectangle();
-        const clickRemoveTab = async () => {
-            await driver.clickPoint((removeTabBtnRect.y + removeTabBtnRect.width) / 2, (removeTabBtnRect.x + removeTabBtnRect.height) / 2);
-        };
-
-        await clickRemoveTab();
-        await driver.imageHelper.compareScreen();
-
-        // Remove all items.
-        await clickRemoveTab();
-        await driver.imageHelper.compareScreen();
-
-        // add items
-        const addTabBtn = await driver.waitForElement("add-tab");
-        await addTabBtn.click();
-        await addTabBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.refreshTabItems();
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-text-transform`, async function () {
-        await tabsViewBasePage.navigateToSample("text-transform");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.refreshTabItems();
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-custom-tabstrip`, async function () {
-        await tabsViewBasePage.navigateToSample("custom-tabstrip");
-        await driver.imageHelper.compareScreen();
-
-        const secondTab = await driver.waitForElement("second-tab");
-        await secondTab.click();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${imagePrefix}-frame-in-tabs`, async function () {
-        await tabsViewBasePage.navigateToSample("frame-in-tabs");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        // go through the tabs and check that they are loaded
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(3);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-item-color`, async function () {
-        await tabsViewBasePage.navigateToSample("item-color");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        // go through the tabs and check that they are loaded
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-dynamic-color-change`, async function () {
-        await tabsViewBasePage.navigateToSample("dynamic-color-change");
-        await tabsViewBasePage.refreshTabItems();
-        await driver.imageHelper.compareScreen();
-
-        // go through the tabs and check that they are loaded
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(0);
-        await driver.imageHelper.compareScreen();
-
-        // change icon sources and check the result
-        const changeIconSource = await driver.waitForElement("changeIconSource");
-        await changeIconSource.click();
-        await driver.imageHelper.compareScreen();
-
-        const changeStyleBtn = await driver.waitForElement("changeStyle");
-        await changeStyleBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        // change icon sources again
-        await changeIconSource.click();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(1);
-        await driver.imageHelper.compareScreen();
-
-        // change style again
-        await changeStyleBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        await tabsViewBasePage.tabOnItem(2);
-        await driver.imageHelper.compareScreen();
-
-        await changeIconSource.click();
-        await driver.imageHelper.compareScreen();
-
-        // change style again
-        await changeStyleBtn.click();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-});
diff --git a/apps/ui/e2e/suites/tab-navigation/tabs/tabs-view-base-page.ts b/apps/ui/e2e/suites/tab-navigation/tabs/tabs-view-base-page.ts
deleted file mode 100644
index d861dc766..000000000
--- a/apps/ui/e2e/suites/tab-navigation/tabs/tabs-view-base-page.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { AppiumDriver } from "nativescript-dev-appium";
-import { TabNavigationBasePage } from "../tab-navigation-base-page";
-import { NsCapabilities } from "nativescript-dev-appium/lib/ns-capabilities";
-import { AutomationName } from "nativescript-dev-appium/lib/automation-name";
-
-export class TabsViewBasePage extends TabNavigationBasePage {
-    private mainWidgetXPath: string;
-    constructor(_driver: AppiumDriver) {
-        super(_driver, ["tabs"]);
-        this.loadMainWidgetXpath();
-    }
-
-    async getItems() {
-        const items = await this._driver.findElementsByXPath(`${this.mainWidgetXPath}/*`);
-        if (this._driver.isIOS) {
-            items.shift();
-        }
-
-        return items;
-    }
-
-    async mainWidget() {
-        return await this._driver.findElementByXPath(this.mainWidgetXPath);
-    }
-
-    private loadMainWidgetXpath() {
-        const automationName = (<NsCapabilities>this._driver.nsCapabilities).automationName;
-        if (this._driver.isAndroid
-            && automationName === AutomationName.UiAutomator1 || automationName === AutomationName.Appium) {
-            this.mainWidgetXPath = `//android.view.View[@content-desc="tabNavigation"]/android.widget.HorizontalScrollView/android.widget.LinearLayout`;
-        } else if (this._driver.isAndroid && automationName === AutomationName.UiAutomator2) {
-            this.mainWidgetXPath = `//android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.HorizontalScrollView/android.widget.LinearLayout`;
-        } else if (this._driver.isIOS) {
-            this.mainWidgetXPath = `//XCUIElementTypeOther[@name="tabNavigation"]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeCollectionView`;
-        } else {
-            throw new Error("Run type is missing! Please, check appium settings and run test again!");
-        }
-    }
-}
diff --git a/apps/ui/src/bottom-navigation/background-color-page.css b/apps/ui/src/bottom-navigation/background-color-page.css
deleted file mode 100644
index 407509eba..000000000
--- a/apps/ui/src/bottom-navigation/background-color-page.css
+++ /dev/null
@@ -1,19 +0,0 @@
-BottomNavigation {
-  background-color: gold;
-}
-
-TabContentItem.special {
-  background-color: olive;
-}
-
-TabStrip {
-  background-color: skyblue;
-}
-
-TabStripItem.special {
-  background-color: teal;
-}
-
-TabStripItem.special:active {
-  background-color: yellowgreen;
-}
diff --git a/apps/ui/src/bottom-navigation/background-color-page.xml b/apps/ui/src/bottom-navigation/background-color-page.xml
deleted file mode 100644
index ec640501c..000000000
--- a/apps/ui/src/bottom-navigation/background-color-page.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation"  >
-    <TabStrip>
-        <TabStripItem title="First" class="special"></TabStripItem>
-        <TabStripItem title="Second"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/binding-page.ts b/apps/ui/src/bottom-navigation/binding-page.ts
deleted file mode 100644
index f2cec7631..000000000
--- a/apps/ui/src/bottom-navigation/binding-page.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { BottomNavigationViewModel } from './bottom-navigation-view-model';
-
-export function bottomNavigaitonLoaded(args) {
-	const bottomNav = args.object.page;
-	bottomNav.bindingContext = new BottomNavigationViewModel();
-}
diff --git a/apps/ui/src/bottom-navigation/binding-page.xml b/apps/ui/src/bottom-navigation/binding-page.xml
deleted file mode 100644
index 4ff2adb8d..000000000
--- a/apps/ui/src/bottom-navigation/binding-page.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<Page class="page" navigatingTo="navigatingTo">
-
-  <ActionBar title="BottomNavigation binding" icon="" class="action-bar">
-  </ActionBar>
-
-    <GridLayout rows="auto,*">
-    <StackLayout row="0" >
-        <Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
-        <Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
-
-    </StackLayout>
-        <GridLayout row="1">
-            <BottomNavigation automationText="tabNavigation"  loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
-                <TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
-                </TabStrip>
-            </BottomNavigation>
-        </GridLayout>
-    </GridLayout>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/bottom-navigation-css-page.css b/apps/ui/src/bottom-navigation/bottom-navigation-css-page.css
deleted file mode 100644
index d688ad6e7..000000000
--- a/apps/ui/src/bottom-navigation/bottom-navigation-css-page.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */
diff --git a/apps/ui/src/bottom-navigation/bottom-navigation-css-page.ts b/apps/ui/src/bottom-navigation/bottom-navigation-css-page.ts
deleted file mode 100644
index 0bd4e21bd..000000000
--- a/apps/ui/src/bottom-navigation/bottom-navigation-css-page.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { View } from '@nativescript/core/ui/core/view';
-import { Page } from '@nativescript/core/ui/page';
-
-export function loaded(args) {
-	const page = <Page>(<View>args.object).page;
-	const view = page.getViewById('bottomNavigation');
-	(<any>view).textTransform = 'capitalize';
-}
-
-export function applyTap(args) {
-	const page = <Page>(<View>args.object).page;
-	const css = '#bottomNavigation { ' + args.object.tag + ' }';
-	page.css = css;
-}
-
-export function resetTap(args) {
-	const page = <Page>(<View>args.object).page;
-	page.css = '';
-}
diff --git a/apps/ui/src/bottom-navigation/bottom-navigation-css-page.xml b/apps/ui/src/bottom-navigation/bottom-navigation-css-page.xml
deleted file mode 100644
index 00f99eaaa..000000000
--- a/apps/ui/src/bottom-navigation/bottom-navigation-css-page.xml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
-  <BottomNavigation automationText="tabNavigation"  id="bottomNavigation" >
-    <TabStrip>
-      <TabStripItem title="IteM onE"></TabStripItem>
-      <TabStripItem title="IteM twO"></TabStripItem>
-      <TabStripItem title="IteM threE"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <GridLayout>
-          <ScrollView>
-            <StackLayout>
-              <Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
-              <Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
-              <Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
-              <Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
-              <Button text="reset" tap="resetTap" style.fontSize="8"/>
-            </StackLayout>
-          </ScrollView>
-      </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-      <GridLayout>
-          <Label text="Item 2"/>
-      </GridLayout>
-    </TabContentItem>
-
-        <TabContentItem>
-      <GridLayout>
-       <Label text="Item 3"/>
-      </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/bottom-navigation-page.ts b/apps/ui/src/bottom-navigation/bottom-navigation-page.ts
deleted file mode 100644
index 6480031b7..000000000
--- a/apps/ui/src/bottom-navigation/bottom-navigation-page.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { EventData } from '@nativescript/core/data/observable';
-import { Page } from '@nativescript/core/ui/page';
-import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
-
-export function goToFirst(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-
-	bottomNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-
-	bottomNav.selectedIndex = 1;
-}
diff --git a/apps/ui/src/bottom-navigation/bottom-navigation-page.xml b/apps/ui/src/bottom-navigation/bottom-navigation-page.xml
deleted file mode 100644
index 5bd180910..000000000
--- a/apps/ui/src/bottom-navigation/bottom-navigation-page.xml
+++ /dev/null
@@ -1,59 +0,0 @@
-<Page>
-
-  <ActionBar title="BottomNavigation" icon="" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation id="bottomNav"  automationText="tabNavigation" >
-    <TabStrip iosIconRenderingMode="alwaysOriginal">
-      <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="News" />
-      </TabStripItem>
-      <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="Places" />
-      </TabStripItem>
-      <TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
-            <TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" automationText="goToFirst" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" automationText="goToFirst" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
-      </StackLayout>
-    </TabContentItem>
-        <TabContentItem>
-      <StackLayout>
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
-      </StackLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/bottom-navigation-view-model.ts b/apps/ui/src/bottom-navigation/bottom-navigation-view-model.ts
deleted file mode 100644
index 13c3bb366..000000000
--- a/apps/ui/src/bottom-navigation/bottom-navigation-view-model.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
-import { Label } from '@nativescript/core/ui/label';
-import { Observable } from '@nativescript/core/data/observable';
-import { TabStripItem } from '@nativescript/core/ui/tab-navigation-base/tab-strip-item';
-import { TabContentItem } from '@nativescript/core/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();
-	}
-
-	public createItems() {
-		console.log('Create item');
-
-		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++;
-	}
-
-	public removeLastItem() {
-		console.log('Remove item');
-		this.tabStripItems.pop();
-		this.tabContentItems.pop();
-	}
-
-	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.content = gridlayout;
-
-		return contentItem;
-	}
-}
diff --git a/apps/ui/src/bottom-navigation/color-page.css b/apps/ui/src/bottom-navigation/color-page.css
deleted file mode 100644
index 3b7744d0d..000000000
--- a/apps/ui/src/bottom-navigation/color-page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-BottomNavigation {
-  color: gold;
-}
-
-TabContentItem.special {
-  color: olive;
-}
-
-TabStrip {
-  color: skyblue;
-}
-
-TabStripItem.special {
-  color: teal;
-}
-
-TabStripItem.special:active {
-  color: yellowgreen;
-}
-
-TabStripItem.nested Label {
-  color: teal;
-}
-
-TabStripItem.nested:active Label {
-  color: yellowgreen;
-}
diff --git a/apps/ui/src/bottom-navigation/color-page.xml b/apps/ui/src/bottom-navigation/color-page.xml
deleted file mode 100644
index c2e5e59c6..000000000
--- a/apps/ui/src/bottom-navigation/color-page.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="BottomNavigation color" icon="" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation">
-    <TabStrip>
-        <TabStripItem title="first" class="special"></TabStripItem>
-        <TabStripItem title="second"></TabStripItem>
-        <TabStripItem class="nested">
-            <Label text="third" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/custom-tabstrip-page.css b/apps/ui/src/bottom-navigation/custom-tabstrip-page.css
deleted file mode 100644
index 0f7802b4d..000000000
--- a/apps/ui/src/bottom-navigation/custom-tabstrip-page.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.custom-tabstrip {
-  height: 100;
-  vertical-align: bottom;
-  ios-overflow-safe-area-enabled: false;
-}
-
-.custom-tabstripitem {
-  height: 80;
-  width: 80;
-  vertical-align: center;
-  horizontal-align: center;
-  clip-path: circle(100% at 50% 50%);
-}
-
-.custom-title {
-  color: white;
-  vertical-align: center;
-  horizontal-align: center;
-}
-
-.skyblue {
-  background-color: skyblue;
-}
-
-.gold {
-  background-color: gold;
-}
-
-.olive {
-  background-color: olive;
-}
diff --git a/apps/ui/src/bottom-navigation/custom-tabstrip-page.ts b/apps/ui/src/bottom-navigation/custom-tabstrip-page.ts
deleted file mode 100644
index f903d87ae..000000000
--- a/apps/ui/src/bottom-navigation/custom-tabstrip-page.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { EventData } from '@nativescript/core/data/observable';
-import { Page } from '@nativescript/core/ui/page';
-import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
-
-export function goToFirst(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-
-	bottomNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-
-	bottomNav.selectedIndex = 1;
-}
-
-export function goToThird(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-
-	bottomNav.selectedIndex = 2;
-}
diff --git a/apps/ui/src/bottom-navigation/custom-tabstrip-page.xml b/apps/ui/src/bottom-navigation/custom-tabstrip-page.xml
deleted file mode 100644
index f5d923c72..000000000
--- a/apps/ui/src/bottom-navigation/custom-tabstrip-page.xml
+++ /dev/null
@@ -1,41 +0,0 @@
-<Page>
-
-  <ActionBar title="BottomNavigation Custom TabStrip" icon="" class="action-bar">
-  </ActionBar>
-
-  <GridLayout>
-    <GridLayout>
-      <BottomNavigation id="bottomNav"  automationText="tabNavigation" >
-        <TabContentItem>
-          <GridLayout backgroundColor="skyblue">
-            <Label text="First View"/>
-          </GridLayout>
-        </TabContentItem>
-        <TabContentItem>
-          <GridLayout backgroundColor="gold">
-            <Label text="Second View"/>
-          </GridLayout>
-        </TabContentItem>
-        <TabContentItem>
-          <GridLayout backgroundColor="olive">
-            <Label text="Third View"/>
-          </GridLayout>
-        </TabContentItem>
-      </BottomNavigation>
-    </GridLayout>
-
-    <GridLayout columns="*, *, *" class="custom-tabstrip">
-      <GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
-        <Label text="First" class="custom-title"></Label>
-      </GridLayout>
-
-      <GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
-        <Label text="Second" class="custom-title"></Label>
-      </GridLayout>
-
-      <GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
-        <Label text="Third" class="custom-title"></Label>
-      </GridLayout>
-    </GridLayout>
-  </GridLayout>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/dynamic-color-change-page.css b/apps/ui/src/bottom-navigation/dynamic-color-change-page.css
deleted file mode 100644
index 7b8624417..000000000
--- a/apps/ui/src/bottom-navigation/dynamic-color-change-page.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.font-awesome {
-    font-family: "FontAwesome";
-}
-
-.font-size {
-    font-size: 36;
-}
-
-TabStripItem:active {
-    background-color: magenta;
-}
-
-.tabsClass0 {
-}
-
-.tabsClass1 {
-    background-color: #79d2a6;
-    highlight-color: green;
-    selected-item-color: yellow;
-    un-selected-item-color: blue;
-}
-
-.tabsClass2 {
-    background-color: orangered;
-    highlight-color: lightgreen;
-    selected-item-color: whitesmoke;
-    un-selected-item-color: pink;
-}
\ No newline at end of file
diff --git a/apps/ui/src/bottom-navigation/dynamic-color-change-page.ts b/apps/ui/src/bottom-navigation/dynamic-color-change-page.ts
deleted file mode 100644
index 4ca15df70..000000000
--- a/apps/ui/src/bottom-navigation/dynamic-color-change-page.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { View } from '@nativescript/core/ui/core/view';
-import { Page } from '@nativescript/core/ui/page';
-import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
-
-export function onButtonTap(args) {
-	const page = <Page>(<View>args.object).page;
-	const bottomNavigation = <BottomNavigation>page.getViewById('bottomNavigation');
-
-	switch (bottomNavigation.tabStrip.className) {
-		case 'tabsClass0':
-			bottomNavigation.tabStrip.className = 'tabsClass1';
-			break;
-		case 'tabsClass1':
-			bottomNavigation.tabStrip.className = 'tabsClass2';
-			break;
-		case 'tabsClass2':
-			bottomNavigation.tabStrip.className = 'tabsClass0';
-			break;
-	}
-}
-
-export function onChangeIconSourceTap(args) {
-	const page = <Page>(<View>args.object).page;
-	const bottomNavigation = <BottomNavigation>page.getViewById('bottomNavigation');
-
-	const tabStripItem0 = bottomNavigation.tabStrip.items[0];
-	const tabStripItem1 = bottomNavigation.tabStrip.items[1];
-	const tabStripItem2 = bottomNavigation.tabStrip.items[2];
-
-	const iconSource0 = tabStripItem0.iconSource;
-
-	tabStripItem0.iconSource = tabStripItem1.iconSource;
-
-	tabStripItem1.iconClass = 'font-awesome font-size';
-	tabStripItem1.iconSource = tabStripItem2.iconSource;
-
-	tabStripItem2.iconClass = 'font-awesome font-size';
-	tabStripItem2.iconSource = iconSource0;
-}
diff --git a/apps/ui/src/bottom-navigation/dynamic-color-change-page.xml b/apps/ui/src/bottom-navigation/dynamic-color-change-page.xml
deleted file mode 100644
index 989fab9ed..000000000
--- a/apps/ui/src/bottom-navigation/dynamic-color-change-page.xml
+++ /dev/null
@@ -1,44 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd">
-  <GridLayout rows="auto,*">
-    <StackLayout row="0" >
-        <Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
-        <Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
-    </StackLayout>
-    <GridLayout row="1">
-        <BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
-            <TabStrip class="tabsClass0">
-                <TabStripItem>
-                    <Label text="Home"></Label>
-                    <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
-                </TabStripItem>
-                <TabStripItem>
-                    <Label text="Favorites"></Label>
-                    <Image src="res://add_to_fav"></Image>
-                </TabStripItem>
-                <TabStripItem>
-                    <Label text="Up"></Label>
-                    <Image src="res://up"></Image>
-                </TabStripItem>
-            </TabStrip>
-            <TabContentItem>
-                <GridLayout>
-                    <Label text="Home Page" class="h2 text-center">
-                    </Label>
-                </GridLayout>
-            </TabContentItem>
-            <TabContentItem>
-                <GridLayout>
-                    <Label text="Favorites Page" class="h2 text-center">
-                    </Label>
-                </GridLayout>
-            </TabContentItem>
-            <TabContentItem>
-                <GridLayout>
-                    <Label text="Up Page" class="h2 text-center">
-                    </Label>
-                </GridLayout>
-            </TabContentItem>
-        </BottomNavigation>
-    </GridLayout>
-  </GridLayout>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/events-page.ts b/apps/ui/src/bottom-navigation/events-page.ts
deleted file mode 100644
index 3d02e8cf5..000000000
--- a/apps/ui/src/bottom-navigation/events-page.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { EventData } from '@nativescript/core/data/observable';
-import { Page } from '@nativescript/core/ui/page';
-import { Tabs, SelectedIndexChangedEventData } from '@nativescript/core/ui/tabs';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst');
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('bottomNav');
-	bottomNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond');
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('bottomNav');
-	bottomNav.selectedIndex = 1;
-}
-
-export function goToThird(args: EventData) {
-	console.log('---> goToThird');
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('bottomNav');
-	bottomNav.selectedIndex = 2;
-}
-
-export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-	console.log('---> onSelectedIndexChanged', args.eventName);
-	console.log('---> oldIndex', args.oldIndex);
-	console.log('---> newIndex', args.newIndex);
-}
-
-export function onFirstTabStripItemTap(args: EventData) {
-	console.log('---> onFirstTabStripItemTap', args.eventName);
-}
-
-export function onSecondTabStripItemTap(args: EventData) {
-	console.log('---> onSecondTabStripItemTap', args.eventName);
-}
-
-export function onThirdTabStripItemTap(args: EventData) {
-	console.log('---> onThirdTabStripItemTap', args.eventName);
-}
diff --git a/apps/ui/src/bottom-navigation/events-page.xml b/apps/ui/src/bottom-navigation/events-page.xml
deleted file mode 100644
index 174a28d3f..000000000
--- a/apps/ui/src/bottom-navigation/events-page.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-<Page>
-
-  <BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
-
-    <TabStrip>
-      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
-      <TabStripItem tap="onSecondTabStripItemTap">
-        <Label text="Second" />
-      </TabStripItem>
-      <TabStripItem title="First" tap="onThirdTabStripItemTap">
-        <Label text="Third" />
-      </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View" backgroundColor="red" />
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="Second View" backgroundColor="green" />
-        <Button tap="goToThird" text="go to thrid" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View" backgroundColor="blue" />
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-
-  </BottomNavigation>
-
-</Page>
diff --git a/apps/ui/src/bottom-navigation/fancy-fonts-page.css b/apps/ui/src/bottom-navigation/fancy-fonts-page.css
deleted file mode 100644
index 09114148a..000000000
--- a/apps/ui/src/bottom-navigation/fancy-fonts-page.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.font-awesome {
-    font-family: "FontAwesome";
-}
-
-Page {
-    background-color: tomato;
-}
-
-ActionBar {
-    background-color: aquamarine;
-}
-
-Button {
-    background-color: lightskyblue;
-}
-
-BottomNavigation {
-    background-color: lightgreen;
-}
-
-#lastStripItem {
-    color: greenyellow;
-    background-color: black;
-}
-
-TabStripItem:active,
-#lastStripItem:active {
-    background-color: coral;
-}
-
-#second-tab-content-item {
-    background-color: blueviolet;
-}
-
-#third-tab-content-item {
-    background-color: blue;
-}
-
-#fourth-tab-content-item {
-    background-color: gray;
-}
-
-#fifth-tab-content-item {
-    background-color: brown;
-}
diff --git a/apps/ui/src/bottom-navigation/fancy-fonts-page.ts b/apps/ui/src/bottom-navigation/fancy-fonts-page.ts
deleted file mode 100644
index e90399058..000000000
--- a/apps/ui/src/bottom-navigation/fancy-fonts-page.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EventData, Page, BottomNavigation } from '@nativescript/core';
-
-export const selectTab = (args: EventData) => {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNavigation');
-
-	const index = (<any>args.object).tag;
-	bottomNav.selectedIndex = index;
-};
diff --git a/apps/ui/src/bottom-navigation/fancy-fonts-page.xml b/apps/ui/src/bottom-navigation/fancy-fonts-page.xml
deleted file mode 100644
index 0de62853a..000000000
--- a/apps/ui/src/bottom-navigation/fancy-fonts-page.xml
+++ /dev/null
@@ -1,82 +0,0 @@
-<Page>
-  <ActionBar title="BottomNavigation" icon="" class="action-bar">
-  </ActionBar>
-  <BottomNavigation id="bottomNavigation" automationText="tabNavigation"  class="font-awesome">
-    <TabStrip iosIconRenderingMode="alwaysOriginal">
-      <TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
-      <TabStripItem iconSource="font://&#xf206;" title="icon">
-      </TabStripItem>
-
-      <TabStripItem iconSource="res://up" title="ICON-RES"></TabStripItem>
-
-      <TabStripItem title="Simply Long Title"></TabStripItem>
-
-      <TabStripItem iconSource="res://icon" id="lastStripItem" title="LAST"></TabStripItem>
-
-    </TabStrip>
-    <TabContentItem>
-      <GridLayout rows="*, *, *, 40" columns="*, *">
-        <Label text="iconSource: " row="0" col="0" />
-        <Image src="res://baseline_motorcycle_black_24" style="border-color: gray; border-width: 2px;" row="0" col="1" />
-        <Label text="text: " row="1" col="0" />
-        <Label text="motorcycle-res" row="1" col="1" />
-        <Label text="background-color: aquamarine; from selected item" style="background-color: aquamarine;" row="2" colSpan="2" />
-        <Button tap="selectTab" text="selectSecondTab" automationText="selectSecondTab" tag="1" row="3" colSpan="2" />
-      </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem id="second-tab-content-item">
-      <StackLayout>
-        <WrapLayout orientation="horizontal">
-          <Label text="font: " automationText="fa-bicycle-icon-content" />
-          <Label text="font://&#xf206;" />
-        </WrapLayout>
-        <WrapLayout orientation="horizontal">
-          <Label text="title: " />
-          <Label text="fa-bicycle-font-awesome" />
-        </WrapLayout>
-        <Label text="background-color: blueviolet;" style="background-color: blueviolet;" />
-        <Button tap="selectTab" text="selectLastTab" automationText="selectSecondTab" tag="4" row="2" colSpan="2" />
-      </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem id="third-tab-content-item">
-      <StackLayout>
-        <WrapLayout orientation="horizontal">
-          <Label text="iconSource: " automationText="icon-res-content"></Label>
-          <Image src="res://up" style="border-color: gray; border-width: 2px;"></Image>
-        </WrapLayout>
-        <WrapLayout orientation="horizontal">
-          <Label text="title: " automationText="icon-res-content"></Label>
-          <Label text="ICON-RES"></Label>
-        </WrapLayout>
-        <Label text="background-color: blue;" style="background-color: blue;"></Label>
-      </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem id="fourth-tab-content-item">
-      <StackLayout>
-        <WrapLayout orientation="horizontal">
-          <Label text="title: "></Label>
-          <Label text="Simply Long Title"></Label>
-        </WrapLayout>
-        <Label text="background-color: gray;" style="background-color: gray;"></Label>
-      </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem id="fifth-tab-content-item">
-      <StackLayout>
-        <WrapLayout orientation="horizontal">
-          <Label text="iconSource: "></Label>
-          <Image src="res://icon" style="border-color: gray; border-width: 2px;"></Image>
-        </WrapLayout>
-           <WrapLayout orientation="horizontal">
-          <Label text="title: "></Label>
-          <Label text="LAST"></Label>
-        </WrapLayout>
-        <Label text="background-color: brown;" style="background-color: brown;">></Label>
-      </StackLayout>
-
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/first-page.ts b/apps/ui/src/bottom-navigation/first-page.ts
deleted file mode 100644
index 2abae4fcb..000000000
--- a/apps/ui/src/bottom-navigation/first-page.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { EventData } from '@nativescript/core/data/observable';
-import { Button } from '@nativescript/core/ui/button';
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond Page');
-	const button = <Button>args.object;
-	button.page.frame.navigate('bottom-navigation/second-page');
-}
-
-export function goBack(args: EventData) {
-	console.log('---> goBack');
-	const button = <Button>args.object;
-	button.page.frame.goBack();
-}
diff --git a/apps/ui/src/bottom-navigation/first-page.xml b/apps/ui/src/bottom-navigation/first-page.xml
deleted file mode 100644
index 0f47fd902..000000000
--- a/apps/ui/src/bottom-navigation/first-page.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<Page backgroundColor="lightgreen" actionBarHidden="true">
-  <StackLayout>
-    <Label text="First Page"  />
-    <Button tap="goToSecond" text="go to second page" />
-    <Button tap="goBack" text="go to back" />
-  </StackLayout>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/font-icons-page.css b/apps/ui/src/bottom-navigation/font-icons-page.css
deleted file mode 100644
index 57076da81..000000000
--- a/apps/ui/src/bottom-navigation/font-icons-page.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.font-awesome {
-  font-family: "FontAwesome";
-}
-
-.font-size {
-  font-size: 36;
-}
-
-TabStrip {
-  color: mediumvioletred;
-}
-
-TabStripItem {
-  color: skyblue;
-}
-
-TabStripItem:active {
-  color: darkblue;
-}
-
-TabStripItem.special Image {
-  color: lightgreen;
-}
-
-TabStripItem.special:active Image {
-  color: darkgreen;
-}
-
-TabStripItem.special Label {
-  color: gold;
-}
-
-TabStripItem.special:active Label {
-  color: darkgoldenrod;
-}
-
-TabStripItem:active .font-size {
-  font-size: 10;
-}
diff --git a/apps/ui/src/bottom-navigation/font-icons-page.xml b/apps/ui/src/bottom-navigation/font-icons-page.xml
deleted file mode 100644
index 31862f9c5..000000000
--- a/apps/ui/src/bottom-navigation/font-icons-page.xml
+++ /dev/null
@@ -1,63 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation" >
-    <TabStrip>
-        <!-- font family + font size + color -->
-        <TabStripItem class="special">
-            <Label text="All Set"/>
-            <Image src="font://&#xF10B;" class="font-awesome font-size" />
-        </TabStripItem>
-
-        <!-- default font + valid char code -->
-        <TabStripItem>
-            <Label text="Invalid Font" />
-            <Image src="font://&#xF10B;" />
-        </TabStripItem>
-
-        <!-- font family + invalid char code -->
-        <TabStripItem>
-            <Label text="Invalid Char" />
-            <Image src="font://&#xF556;" class="font-awesome font-size"/>
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <StackLayout>
-            <Label text="char code: phone" />
-            <Label text="font: Font Awesome" />
-            <Label text="font size: 36" />
-            <Label text="icon color inactive: lightgreen" />
-            <Label text="icon color active: darkgreen" />
-            <Label text="title color inactive: gold" />
-            <Label text="title color active: darkgoldenrod" />
-        </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <StackLayout>
-            <Label text="char code: phone" />
-            <Label text="font: default/invalid" />
-            <Label text="font size: default" />
-            <Label text="icon color inactive: skyblue" />
-            <Label text="icon color active: darkblue" />
-            <Label text="title color inactive: skyblue" />
-            <Label text="title color active: darkblue" />
-        </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <StackLayout>
-            <Label text="char code: invalid" />
-            <Label text="font: Font Awesome" />
-            <Label text="font size: 36" />
-            <Label text="icon color inactive: skyblue" />
-            <Label text="icon color active: darkblue" />
-            <Label text="title color inactive: skyblue" />
-            <Label text="title color active: darkblue" />
-        </StackLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/font-page.css b/apps/ui/src/bottom-navigation/font-page.css
deleted file mode 100644
index 57b0eda89..000000000
--- a/apps/ui/src/bottom-navigation/font-page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-BottomNavigation {
-  font: 24 'Times New Roman', Times, serif;
-}
-
-TabContentItem.special {
-  font: italic bold 12 Georgia, serif;
-}
-
-TabStrip {
-  font: 15 arial, sans-serif;
-}
-
-TabStripItem.special {
-  font: 12 monospace;
-}
-
-TabStripItem.special:active {
-  font: 16 monospace;
-}
-
-TabStripItem.nested Label {
-  font: 12 monospace;
-}
-
-TabStripItem.nested:active Label {
-  font: 16 monospace;
-}
diff --git a/apps/ui/src/bottom-navigation/font-page.xml b/apps/ui/src/bottom-navigation/font-page.xml
deleted file mode 100644
index 923e63667..000000000
--- a/apps/ui/src/bottom-navigation/font-page.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="BottomNavigation font" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation">
-    <TabStrip>
-        <TabStripItem title="first" class="special"></TabStripItem>
-        <TabStripItem title="second"></TabStripItem>
-        <TabStripItem class="nested">
-            <Label text="third" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/icon-change-page.ts b/apps/ui/src/bottom-navigation/icon-change-page.ts
deleted file mode 100644
index 6285b75ee..000000000
--- a/apps/ui/src/bottom-navigation/icon-change-page.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { BottomNavigation, SelectedIndexChangedEventData } from '@nativescript/core/ui/bottom-navigation';
-
-export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-	const bottomNav = <BottomNavigation>args.object;
-
-	const newItem = bottomNav.tabStrip.items[args.newIndex];
-	if (newItem) {
-		newItem.iconSource = 'res://icon';
-		newItem.title = 'selected';
-	}
-
-	const oldItem = bottomNav.tabStrip.items[args.oldIndex];
-	if (oldItem) {
-		oldItem.iconSource = 'res://testlogo';
-		oldItem.title = 'unselected';
-	}
-}
diff --git a/apps/ui/src/bottom-navigation/icon-change-page.xml b/apps/ui/src/bottom-navigation/icon-change-page.xml
deleted file mode 100644
index f721ccef5..000000000
--- a/apps/ui/src/bottom-navigation/icon-change-page.xml
+++ /dev/null
@@ -1,23 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
-    <ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
-    </ActionBar>
-
-    <BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation"  >
-        <TabStrip iosIconRenderingMode="alwaysOriginal">
-            <TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
-            <TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
-        </TabStrip>
-
-        <TabContentItem>
-            <GridLayout>
-                <Label text="first tab"/>
-            </GridLayout>
-        </TabContentItem>
-
-        <TabContentItem>
-            <GridLayout>
-                <Label text="second tab"/>
-            </GridLayout>
-        </TabContentItem>
-    </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/icon-title-placement-page.xml b/apps/ui/src/bottom-navigation/icon-title-placement-page.xml
deleted file mode 100644
index d83d6e898..000000000
--- a/apps/ui/src/bottom-navigation/icon-title-placement-page.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<Page class="page">
-  <ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation"  >
-    <TabStrip>
-        <TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
-        <TabStripItem iconSource="res://add_to_fav"></TabStripItem>
-        <TabStripItem title="Title"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Title and icon" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Only icon" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Only title" />
-        </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/issue-5470-page.xml b/apps/ui/src/bottom-navigation/issue-5470-page.xml
deleted file mode 100644
index ee8e67afd..000000000
--- a/apps/ui/src/bottom-navigation/issue-5470-page.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
-
-    <ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
-    </ActionBar>
-
-    <BottomNavigation automationText="tabNavigation" >
-        <TabStrip>
-            <TabStripItem title="Tab1"></TabStripItem>
-            <TabStripItem title="Tab2"></TabStripItem>
-        </TabStrip>
-
-        <TabContentItem>
-            <GridLayout rows="*, auto" columns="*">
-                <StackLayout row="0" backgroundColor="lightblue"></StackLayout>
-                <StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
-            </GridLayout>
-        </TabContentItem>
-
-        <TabContentItem>
-            <GridLayout rows="*, auto" columns="*">
-                <StackLayout row="0" backgroundColor="lightblue"></StackLayout>
-                <StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
-            </GridLayout>
-        </TabContentItem>
-    </BottomNavigation>
-
-</Page>
diff --git a/apps/ui/src/bottom-navigation/item-color-page.css b/apps/ui/src/bottom-navigation/item-color-page.css
deleted file mode 100644
index f43139ce8..000000000
--- a/apps/ui/src/bottom-navigation/item-color-page.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.font-awesome {
-    font-family: "FontAwesome";
-}
-
-.font-size {
-    font-size: 36;
-}
\ No newline at end of file
diff --git a/apps/ui/src/bottom-navigation/item-color-page.xml b/apps/ui/src/bottom-navigation/item-color-page.xml
deleted file mode 100644
index 8c736f67c..000000000
--- a/apps/ui/src/bottom-navigation/item-color-page.xml
+++ /dev/null
@@ -1,40 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="BottomNavigation item-color" icon="" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation">
-    <TabStrip selectedItemColor="red" unSelectedItemColor="green">
-        <TabStripItem>
-            <Label text="First"/>
-            <Image src="res://baseline_motorcycle_black_24"/>
-        </TabStripItem>
-        <TabStripItem>
-            <Label text="Second"/>
-            <Image src="res://up"/>
-        </TabStripItem>
-        <TabStripItem>
-            <Label text="Third"/>
-            <Image src="font://&#xF10B;" class="font-awesome font-size" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/main-page.ts b/apps/ui/src/bottom-navigation/main-page.ts
deleted file mode 100644
index 706d53e32..000000000
--- a/apps/ui/src/bottom-navigation/main-page.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { EventData } from '@nativescript/core/data/observable';
-import { SubMainPageViewModel } from '../sub-main-page-view-model';
-import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
-import { Page } from '@nativescript/core/ui/page';
-
-export function pageLoaded(args: EventData) {
-	const page = <Page>args.object;
-	const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
-	page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-}
-
-export function loadExamples() {
-	const examples = new Map<string, string>();
-	examples.set('bottom-navigation', 'bottom-navigation/bottom-navigation-page');
-	examples.set('issue-5470', 'bottom-navigation/issue-5470-page');
-	examples.set('background-color', 'bottom-navigation/background-color-page');
-	examples.set('color', 'bottom-navigation/color-page');
-	examples.set('events', 'bottom-navigation/events-page');
-	examples.set('font', 'bottom-navigation/font-page');
-	examples.set('text-transform', 'bottom-navigation/text-transform-page');
-	examples.set('icon-title-placement', 'bottom-navigation/icon-title-placement-page');
-	examples.set('icon-change', 'bottom-navigation/icon-change-page');
-	examples.set('binding', 'bottom-navigation/binding-page');
-	examples.set('font-icons', 'bottom-navigation/font-icons-page');
-	examples.set('fancy-fonts', 'bottom-navigation/fancy-fonts-page');
-	examples.set('css-text-transform', 'bottom-navigation/bottom-navigation-css-page');
-	examples.set('custom-tabstrip', 'bottom-navigation/custom-tabstrip-page');
-	examples.set('reselect', 'bottom-navigation/reselect-page');
-	examples.set('item-color', 'bottom-navigation/item-color-page');
-	examples.set('dynamic-color-change', 'bottom-navigation/dynamic-color-change-page');
-
-	return examples;
-}
diff --git a/apps/ui/src/bottom-navigation/main-page.xml b/apps/ui/src/bottom-navigation/main-page.xml
deleted file mode 100644
index 79cc23991..000000000
--- a/apps/ui/src/bottom-navigation/main-page.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<Page loaded="pageLoaded">
-    <ScrollView orientation="vertical" row="1">
-        <WrapLayout id="wrapLayoutWithExamples"/>
-    </ScrollView>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/reselect-page.ts b/apps/ui/src/bottom-navigation/reselect-page.ts
deleted file mode 100644
index 1cb625e37..000000000
--- a/apps/ui/src/bottom-navigation/reselect-page.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { EventData, Frame, Page, TabStripItemEventData, SelectedIndexChangedEventData, BottomNavigation, TabStrip } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst');
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-	bottomNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond');
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-	bottomNav.selectedIndex = 1;
-}
-
-export function goToThird(args: EventData) {
-	console.log('---> goToThird');
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-	bottomNav.selectedIndex = 2;
-}
-
-export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-	console.log('---> onSelectedIndexChanged', args.eventName);
-	console.log('---> oldIndex', args.oldIndex);
-	console.log('---> newIndex', args.newIndex);
-}
-
-export function onItemTap(args: TabStripItemEventData) {
-	console.log('---> onItemTap', args.eventName);
-	console.log('---> onItemTap', args.index);
-	console.log('---> onItemTap', args.object);
-
-	const tabStrip = <TabStrip>args.object;
-	const page = <Page>tabStrip.page;
-	const frame = <Frame>page.getViewById('frame');
-	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
-
-	console.log('---> onItemTap selectedIndex', bottomNav.selectedIndex);
-	if (bottomNav.selectedIndex === args.index && frame.canGoBack()) {
-		frame.goBack();
-	}
-}
-
-export function onFirstTabStripItemTap(args: EventData) {
-	console.log('---> onFirstTabStripItemTap', args.eventName);
-}
-
-export function onSecondTabStripItemTap(args: EventData) {
-	console.log('---> onSecondTabStripItemTap', args.eventName);
-}
-
-export function onThirdTabStripItemTap(args: EventData) {
-	console.log('---> onThirdTabStripItemTap', args.eventName);
-}
diff --git a/apps/ui/src/bottom-navigation/reselect-page.xml b/apps/ui/src/bottom-navigation/reselect-page.xml
deleted file mode 100644
index 916171886..000000000
--- a/apps/ui/src/bottom-navigation/reselect-page.xml
+++ /dev/null
@@ -1,37 +0,0 @@
-<Page>
-
-  <BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
-
-    <TabStrip itemTap="onItemTap">
-      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
-      <TabStripItem tap="onSecondTabStripItemTap">
-        <Label text="Second" />
-      </TabStripItem>
-      <TabStripItem title="First" tap="onThirdTabStripItemTap">
-        <Label text="Third" />
-      </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View" backgroundColor="red" id="label" />
-        <Button tap="goToSecond" text="go to second item" id="button" />
-        <Frame defaultPage="bottom-navigation/first-page" id="frame" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="Second Content Item" backgroundColor="lightgreen" />
-        <Button tap="goToThird" text="go to thrid item" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First Content Item" backgroundColor="lightblue" />
-        <Button tap="goToFirst" text="go to first item" />
-      </StackLayout>
-    </TabContentItem>
-
-  </BottomNavigation>
-
-</Page>
diff --git a/apps/ui/src/bottom-navigation/second-page.ts b/apps/ui/src/bottom-navigation/second-page.ts
deleted file mode 100644
index e5ce2cdee..000000000
--- a/apps/ui/src/bottom-navigation/second-page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Button, EventData } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst Page');
-	const button = <Button>args.object;
-	button.page.frame.navigate('bottom-navigation/first-page');
-}
-
-export function goBack(args: EventData) {
-	console.log('---> goBack');
-	const button = <Button>args.object;
-	button.page.frame.goBack();
-}
diff --git a/apps/ui/src/bottom-navigation/second-page.xml b/apps/ui/src/bottom-navigation/second-page.xml
deleted file mode 100644
index 1ca882475..000000000
--- a/apps/ui/src/bottom-navigation/second-page.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<Page backgroundColor="lightblue" actionBarHidden="true">
-  <StackLayout>
-    <Label text="Second Page"  />
-    <Button tap="goToFirst" text="go to first page" />
-    <Button tap="goBack" text="go back" />
-  </StackLayout>
-</Page>
diff --git a/apps/ui/src/bottom-navigation/text-transform-page.css b/apps/ui/src/bottom-navigation/text-transform-page.css
deleted file mode 100644
index 539c8c817..000000000
--- a/apps/ui/src/bottom-navigation/text-transform-page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-BottomNavigation {
-  text-transform: lowercase;
-}
-
-TabContentItem.special {
-  text-transform: uppercase;
-}
-
-TabStrip {
-  text-transform: capitalize;
-}
-
-TabStripItem.special {
-  text-transform: lowercase;
-}
-
-TabStripItem.special:active {
-  text-transform: uppercase;
-}
-
-TabStripItem.nested Label {
-  text-transform: lowercase;
-}
-
-TabStripItem.nested:active Label {
-  text-transform: uppercase;
-}
diff --git a/apps/ui/src/bottom-navigation/text-transform-page.xml b/apps/ui/src/bottom-navigation/text-transform-page.xml
deleted file mode 100644
index f10a15d11..000000000
--- a/apps/ui/src/bottom-navigation/text-transform-page.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="BottomNavigation text-transform" class="action-bar">
-  </ActionBar>
-
-  <BottomNavigation automationText="tabNavigation">
-    <TabStrip>
-        <TabStripItem title="first" class="special"></TabStripItem>
-        <TabStripItem title="second"></TabStripItem>
-        <TabStripItem class="nested">
-            <Label text="third" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </BottomNavigation>
-</Page>
diff --git a/apps/ui/src/main-page.ts b/apps/ui/src/main-page.ts
index 72b19c1b3..cc025764d 100644
--- a/apps/ui/src/main-page.ts
+++ b/apps/ui/src/main-page.ts
@@ -11,8 +11,6 @@ export function pageLoaded(args: EventData) {
 	examples.set('animation', 'animation/main-page');
 	examples.set('action-bar', 'action-bar/main-page');
 	examples.set('bindings', 'bindings/main-page');
-	examples.set('bottom-navigation', 'bottom-navigation/main-page');
-	examples.set('tabs', 'tabs/main-page');
 	examples.set('button', 'button/main-page');
 	examples.set('css', 'css/main-page');
 	examples.set('dialogs', 'dialogs/main-page');
diff --git a/apps/ui/src/tabs/background-color-page.css b/apps/ui/src/tabs/background-color-page.css
deleted file mode 100644
index 23a28a67f..000000000
--- a/apps/ui/src/tabs/background-color-page.css
+++ /dev/null
@@ -1,19 +0,0 @@
-Tabs {
-  background-color: gold;
-}
-
-TabContentItem.special {
-  background-color: olive;
-}
-
-TabStrip {
-  background-color: skyblue;
-}
-
-TabStripItem.special {
-  background-color: teal;
-}
-
-TabStripItem.special:active {
-  background-color: yellowgreen;
-}
diff --git a/apps/ui/src/tabs/background-color-page.xml b/apps/ui/src/tabs/background-color-page.xml
deleted file mode 100644
index ec1075760..000000000
--- a/apps/ui/src/tabs/background-color-page.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs background-color" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation"  >
-    <TabStrip>
-        <TabStripItem title="First" class="special"></TabStripItem>
-        <TabStripItem title="Second"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/color-page.css b/apps/ui/src/tabs/color-page.css
deleted file mode 100644
index 97c0d950b..000000000
--- a/apps/ui/src/tabs/color-page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-Tabs {
-  color: gold;
-}
-
-TabContentItem.special {
-  color: green;
-}
-
-TabStrip {
-  color: skyblue;
-}
-
-TabStripItem.special {
-  color: teal;
-}
-
-TabStripItem.special:active {
-  color: yellowgreen;
-}
-
-TabStripItem.nested Label {
-  color: teal;
-}
-
-TabStripItem.nested:active Label {
-  color: yellowgreen;
-}
diff --git a/apps/ui/src/tabs/color-page.xml b/apps/ui/src/tabs/color-page.xml
deleted file mode 100644
index 7239b5ff5..000000000
--- a/apps/ui/src/tabs/color-page.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs color" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation">
-    <TabStrip>
-        <TabStripItem title="first" class="special"></TabStripItem>
-        <TabStripItem title="second"></TabStripItem>
-        <TabStripItem class="nested">
-            <Label text="third" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/custom-tabstrip-page.css b/apps/ui/src/tabs/custom-tabstrip-page.css
deleted file mode 100644
index 0f7802b4d..000000000
--- a/apps/ui/src/tabs/custom-tabstrip-page.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.custom-tabstrip {
-  height: 100;
-  vertical-align: bottom;
-  ios-overflow-safe-area-enabled: false;
-}
-
-.custom-tabstripitem {
-  height: 80;
-  width: 80;
-  vertical-align: center;
-  horizontal-align: center;
-  clip-path: circle(100% at 50% 50%);
-}
-
-.custom-title {
-  color: white;
-  vertical-align: center;
-  horizontal-align: center;
-}
-
-.skyblue {
-  background-color: skyblue;
-}
-
-.gold {
-  background-color: gold;
-}
-
-.olive {
-  background-color: olive;
-}
diff --git a/apps/ui/src/tabs/custom-tabstrip-page.ts b/apps/ui/src/tabs/custom-tabstrip-page.ts
deleted file mode 100644
index eebc40be3..000000000
--- a/apps/ui/src/tabs/custom-tabstrip-page.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { EventData, Page, Tabs } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('tabsNav');
-
-	bottomNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('tabsNav');
-
-	bottomNav.selectedIndex = 1;
-}
-
-export function goToThird(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('tabsNav');
-
-	bottomNav.selectedIndex = 2;
-}
diff --git a/apps/ui/src/tabs/custom-tabstrip-page.xml b/apps/ui/src/tabs/custom-tabstrip-page.xml
deleted file mode 100644
index 585c4f291..000000000
--- a/apps/ui/src/tabs/custom-tabstrip-page.xml
+++ /dev/null
@@ -1,41 +0,0 @@
-<Page>
-
-  <ActionBar title="Tabs Custom TabStrip" icon="" class="action-bar">
-  </ActionBar>
-
-  <GridLayout>
-    <GridLayout>
-      <Tabs id="tabsNav" automationText="tabNavigation" >
-        <TabContentItem>
-          <GridLayout backgroundColor="skyblue">
-            <Label text="First View"/>
-          </GridLayout>
-        </TabContentItem>
-        <TabContentItem>
-          <GridLayout backgroundColor="gold">
-            <Label text="Second View"/>
-          </GridLayout>
-        </TabContentItem>
-        <TabContentItem>
-          <GridLayout backgroundColor="olive">
-            <Label text="Third View"/>
-          </GridLayout>
-        </TabContentItem>
-      </Tabs>
-    </GridLayout>
-
-    <GridLayout columns="*, *, *" class="custom-tabstrip">
-      <GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
-        <Label text="First" class="custom-title"></Label>
-      </GridLayout>
-
-      <GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
-        <Label text="Second" class="custom-title"></Label>
-      </GridLayout>
-
-      <GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
-        <Label text="Third" class="custom-title"></Label>
-      </GridLayout>
-    </GridLayout>
-  </GridLayout>
-</Page>
diff --git a/apps/ui/src/tabs/default-page.ts b/apps/ui/src/tabs/default-page.ts
deleted file mode 100644
index b6f9e31ae..000000000
--- a/apps/ui/src/tabs/default-page.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { EventData, Page, Tabs } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-
-	tabsNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-
-	tabsNav.selectedIndex = 1;
-}
diff --git a/apps/ui/src/tabs/default-page.xml b/apps/ui/src/tabs/default-page.xml
deleted file mode 100644
index 4760c9256..000000000
--- a/apps/ui/src/tabs/default-page.xml
+++ /dev/null
@@ -1,89 +0,0 @@
-<Page>
-
-  <ActionBar title="Tabs" icon="" class="action-bar">
-  </ActionBar>
-
-  <!-- w/o TabStrip -->
-  <!-- <BottomNavigation>
-      <TabContentItem>
-        <GridLayout>
-          <Label text="First View"/>
-        </GridLayout>
-      </TabContentItem>
-      <TabContentItem>
-        <GridLayout>
-          <Label text="Second View"/>
-        </GridLayout>
-      </TabContentItem>
-  </BottomNavigation> -->
-
-  <!-- w/ TabStrip -->
-  <Tabs id="tabsNav" automationText="tabNavigation"  >
-    <TabStrip>
-      <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="News" />
-      </TabStripItem>
-      <!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="Places" />
-      </TabStripItem>
-      <!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout backgroundColor="blue">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="red">
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="green">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <!-- <TabContentItem>
-      <StackLayout>
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem> -->
-  </Tabs>
-
-  <!-- =============================================================================================== -->
-
-  <!-- Bottom Bar with TabStrip -->
-  <!-- <BottomNavigationBar>
-    <TabStrip>
-      <TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <Image src="res://icon" />
-        <Label text="Second Tab" />
-      </TabStripItem>
-    </TabStrip>
-  </BottomNavigationBar> -->
-
-  <!-- Bottom Bar w/o TabStrip -->
-  <!-- <BottomNavigationBar>
-    <TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
-    <TabStripItem>
-      <Image src="res://icon" />
-      <Label text="Second Tab" />
-    </TabStripItem>
-  </BottomNavigationBar> -->
-</Page>
diff --git a/apps/ui/src/tabs/dynamic-color-change-page.css b/apps/ui/src/tabs/dynamic-color-change-page.css
deleted file mode 100644
index 7b8624417..000000000
--- a/apps/ui/src/tabs/dynamic-color-change-page.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.font-awesome {
-    font-family: "FontAwesome";
-}
-
-.font-size {
-    font-size: 36;
-}
-
-TabStripItem:active {
-    background-color: magenta;
-}
-
-.tabsClass0 {
-}
-
-.tabsClass1 {
-    background-color: #79d2a6;
-    highlight-color: green;
-    selected-item-color: yellow;
-    un-selected-item-color: blue;
-}
-
-.tabsClass2 {
-    background-color: orangered;
-    highlight-color: lightgreen;
-    selected-item-color: whitesmoke;
-    un-selected-item-color: pink;
-}
\ No newline at end of file
diff --git a/apps/ui/src/tabs/dynamic-color-change-page.ts b/apps/ui/src/tabs/dynamic-color-change-page.ts
deleted file mode 100644
index 5647f4861..000000000
--- a/apps/ui/src/tabs/dynamic-color-change-page.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { View, Page, Tabs } from '@nativescript/core';
-
-export function onButtonTap(args) {
-	const page = <Page>(<View>args.object).page;
-	const tabs = <Tabs>page.getViewById('tabs');
-
-	switch (tabs.tabStrip.className) {
-		case 'tabsClass0':
-			tabs.tabStrip.className = 'tabsClass1';
-			break;
-		case 'tabsClass1':
-			tabs.tabStrip.className = 'tabsClass2';
-			break;
-		case 'tabsClass2':
-			tabs.tabStrip.className = 'tabsClass0';
-			break;
-	}
-}
-
-export function onChangeIconSourceTap(args) {
-	const page = <Page>(<View>args.object).page;
-	const tabs = <Tabs>page.getViewById('tabs');
-
-	const tabStripItem0 = tabs.tabStrip.items[0];
-	const tabStripItem1 = tabs.tabStrip.items[1];
-	const tabStripItem2 = tabs.tabStrip.items[2];
-
-	const iconSource0 = tabStripItem0.iconSource;
-
-	tabStripItem0.iconSource = tabStripItem1.iconSource;
-
-	tabStripItem1.iconClass = 'font-awesome font-size';
-	tabStripItem1.iconSource = tabStripItem2.iconSource;
-
-	tabStripItem2.iconClass = 'font-awesome font-size';
-	tabStripItem2.iconSource = iconSource0;
-}
diff --git a/apps/ui/src/tabs/dynamic-color-change-page.xml b/apps/ui/src/tabs/dynamic-color-change-page.xml
deleted file mode 100644
index add2637ab..000000000
--- a/apps/ui/src/tabs/dynamic-color-change-page.xml
+++ /dev/null
@@ -1,44 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd">
-  <GridLayout rows="auto,*">
-    <StackLayout row="0" >
-        <Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
-        <Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
-    </StackLayout>
-    <GridLayout row="1">
-        <Tabs automationText="tabNavigation" id="tabs" >
-            <TabStrip class="tabsClass0">
-                <TabStripItem>
-                    <Label text="Home"></Label>
-                    <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
-                </TabStripItem>
-                <TabStripItem>
-                    <Label text="Favorites"></Label>
-                    <Image src="res://add_to_fav"></Image>
-                </TabStripItem>
-                <TabStripItem>
-                    <Label text="Up"></Label>
-                    <Image src="res://up"></Image>
-                </TabStripItem>
-            </TabStrip>
-            <TabContentItem>
-                <GridLayout>
-                    <Label text="Home Page" class="h2 text-center">
-                    </Label>
-                </GridLayout>
-            </TabContentItem>
-            <TabContentItem>
-                <GridLayout>
-                    <Label text="Favorites Page" class="h2 text-center">
-                    </Label>
-                </GridLayout>
-            </TabContentItem>
-            <TabContentItem>
-                <GridLayout>
-                    <Label text="Up Page" class="h2 text-center">
-                    </Label>
-                </GridLayout>
-            </TabContentItem>
-        </Tabs>
-    </GridLayout>
-  </GridLayout>
-</Page>
diff --git a/apps/ui/src/tabs/events-page.ts b/apps/ui/src/tabs/events-page.ts
deleted file mode 100644
index 13fbbe036..000000000
--- a/apps/ui/src/tabs/events-page.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { EventData, Page, Tabs, SelectedIndexChangedEventData } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-	tabsNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-	tabsNav.selectedIndex = 1;
-}
-
-export function goToThird(args: EventData) {
-	console.log('---> goToThird');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-	tabsNav.selectedIndex = 2;
-}
-
-export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-	console.log('---> onSelectedIndexChanged', args.eventName);
-	console.log('---> oldIndex', args.oldIndex);
-	console.log('---> newIndex', args.newIndex);
-}
-
-export function onFirstTabStripItemTap(args: EventData) {
-	console.log('---> onFirstTabStripItemTap', args.eventName);
-}
-
-export function onSecondTabStripItemTap(args: EventData) {
-	console.log('---> onSecondTabStripItemTap', args.eventName);
-}
-
-export function onThirdTabStripItemTap(args: EventData) {
-	console.log('---> onThirdTabStripItemTap', args.eventName);
-}
diff --git a/apps/ui/src/tabs/events-page.xml b/apps/ui/src/tabs/events-page.xml
deleted file mode 100644
index ec44be255..000000000
--- a/apps/ui/src/tabs/events-page.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-<Page>
-
-  <Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
-
-    <TabStrip>
-      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
-      <TabStripItem tap="onSecondTabStripItemTap">
-        <Label text="Second" />
-      </TabStripItem>
-      <TabStripItem title="First" tap="onThirdTabStripItemTap">
-        <Label text="Third" />
-      </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View" backgroundColor="red" />
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="Second View" backgroundColor="green" />
-        <Button tap="goToThird" text="go to thrid" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View" backgroundColor="blue" />
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-
-  </Tabs>
-
-</Page>
diff --git a/apps/ui/src/tabs/first-page.ts b/apps/ui/src/tabs/first-page.ts
deleted file mode 100644
index df644785e..000000000
--- a/apps/ui/src/tabs/first-page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { EventData, Button } from '@nativescript/core';
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond Page');
-	const button = <Button>args.object;
-	button.page.frame.navigate('tabs/second-page');
-}
-
-export function goBack(args: EventData) {
-	console.log('---> goBack');
-	const button = <Button>args.object;
-	button.page.frame.goBack();
-}
diff --git a/apps/ui/src/tabs/first-page.xml b/apps/ui/src/tabs/first-page.xml
deleted file mode 100644
index 0f47fd902..000000000
--- a/apps/ui/src/tabs/first-page.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<Page backgroundColor="lightgreen" actionBarHidden="true">
-  <StackLayout>
-    <Label text="First Page"  />
-    <Button tap="goToSecond" text="go to second page" />
-    <Button tap="goBack" text="go to back" />
-  </StackLayout>
-</Page>
diff --git a/apps/ui/src/tabs/font-icons-page.css b/apps/ui/src/tabs/font-icons-page.css
deleted file mode 100644
index 57076da81..000000000
--- a/apps/ui/src/tabs/font-icons-page.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.font-awesome {
-  font-family: "FontAwesome";
-}
-
-.font-size {
-  font-size: 36;
-}
-
-TabStrip {
-  color: mediumvioletred;
-}
-
-TabStripItem {
-  color: skyblue;
-}
-
-TabStripItem:active {
-  color: darkblue;
-}
-
-TabStripItem.special Image {
-  color: lightgreen;
-}
-
-TabStripItem.special:active Image {
-  color: darkgreen;
-}
-
-TabStripItem.special Label {
-  color: gold;
-}
-
-TabStripItem.special:active Label {
-  color: darkgoldenrod;
-}
-
-TabStripItem:active .font-size {
-  font-size: 10;
-}
diff --git a/apps/ui/src/tabs/font-icons-page.xml b/apps/ui/src/tabs/font-icons-page.xml
deleted file mode 100644
index 94ce2bfbc..000000000
--- a/apps/ui/src/tabs/font-icons-page.xml
+++ /dev/null
@@ -1,63 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs font icons" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation">
-    <TabStrip>
-        <!-- font family + font size + color -->
-        <TabStripItem class="special">
-            <Label text="All Set"/>
-            <Image src="font://&#xF10B;" class="font-awesome font-size" />
-        </TabStripItem>
-
-        <!-- default font + valid char code -->
-        <TabStripItem>
-            <Label text="Invalid Font" />
-            <Image src="font://&#xF10B;" />
-        </TabStripItem>
-
-        <!-- font family + invalid char code -->
-        <TabStripItem>
-            <Label text="Invalid Char" />
-            <Image src="font://&#xF556;" class="font-awesome font-size"/>
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <StackLayout>
-            <Label text="char code: phone" />
-            <Label text="font: Font Awesome" />
-            <Label text="font size: 36" />
-            <Label text="icon color inactive: lightgreen" />
-            <Label text="icon color active: darkgreen" />
-            <Label text="title color inactive: gold" />
-            <Label text="title color active: darkgoldenrod" />
-        </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <StackLayout>
-            <Label text="char code: phone" />
-            <Label text="font: default/invalid" />
-            <Label text="font size: default" />
-            <Label text="icon color inactive: skyblue" />
-            <Label text="icon color active: darkblue" />
-            <Label text="title color inactive: skyblue" />
-            <Label text="title color active: darkblue" />
-        </StackLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <StackLayout>
-            <Label text="char code: invalid" />
-            <Label text="font: Font Awesome" />
-            <Label text="font size: 36" />
-            <Label text="icon color inactive: skyblue" />
-            <Label text="icon color active: darkblue" />
-            <Label text="title color inactive: skyblue" />
-            <Label text="title color active: darkblue" />
-        </StackLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/font-page.css b/apps/ui/src/tabs/font-page.css
deleted file mode 100644
index d2473e4d7..000000000
--- a/apps/ui/src/tabs/font-page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-Tabs {
-  font: 24 'Times New Roman', Times, serif;
-}
-
-TabContentItem.special {
-  font: italic bold 12 Georgia, serif;
-}
-
-TabStrip {
-  font: 15 arial, sans-serif;
-}
-
-TabStripItem.special {
-  font: 12 monospace;
-}
-
-TabStripItem.special:active {
-  font: 16 monospace;
-}
-
-TabStripItem.nested Label {
-  font: 12 monospace;
-}
-
-TabStripItem.nested:active Label {
-  font: 16 monospace;
-}
diff --git a/apps/ui/src/tabs/font-page.xml b/apps/ui/src/tabs/font-page.xml
deleted file mode 100644
index a918adeef..000000000
--- a/apps/ui/src/tabs/font-page.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs font" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation"  >
-    <TabStrip>
-        <TabStripItem title="first" class="special"></TabStripItem>
-        <TabStripItem title="second"></TabStripItem>
-        <TabStripItem class="nested">
-            <Label text="third" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml b/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
deleted file mode 100644
index 6e84cd59d..000000000
--- a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<Page class="page" >
-    <GridLayout rows="*, auto">
-			<Label text="Inner label 1" backgroundColor="blue"/>
-
-			<Label text="Inner Bottom label 1"
-						 textAlignment="center"
-						 verticalAlignment="middle"
-						 padding="10"
-						 backgroundColor="crimson"
-						 row="1"/>
-		</GridLayout>
-</Page>
diff --git a/apps/ui/src/tabs/frame-in-tabs-inner-page-2.xml b/apps/ui/src/tabs/frame-in-tabs-inner-page-2.xml
deleted file mode 100644
index 7c5812a0b..000000000
--- a/apps/ui/src/tabs/frame-in-tabs-inner-page-2.xml
+++ /dev/null
@@ -1,3 +0,0 @@
-<Page class="page">
-    <Label text="Inner label 2"  backgroundColor="red"/>
-</Page>
\ No newline at end of file
diff --git a/apps/ui/src/tabs/frame-in-tabs-inner-page-3.xml b/apps/ui/src/tabs/frame-in-tabs-inner-page-3.xml
deleted file mode 100644
index e36fce108..000000000
--- a/apps/ui/src/tabs/frame-in-tabs-inner-page-3.xml
+++ /dev/null
@@ -1,3 +0,0 @@
-<Page class="page">
-    <Label text="Inner label 3"  backgroundColor="orange"/>
-</Page>
\ No newline at end of file
diff --git a/apps/ui/src/tabs/frame-in-tabs-inner-page-4.xml b/apps/ui/src/tabs/frame-in-tabs-inner-page-4.xml
deleted file mode 100644
index a2607283d..000000000
--- a/apps/ui/src/tabs/frame-in-tabs-inner-page-4.xml
+++ /dev/null
@@ -1,3 +0,0 @@
-<Page class="page">
-    <Label text="Inner label 4"  backgroundColor="green"/>
-</Page>
\ No newline at end of file
diff --git a/apps/ui/src/tabs/frame-in-tabs-overflow.xml b/apps/ui/src/tabs/frame-in-tabs-overflow.xml
deleted file mode 100644
index e0df8bd11..000000000
--- a/apps/ui/src/tabs/frame-in-tabs-overflow.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<Page class="page">
-    <StackLayout>
-        <Tabs iosOverflowSafeArea="true" highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
-            <TabStrip highlightColor="green" itemTap="onItemTap">
-                <TabStripItem title="1"></TabStripItem>
-                <TabStripItem title="2"></TabStripItem>
-                <TabStripItem title="3"></TabStripItem>
-                <TabStripItem title="4"></TabStripItem>
-            </TabStrip>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-1"></Frame>
-            </TabContentItem>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-2"></Frame>
-            </TabContentItem>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-3"></Frame>
-            </TabContentItem>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-4"></Frame>
-            </TabContentItem>
-        </Tabs>
-    </StackLayout>
-</Page>
diff --git a/apps/ui/src/tabs/frame-in-tabs.ts b/apps/ui/src/tabs/frame-in-tabs.ts
deleted file mode 100644
index 4a3752a98..000000000
--- a/apps/ui/src/tabs/frame-in-tabs.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function onItemTap(args) {
-	console.log(`Item with index: ${args.index} tapped`);
-}
diff --git a/apps/ui/src/tabs/frame-in-tabs.xml b/apps/ui/src/tabs/frame-in-tabs.xml
deleted file mode 100644
index 6c0fcd264..000000000
--- a/apps/ui/src/tabs/frame-in-tabs.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<Page class="page">
-    <StackLayout>
-        <Tabs highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
-            <TabStrip highlightColor="green" itemTap="onItemTap">
-                <TabStripItem title="1"></TabStripItem>
-                <TabStripItem title="2"></TabStripItem>
-                <TabStripItem title="3"></TabStripItem>
-                <TabStripItem title="4"></TabStripItem>
-            </TabStrip>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-1"></Frame>
-            </TabContentItem>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-2"></Frame>
-            </TabContentItem>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-3"></Frame>
-            </TabContentItem>
-            <TabContentItem>
-                <Frame defaultPage="tabs/frame-in-tabs-inner-page-4"></Frame>
-            </TabContentItem>
-        </Tabs>
-    </StackLayout>
-</Page>
\ No newline at end of file
diff --git a/apps/ui/src/tabs/highlight-color-page.css b/apps/ui/src/tabs/highlight-color-page.css
deleted file mode 100644
index 5c2987850..000000000
--- a/apps/ui/src/tabs/highlight-color-page.css
+++ /dev/null
@@ -1,3 +0,0 @@
-TabStrip {
-  highlight-color: crimson;
-}
diff --git a/apps/ui/src/tabs/highlight-color-page.xml b/apps/ui/src/tabs/highlight-color-page.xml
deleted file mode 100644
index d080d6d1d..000000000
--- a/apps/ui/src/tabs/highlight-color-page.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs highlight-color" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation"  >
-    <TabStrip>
-        <TabStripItem title="First" class="special"></TabStripItem>
-        <TabStripItem title="Second"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/icon-change-page.ts b/apps/ui/src/tabs/icon-change-page.ts
deleted file mode 100644
index 32b746123..000000000
--- a/apps/ui/src/tabs/icon-change-page.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Tabs, SelectedIndexChangedEventData } from '@nativescript/core';
-
-export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-	const tabsNav = <Tabs>args.object;
-
-	const newItem = tabsNav.tabStrip.items[args.newIndex];
-	if (newItem) {
-		newItem.iconSource = 'res://icon';
-		newItem.title = 'selected';
-	}
-
-	const oldItem = tabsNav.tabStrip.items[args.oldIndex];
-	if (oldItem) {
-		oldItem.iconSource = 'res://testlogo';
-		oldItem.title = 'unselected';
-	}
-}
diff --git a/apps/ui/src/tabs/icon-change-page.xml b/apps/ui/src/tabs/icon-change-page.xml
deleted file mode 100644
index 7219a89a6..000000000
--- a/apps/ui/src/tabs/icon-change-page.xml
+++ /dev/null
@@ -1,23 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
-    <ActionBar title="Tabs icon change" icon="" class="action-bar">
-    </ActionBar>
-
-    <Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation"  >
-        <TabStrip>
-            <TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
-            <TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
-        </TabStrip>
-
-        <TabContentItem>
-            <GridLayout>
-                <Label text="first tab"/>
-            </GridLayout>
-        </TabContentItem>
-
-        <TabContentItem>
-            <GridLayout>
-                <Label text="second tab"/>
-            </GridLayout>
-        </TabContentItem>
-    </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/icon-title-placement-page.xml b/apps/ui/src/tabs/icon-title-placement-page.xml
deleted file mode 100644
index d05d146ca..000000000
--- a/apps/ui/src/tabs/icon-title-placement-page.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<Page class="page">
-  <ActionBar title="Tabs icon title placement" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation"  >
-    <TabStrip>
-      <TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
-      <TabStripItem iconSource="res://add_to_fav"></TabStripItem>
-      <TabStripItem title="Title"></TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <GridLayout>
-        <Label text="Title and icon" />
-      </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-      <GridLayout>
-        <Label text="Only icon" />
-      </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-      <GridLayout>
-        <Label text="Only title" />
-      </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/issue-5470-page.xml b/apps/ui/src/tabs/issue-5470-page.xml
deleted file mode 100644
index 228ee42e6..000000000
--- a/apps/ui/src/tabs/issue-5470-page.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
-
-    <ActionBar title="Tabs issue 5470" icon="" class="action-bar">
-    </ActionBar>
-
-    <Tabs automationText="tabNavigation"  >
-        <TabStrip>
-            <TabStripItem title="Tab1"></TabStripItem>
-            <TabStripItem title="Tab2"></TabStripItem>
-        </TabStrip>
-
-        <TabContentItem>
-            <GridLayout rows="*, auto" columns="*">
-                <StackLayout row="0" backgroundColor="lightblue"></StackLayout>
-                <StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
-            </GridLayout>
-        </TabContentItem>
-
-        <TabContentItem>
-            <GridLayout rows="*, auto" columns="*">
-                <StackLayout row="0" backgroundColor="lightblue"></StackLayout>
-                <StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
-            </GridLayout>
-        </TabContentItem>
-    </Tabs>
-
-</Page>
diff --git a/apps/ui/src/tabs/item-color-page.css b/apps/ui/src/tabs/item-color-page.css
deleted file mode 100644
index 27a16bf77..000000000
--- a/apps/ui/src/tabs/item-color-page.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.font-awesome {
-    font-family: "FontAwesome";
-}
-
-.font-size {
-    font-size: 36;
-}
-
-
-/* TabStrip {
-    color: mediumvioletred;
-}
-
-TabStripItem {
-    color: skyblue;
-}
-
-TabStripItem:active {
-    color: darkblue;
-} */
\ No newline at end of file
diff --git a/apps/ui/src/tabs/item-color-page.xml b/apps/ui/src/tabs/item-color-page.xml
deleted file mode 100644
index b0a5ebae1..000000000
--- a/apps/ui/src/tabs/item-color-page.xml
+++ /dev/null
@@ -1,40 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs item-color" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation">
-    <TabStrip selectedItemColor="red" unSelectedItemColor="green">
-        <TabStripItem>
-            <Label text="First"/>
-            <Image src="res://baseline_motorcycle_black_24"/>
-        </TabStripItem>
-        <TabStripItem>
-            <Label text="Second"/>
-            <Image src="res://up"/>
-        </TabStripItem>
-        <TabStripItem>
-            <Label text="Third"/>
-            <Image src="font://&#xF10B;" class="font-awesome font-size" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/main-page.ts b/apps/ui/src/tabs/main-page.ts
deleted file mode 100644
index 7e9ffb6d1..000000000
--- a/apps/ui/src/tabs/main-page.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { EventData, WrapLayout, Page } from '@nativescript/core';
-
-import { SubMainPageViewModel } from '../sub-main-page-view-model';
-
-export function pageLoaded(args: EventData) {
-	const page = <Page>args.object;
-	const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
-	page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-}
-
-export function loadExamples() {
-	const examples = new Map<string, string>();
-	examples.set('tabs', 'tabs/tabs-page');
-	examples.set('issue-5470', 'tabs/issue-5470-page');
-	examples.set('background-color', 'tabs/background-color-page');
-	examples.set('color', 'tabs/color-page');
-	examples.set('events', 'tabs/events-page');
-	examples.set('font', 'tabs/font-page');
-	examples.set('text-transform', 'tabs/text-transform-page');
-	examples.set('highlight-color', 'tabs/highlight-color-page');
-	examples.set('icon-title-placement', 'tabs/icon-title-placement-page');
-	examples.set('icon-change', 'tabs/icon-change-page');
-	examples.set('swipe-disabled', 'tabs/swipe-disabled-page');
-	examples.set('strip-item', 'tabs/tab-strip-item-page');
-	examples.set('strip-items', 'tabs/tab-strip-items-page');
-	examples.set('reselect', 'tabs/reselect-page');
-	examples.set('tabs-position', 'tabs/tabs-position-page');
-	examples.set('tabs-binding', 'tabs/tabs-binding-page');
-	examples.set('font-icons', 'tabs/font-icons-page');
-	examples.set('nested-layout', 'tabs/nested-layout-page');
-	examples.set('nested-bottom-navigation', 'tabs/nested-bottom-navigation-page');
-	examples.set('custom-tabstrip', 'tabs/custom-tabstrip-page');
-	examples.set('frame-in-tabs', 'tabs/frame-in-tabs');
-	examples.set('frame-in-tabs-overflow', 'tabs/frame-in-tabs-overflow');
-	examples.set('item-color', 'tabs/item-color-page');
-	examples.set('dynamic-color-change', 'tabs/dynamic-color-change-page');
-
-	return examples;
-}
diff --git a/apps/ui/src/tabs/main-page.xml b/apps/ui/src/tabs/main-page.xml
deleted file mode 100644
index 79cc23991..000000000
--- a/apps/ui/src/tabs/main-page.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<Page loaded="pageLoaded">
-    <ScrollView orientation="vertical" row="1">
-        <WrapLayout id="wrapLayoutWithExamples"/>
-    </ScrollView>
-</Page>
diff --git a/apps/ui/src/tabs/nested-bottom-navigation-page.xml b/apps/ui/src/tabs/nested-bottom-navigation-page.xml
deleted file mode 100644
index a2927e0ad..000000000
--- a/apps/ui/src/tabs/nested-bottom-navigation-page.xml
+++ /dev/null
@@ -1,39 +0,0 @@
-<Page class="page">
-
-    <ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
-    </ActionBar>
-
-    <BottomNavigation>
-      <TabStrip>
-          <TabStripItem title="First"></TabStripItem>
-          <TabStripItem title="Second"></TabStripItem>
-      </TabStrip>
-
-      <TabContentItem>
-          <Tabs>
-            <TabStrip backgroundColor="palevioletred">
-                <TabStripItem title="First"></TabStripItem>
-                <TabStripItem title="Second"></TabStripItem>
-            </TabStrip>
-
-            <TabContentItem>
-                <GridLayout backgroundColor="skyblue">
-                  <Label text="First View"/>
-                </GridLayout>
-            </TabContentItem>
-
-            <TabContentItem>
-                <GridLayout backgroundColor="gold">
-                  <Label text="Second View" />
-                </GridLayout>
-            </TabContentItem>
-          </Tabs>
-      </TabContentItem>
-
-      <TabContentItem>
-          <GridLayout>
-            <Label text="Second View" />
-          </GridLayout>
-      </TabContentItem>
-    </BottomNavigation>
-  </Page>
diff --git a/apps/ui/src/tabs/nested-layout-page.xml b/apps/ui/src/tabs/nested-layout-page.xml
deleted file mode 100644
index 58e8f4472..000000000
--- a/apps/ui/src/tabs/nested-layout-page.xml
+++ /dev/null
@@ -1,26 +0,0 @@
-<Page class="page">
-
-    <ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
-    </ActionBar>
-
-    <GridLayout>
-      <Tabs>
-        <TabStrip backgroundColor="palevioletred">
-            <TabStripItem title="First"></TabStripItem>
-            <TabStripItem title="Second"></TabStripItem>
-        </TabStrip>
-
-        <TabContentItem>
-            <GridLayout backgroundColor="skyblue">
-              <Label text="First View" />
-            </GridLayout>
-        </TabContentItem>
-
-        <TabContentItem>
-            <GridLayout backgroundColor="gold">
-              <Label text="Second View" />
-            </GridLayout>
-        </TabContentItem>
-      </Tabs>
-    </GridLayout>
-  </Page>
diff --git a/apps/ui/src/tabs/reselect-page.ts b/apps/ui/src/tabs/reselect-page.ts
deleted file mode 100644
index 7bd4b7191..000000000
--- a/apps/ui/src/tabs/reselect-page.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { EventData, Frame, Page, TabStripItemEventData, SelectedIndexChangedEventData, Tabs, TabStrip } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-	tabsNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-	tabsNav.selectedIndex = 1;
-}
-
-export function goToThird(args: EventData) {
-	console.log('---> goToThird');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-	tabsNav.selectedIndex = 2;
-}
-
-export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-	console.log('---> onSelectedIndexChanged', args.eventName);
-	console.log('---> oldIndex', args.oldIndex);
-	console.log('---> newIndex', args.newIndex);
-}
-
-export function onItemTap(args: TabStripItemEventData) {
-	console.log('---> onItemTap', args.eventName);
-	console.log('---> onItemTap', args.index);
-	console.log('---> onItemTap', args.object);
-
-	const tabStrip = <TabStrip>args.object;
-	const page = <Page>tabStrip.page;
-	const frame = <Frame>page.getViewById('frame');
-	const tabs = <Tabs>page.getViewById('tabsNav');
-
-	console.log('---> onItemTap selectedIndex', tabs.selectedIndex);
-	if (tabs.selectedIndex === args.index && frame.canGoBack()) {
-		frame.goBack();
-	}
-}
-
-export function onFirstTabStripItemTap(args: EventData) {
-	console.log('---> onFirstTabStripItemTap', args.eventName);
-	// console.log("---> onFirstTabStripItemTap", args.eventName);
-	// console.log("---> onFirstTabStripItemTap", args.object);
-	// const tabStripItem = <TabStripItem>args.object;
-
-	// const page = tabStripItem.page;
-	// const frame = <Frame>page.getViewById("frame");
-	// const tabs = <Tabs>page.getViewById("tabsNav");
-	// console.log("---> tabs.selectedIndex", tabs.selectedIndex);
-
-	// if (tabs.selectedIndex === 0 && frame.canGoBack()) {
-	//   frame.goBack();
-	// }
-}
-
-export function onSecondTabStripItemTap(args: EventData) {
-	console.log('---> onSecondTabStripItemTap', args.eventName);
-}
-
-export function onThirdTabStripItemTap(args: EventData) {
-	console.log('---> onThirdTabStripItemTap', args.eventName);
-}
diff --git a/apps/ui/src/tabs/reselect-page.xml b/apps/ui/src/tabs/reselect-page.xml
deleted file mode 100644
index a4974e509..000000000
--- a/apps/ui/src/tabs/reselect-page.xml
+++ /dev/null
@@ -1,37 +0,0 @@
-<Page>
-
-  <Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
-
-    <TabStrip itemTap="onItemTap">
-      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
-      <TabStripItem tap="onSecondTabStripItemTap">
-        <Label text="Second" />
-      </TabStripItem>
-      <TabStripItem title="First" tap="onThirdTabStripItemTap">
-        <Label text="Third" />
-      </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View" backgroundColor="red" id="label" />
-        <Button tap="goToSecond" text="go to second item" id="button" />
-        <Frame defaultPage="tabs/first-page" id="frame" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="Second Content Item" backgroundColor="lightgreen" />
-        <Button tap="goToThird" text="go to thrid item" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First Content Item" backgroundColor="lightblue" />
-        <Button tap="goToFirst" text="go to first item" />
-      </StackLayout>
-    </TabContentItem>
-
-  </Tabs>
-
-</Page>
diff --git a/apps/ui/src/tabs/second-page.ts b/apps/ui/src/tabs/second-page.ts
deleted file mode 100644
index e650d9573..000000000
--- a/apps/ui/src/tabs/second-page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { EventData, Button } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst Page');
-	const button = <Button>args.object;
-	button.page.frame.navigate('tabs/first-page');
-}
-
-export function goBack(args: EventData) {
-	console.log('---> goBack');
-	const button = <Button>args.object;
-	button.page.frame.goBack();
-}
diff --git a/apps/ui/src/tabs/second-page.xml b/apps/ui/src/tabs/second-page.xml
deleted file mode 100644
index 1ca882475..000000000
--- a/apps/ui/src/tabs/second-page.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<Page backgroundColor="lightblue" actionBarHidden="true">
-  <StackLayout>
-    <Label text="Second Page"  />
-    <Button tap="goToFirst" text="go to first page" />
-    <Button tap="goBack" text="go back" />
-  </StackLayout>
-</Page>
diff --git a/apps/ui/src/tabs/swipe-disabled-page.ts b/apps/ui/src/tabs/swipe-disabled-page.ts
deleted file mode 100644
index 9e9b4869f..000000000
--- a/apps/ui/src/tabs/swipe-disabled-page.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { EventData, Page, Tabs } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	console.log('---> goToFirst');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabs');
-	tabsNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	console.log('---> goToSecond');
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabs');
-	tabsNav.selectedIndex = 1;
-}
diff --git a/apps/ui/src/tabs/swipe-disabled-page.xml b/apps/ui/src/tabs/swipe-disabled-page.xml
deleted file mode 100644
index 5d81f4482..000000000
--- a/apps/ui/src/tabs/swipe-disabled-page.xml
+++ /dev/null
@@ -1,40 +0,0 @@
-<Page>
-
-  <ActionBar title="Tabs Swipe Disabled" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs id="tabs" swipeEnabled="false" automationText="tabNavigation"  >
-    <TabStrip selectedItemColor="red" unSelectedItemColor="black">
-      <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="News" />
-      </TabStripItem>
-      <!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="Places" />
-      </TabStripItem>
-      <!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout backgroundColor="blue">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="red">
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="green">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/tab-strip-item-page.xml b/apps/ui/src/tabs/tab-strip-item-page.xml
deleted file mode 100644
index e51a2ad66..000000000
--- a/apps/ui/src/tabs/tab-strip-item-page.xml
+++ /dev/null
@@ -1,16 +0,0 @@
-<Page>
-  <Tabs id="tabs" automationText="tabNavigation"  >
-
-    <TabStrip>
-
-      <TabStripItem title="TabStripItem 1" iconSource="res://icon">
-      </TabStripItem>
-
-    </TabStrip>
-
-    <TabContentItem>
-      <Label text="TabContentItem 1"></Label>
-    </TabContentItem>
-
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/tab-strip-items-page.xml b/apps/ui/src/tabs/tab-strip-items-page.xml
deleted file mode 100644
index b27c15739..000000000
--- a/apps/ui/src/tabs/tab-strip-items-page.xml
+++ /dev/null
@@ -1,88 +0,0 @@
-<Page>
-  <Tabs id="tabs" automationText="tabNavigation" iOSTabBarItemsAlignment="leading">
-
-    <TabStrip>
-
-      <TabStripItem title="TabStripItem 1" iconSource="res://icon">
-      </TabStripItem>
-
-      <TabStripItem>
-        <Label text="TabStripItem 2">
-        </Label>
-        <Image src="res://icon">
-        </Image>
-      </TabStripItem>
-
-      <TabStripItem title="TabStripItem X" iconSource="res://icon">
-        <Label text="TabStripItem 3">
-        </Label>
-        <Image src="res://icon">
-        </Image>
-      </TabStripItem>
-
-      <TabStripItem>
-        <Label text="TabStripItem 4">
-        </Label>
-      </TabStripItem>
-
-      <TabStripItem>
-        <Image src="res://icon">
-        </Image>
-      </TabStripItem>
-
-      <TabStripItem title="TabStripItem 6">
-      </TabStripItem>
-
-      <TabStripItem iconSource="res://icon">
-      </TabStripItem>
-
-      <TabStripItem title="TabStripItem X" iconSource="res://icon">
-        <Label text="TabStripItem 8">
-        </Label>
-      </TabStripItem>
-
-      <TabStripItem title="TabStripItem 9" iconSource="res://icon">
-        <Image src="res://icon">
-        </Image>
-      </TabStripItem>
-
-    </TabStrip>
-
-    <TabContentItem>
-      <Label text="TabContentItem 1"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 2"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 3"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 4"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 5"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 6"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 7"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 8"></Label>
-    </TabContentItem>
-
-    <TabContentItem>
-      <Label text="TabContentItem 9"></Label>
-    </TabContentItem>
-
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/tabs-binding-page.ts b/apps/ui/src/tabs/tabs-binding-page.ts
deleted file mode 100644
index 83c642f0f..000000000
--- a/apps/ui/src/tabs/tabs-binding-page.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TabsBindingNavigationViewModel } from './tabs-binding-view-model';
-
-export function tabsLoaded(args) {
-	const page = args.object.page;
-	page.bindingContext = new TabsBindingNavigationViewModel();
-}
diff --git a/apps/ui/src/tabs/tabs-binding-page.xml b/apps/ui/src/tabs/tabs-binding-page.xml
deleted file mode 100644
index e2fdacebc..000000000
--- a/apps/ui/src/tabs/tabs-binding-page.xml
+++ /dev/null
@@ -1,17 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs background-color" icon="" class="action-bar">
-  </ActionBar>
-
- <GridLayout rows="auto,*">
-     <StackLayout row="0" >
-        <Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
-        <Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
-    </StackLayout>
-    <GridLayout row="1">
-        <Tabs loaded="tabsLoaded" items="{{ tabContentItems }}" automationText="tabNavigation"  >
-            <TabStrip items="{{ tabStripItems }}"></TabStrip>
-        </Tabs>
-    </GridLayout>
-  </GridLayout>
-</Page>
diff --git a/apps/ui/src/tabs/tabs-binding-view-model.ts b/apps/ui/src/tabs/tabs-binding-view-model.ts
deleted file mode 100644
index 57dcd6fad..000000000
--- a/apps/ui/src/tabs/tabs-binding-view-model.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
-import { Label } from '@nativescript/core/ui/label';
-import { Observable } from '@nativescript/core/data/observable';
-import { ObservableArray } from '@nativescript/core/data/observable-array';
-import { TabStripItem } from '@nativescript/core/ui/tab-navigation-base/tab-strip-item';
-import { TabContentItem } from '@nativescript/core/ui/tab-navigation-base/tab-content-item';
-
-export class TabsBindingNavigationViewModel extends Observable {
-	private itemsCount: number = 1;
-	public tabStripItems = new Array<TabStripItem>();
-	public tabContentItems = new Array<TabContentItem>();
-
-	constructor() {
-		super();
-		this.createItems();
-		this.createItems();
-	}
-
-	createItems() {
-		console.log('Create item');
-
-		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++;
-	}
-
-	public removeLastItem() {
-		console.log('Remove item');
-		this.tabStripItems.pop();
-		this.tabContentItems.pop();
-	}
-
-	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.content = gridlayout;
-
-		return contentItem;
-	}
-}
diff --git a/apps/ui/src/tabs/tabs-page.ts b/apps/ui/src/tabs/tabs-page.ts
deleted file mode 100644
index b6f9e31ae..000000000
--- a/apps/ui/src/tabs/tabs-page.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { EventData, Page, Tabs } from '@nativescript/core';
-
-export function goToFirst(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-
-	tabsNav.selectedIndex = 0;
-}
-
-export function goToSecond(args: EventData) {
-	const page = <Page>(<any>args.object).page;
-	const tabsNav = <Tabs>page.getViewById('tabsNav');
-
-	tabsNav.selectedIndex = 1;
-}
diff --git a/apps/ui/src/tabs/tabs-page.xml b/apps/ui/src/tabs/tabs-page.xml
deleted file mode 100644
index cae9f44db..000000000
--- a/apps/ui/src/tabs/tabs-page.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-<Page>
-
-  <ActionBar title="Tabs" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs id="tabsNav" automationText="tabNavigation">
-    <TabStrip backgroundColor="palevioletred">
-      <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <Label text="News" />
-      </TabStripItem>
-      <TabStripItem>
-        <Label text="Places" />
-      </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout backgroundColor="skyblue">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="gold">
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="olive">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/tabs-position-page.xml b/apps/ui/src/tabs/tabs-position-page.xml
deleted file mode 100644
index 0002affc5..000000000
--- a/apps/ui/src/tabs/tabs-position-page.xml
+++ /dev/null
@@ -1,40 +0,0 @@
-<Page>
-
-  <ActionBar title="Tabs Position Bottom" icon="" class="action-bar">
-  </ActionBar>
-
-  <Tabs id="tabs" tabsPosition="bottom" automationText="tabNavigation"  >
-    <TabStrip selectedItemColor="blue" unSelectedItemColor="gray">
-      <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="News" />
-      </TabStripItem>
-      <!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
-      <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
-        <Label text="Places" />
-      </TabStripItem>
-      <!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
-    </TabStrip>
-
-    <TabContentItem>
-      <StackLayout backgroundColor="blue">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="red">
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout backgroundColor="green">
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/apps/ui/src/tabs/text-transform-page.css b/apps/ui/src/tabs/text-transform-page.css
deleted file mode 100644
index ebbc005bd..000000000
--- a/apps/ui/src/tabs/text-transform-page.css
+++ /dev/null
@@ -1,27 +0,0 @@
-Tabs {
-  text-transform: lowercase;
-}
-
-TabContentItem.special {
-  text-transform: uppercase;
-}
-
-TabStrip {
-  text-transform: capitalize;
-}
-
-TabStripItem.special {
-  text-transform: lowercase;
-}
-
-TabStripItem.special:active {
-  text-transform: uppercase;
-}
-
-TabStripItem.nested Label {
-  text-transform: lowercase;
-}
-
-TabStripItem.nested:active Label {
-  text-transform: uppercase;
-}
diff --git a/apps/ui/src/tabs/text-transform-page.xml b/apps/ui/src/tabs/text-transform-page.xml
deleted file mode 100644
index 959df60db..000000000
--- a/apps/ui/src/tabs/text-transform-page.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<Page class="page">
-
-  <ActionBar title="Tabs text-transform" class="action-bar">
-  </ActionBar>
-
-  <Tabs automationText="tabNavigation">
-    <TabStrip>
-        <TabStripItem title="first" class="special"></TabStripItem>
-        <TabStripItem title="second"></TabStripItem>
-        <TabStripItem class="nested">
-            <Label text="third" />
-        </TabStripItem>
-    </TabStrip>
-
-    <TabContentItem class="special">
-        <GridLayout>
-          <Label text="First View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" />
-        </GridLayout>
-    </TabContentItem>
-
-    <TabContentItem>
-        <GridLayout>
-          <Label text="Third View" />
-        </GridLayout>
-    </TabContentItem>
-  </Tabs>
-</Page>
diff --git a/packages/core/platforms/ios/Podfile b/packages/core/platforms/ios/Podfile
deleted file mode 100644
index 4a935d972..000000000
--- a/packages/core/platforms/ios/Podfile
+++ /dev/null
@@ -1,12 +0,0 @@
-platform :ios, '12.0'
-use_frameworks!
-
-pod 'MaterialComponents/Tabs', '~> 94.5'
-
-post_install do |installer|
-  installer.pods_project.targets.each do |target|
-    target.build_configurations.each do |config|
-      config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
-    end
-  end
-end
\ No newline at end of file
diff --git a/packages/core/ui/bottom-navigation/index.android.ts b/packages/core/ui/bottom-navigation/index.android.ts
deleted file mode 100644
index 49d7223a2..000000000
--- a/packages/core/ui/bottom-navigation/index.android.ts
+++ /dev/null
@@ -1,944 +0,0 @@
-// Types
-import { TabContentItem } from '../tab-navigation-base/tab-content-item';
-import { TabStrip } from '../tab-navigation-base/tab-strip';
-import { TabStripItem } from '../tab-navigation-base/tab-strip-item';
-import { Enums } from '../enums';
-
-// Requires
-import * as application from '../../application';
-import { ImageSource } from '../../image-source';
-import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from '../../utils';
-import { CSSType, View } from '../core/view';
-import { Color } from '../../color';
-import { Frame } from '../frame';
-import { Font } from '../styling/font';
-import { getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty } from '../tab-navigation-base/tab-navigation-base';
-import { getTransformedText } from '../text-base';
-
-// TODO: Impl trace
-// import { Trace } from "../../../trace";
-
-const PRIMARY_COLOR = 'colorPrimary';
-const DEFAULT_ELEVATION = 8;
-
-const TABID = '_tabId';
-const INDEX = '_index';
-const ownerSymbol = Symbol('_owner');
-
-let TabFragment: any;
-let BottomNavigationBar: any;
-let AttachStateChangeListener: any;
-let appResources: android.content.res.Resources;
-
-class IconInfo {
-	drawable: android.graphics.drawable.BitmapDrawable;
-	height: number;
-}
-
-function makeFragmentName(viewId: number, id: number): string {
-	return 'android:bottomnavigation:' + viewId + ':' + id;
-}
-
-function getTabById(id: number): BottomNavigation {
-	const ref = tabs.find((ref) => {
-		const tab = ref.get();
-
-		return tab && tab._domId === id;
-	});
-
-	return ref && ref.get();
-}
-
-function initializeNativeClasses() {
-	if (BottomNavigationBar) {
-		return;
-	}
-
-	@NativeClass
-	class TabFragmentImplementation extends org.nativescript.widgets.FragmentBase {
-		private owner: BottomNavigation;
-		private index: number;
-		private backgroundBitmap: android.graphics.Bitmap = null;
-
-		constructor() {
-			super();
-
-			return global.__native(this);
-		}
-
-		static newInstance(tabId: number, index: number): TabFragmentImplementation {
-			const args = new android.os.Bundle();
-			args.putInt(TABID, tabId);
-			args.putInt(INDEX, index);
-			const fragment = new TabFragmentImplementation();
-			fragment.setArguments(args);
-
-			return fragment;
-		}
-
-		public onCreate(savedInstanceState: android.os.Bundle): void {
-			super.onCreate(savedInstanceState);
-			const args = this.getArguments();
-			this.owner = getTabById(args.getInt(TABID));
-			this.index = args.getInt(INDEX);
-			if (!this.owner) {
-				throw new Error(`Cannot find BottomNavigation`);
-			}
-		}
-
-		public onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
-			const tabItem = this.owner.items[this.index];
-
-			return tabItem.nativeViewProtected;
-		}
-
-		public onDestroyView() {
-			const hasRemovingParent = this.getRemovingParentFragment();
-
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			if (hasRemovingParent && this.owner.selectedIndex === this.index) {
-				const bitmapDrawable = new android.graphics.drawable.BitmapDrawable(appResources, this.backgroundBitmap);
-				this.owner._originalBackground = this.owner.backgroundColor || new Color('White');
-				this.owner.nativeViewProtected.setBackgroundDrawable(bitmapDrawable);
-				this.backgroundBitmap = null;
-
-				const thisView = this.getView();
-				if (thisView) {
-					const thisViewParent = thisView.getParent();
-					if (thisViewParent && thisViewParent instanceof android.view.ViewGroup) {
-						thisViewParent.removeView(thisView);
-					}
-				}
-			}
-
-			super.onDestroyView();
-		}
-
-		public onPause(): void {
-			const hasRemovingParent = this.getRemovingParentFragment();
-
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			if (hasRemovingParent && this.owner.selectedIndex === this.index) {
-				this.backgroundBitmap = this.loadBitmapFromView(this.owner.nativeViewProtected);
-			}
-
-			super.onPause();
-		}
-
-		private loadBitmapFromView(view: android.view.View): android.graphics.Bitmap {
-			// Another way to get view bitmap. Test performance vs setDrawingCacheEnabled
-			// const width = view.getWidth();
-			// const height = view.getHeight();
-			// const bitmap = android.graphics.Bitmap.createBitmap(width, height, android.graphics.Bitmap.Config.ARGB_8888);
-			// const canvas = new android.graphics.Canvas(bitmap);
-			// view.layout(0, 0, width, height);
-			// view.draw(canvas);
-
-			view.setDrawingCacheEnabled(true);
-			const bitmap = android.graphics.Bitmap.createBitmap(view.getDrawingCache());
-			view.setDrawingCacheEnabled(false);
-
-			return bitmap;
-		}
-	}
-
-	@NativeClass
-	class BottomNavigationBarImplementation extends org.nativescript.widgets.BottomNavigationBar {
-		constructor(context: android.content.Context, public owner: BottomNavigation) {
-			super(context);
-
-			return global.__native(this);
-		}
-
-		public onSelectedPositionChange(position: number, prevPosition: number): void {
-			const owner = this.owner;
-			if (!owner) {
-				return;
-			}
-
-			owner.changeTab(position);
-
-			const tabStripItems = owner.tabStrip && owner.tabStrip.items;
-
-			if (position >= 0 && tabStripItems && tabStripItems[position]) {
-				tabStripItems[position]._emit(TabStripItem.selectEvent);
-			}
-
-			if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
-				tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
-			}
-
-			owner._setItemsColors(owner.tabStrip.items);
-		}
-
-		public onTap(position: number): boolean {
-			const owner = this.owner;
-			if (!owner) {
-				return false;
-			}
-
-			const tabStrip = owner.tabStrip;
-			const tabStripItems = tabStrip && tabStrip.items;
-
-			if (position >= 0 && tabStripItems[position]) {
-				tabStripItems[position]._emit(TabStripItem.tapEvent);
-				tabStrip.notify({
-					eventName: TabStrip.itemTapEvent,
-					object: tabStrip,
-					index: position,
-				});
-			}
-
-			if (!owner.items[position]) {
-				return false;
-			}
-
-			return true;
-		}
-	}
-
-	@NativeClass
-	@Interfaces([android.view.View.OnAttachStateChangeListener])
-	class AttachListener extends java.lang.Object implements android.view.View.OnAttachStateChangeListener {
-		constructor() {
-			super();
-
-			return global.__native(this);
-		}
-
-		onViewAttachedToWindow(view: android.view.View): void {
-			const owner: View = view[ownerSymbol];
-			if (owner) {
-				owner._onAttachedToWindow();
-			}
-		}
-
-		onViewDetachedFromWindow(view: android.view.View): void {
-			const owner: View = view[ownerSymbol];
-			if (owner) {
-				owner._onDetachedFromWindow();
-			}
-		}
-	}
-
-	TabFragment = TabFragmentImplementation;
-	BottomNavigationBar = BottomNavigationBarImplementation;
-	AttachStateChangeListener = new AttachListener();
-	appResources = application.android.context.getResources();
-}
-
-function setElevation(bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
-	const compat = <any>androidx.core.view.ViewCompat;
-	if (compat.setElevation) {
-		const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
-		compat.setElevation(bottomNavigationBar, val);
-	}
-}
-
-export const tabs = new Array<WeakRef<BottomNavigation>>();
-
-function iterateIndexRange(index: number, eps: number, lastIndex: number, callback: (i) => void) {
-	const rangeStart = Math.max(0, index - eps);
-	const rangeEnd = Math.min(index + eps, lastIndex);
-	for (let i = rangeStart; i <= rangeEnd; i++) {
-		callback(i);
-	}
-}
-
-@CSSType('BottomNavigation')
-export class BottomNavigation extends TabNavigationBase {
-	private _contentView: org.nativescript.widgets.ContentLayout;
-	private _contentViewId = -1;
-	private _bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar;
-	private _currentFragment: androidx.fragment.app.Fragment;
-	private _currentTransaction: androidx.fragment.app.FragmentTransaction;
-	private _attachedToWindow = false;
-	public _originalBackground: any;
-	private _textTransform: Enums.TextTransformType = 'none';
-	private _selectedItemColor: Color;
-	private _unSelectedItemColor: Color;
-
-	constructor() {
-		super();
-		tabs.push(new WeakRef(this));
-	}
-
-	get _hasFragments(): boolean {
-		return true;
-	}
-
-	public onItemsChanged(oldItems: TabContentItem[], newItems: TabContentItem[]): void {
-		super.onItemsChanged(oldItems, newItems);
-
-		if (oldItems) {
-			oldItems.forEach((item: TabContentItem, i, arr) => {
-				(<any>item).index = 0;
-				(<any>item).tabItemSpec = null;
-				item.setNativeView(null);
-			});
-		}
-	}
-
-	public createNativeView() {
-		initializeNativeClasses();
-		// if (Trace.isEnabled()) {
-		//     Trace.write("BottomNavigation._createUI(" + this + ");", traceCategory);
-		// }
-
-		const context: android.content.Context = this._context;
-		const nativeView = new org.nativescript.widgets.GridLayout(context);
-
-		nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
-		nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
-
-		// CONTENT VIEW
-		const contentView = new org.nativescript.widgets.ContentLayout(this._context);
-		const contentViewLayoutParams = new org.nativescript.widgets.CommonLayoutParams();
-		contentViewLayoutParams.row = 0;
-		contentView.setLayoutParams(contentViewLayoutParams);
-		nativeView.addView(contentView);
-		(<any>nativeView).contentView = contentView;
-
-		// TABSTRIP
-		const bottomNavigationBar = new BottomNavigationBar(context, this);
-		const bottomNavigationBarLayoutParams = new org.nativescript.widgets.CommonLayoutParams();
-		bottomNavigationBarLayoutParams.row = 1;
-		bottomNavigationBar.setLayoutParams(bottomNavigationBarLayoutParams);
-		nativeView.addView(bottomNavigationBar);
-		(<any>nativeView).bottomNavigationBar = bottomNavigationBar;
-
-		setElevation(bottomNavigationBar);
-
-		const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
-		if (primaryColor) {
-			bottomNavigationBar.setBackgroundColor(primaryColor);
-		}
-
-		return nativeView;
-	}
-
-	public initNativeView(): void {
-		super.initNativeView();
-
-		if (this._contentViewId < 0) {
-			this._contentViewId = android.view.View.generateViewId();
-		}
-
-		const nativeView: any = this.nativeViewProtected;
-
-		nativeView.addOnAttachStateChangeListener(AttachStateChangeListener);
-		nativeView[ownerSymbol] = this;
-
-		this._contentView = (<any>nativeView).contentView;
-		this._contentView.setId(this._contentViewId);
-
-		this._bottomNavigationBar = (<any>nativeView).bottomNavigationBar;
-		(<any>this._bottomNavigationBar).owner = this;
-
-		if (this.tabStrip) {
-			this.tabStrip.setNativeView(this._bottomNavigationBar);
-		}
-	}
-
-	public _loadUnloadTabItems(newIndex: number) {
-		const items = this.items;
-		const lastIndex = this.items.length - 1;
-		const offsideItems = 0;
-
-		const toUnload = [];
-		const toLoad = [];
-
-		iterateIndexRange(newIndex, offsideItems, lastIndex, (i) => toLoad.push(i));
-
-		items.forEach((item, i) => {
-			const indexOfI = toLoad.indexOf(i);
-			if (indexOfI < 0) {
-				toUnload.push(i);
-			}
-		});
-
-		toUnload.forEach((index) => {
-			const item = items[index];
-			if (items[index]) {
-				item.unloadView(item.content);
-			}
-		});
-
-		const newItem = items[newIndex];
-		const selectedView = newItem && newItem.content;
-		if (selectedView instanceof Frame) {
-			selectedView._pushInFrameStackRecursive();
-		}
-
-		toLoad.forEach((index) => {
-			const item = items[index];
-			if (this.isLoaded && items[index]) {
-				item.loadView(item.content);
-			}
-		});
-	}
-
-	public onLoaded(): void {
-		super.onLoaded();
-
-		if (this._originalBackground) {
-			this.backgroundColor = null;
-			this.backgroundColor = this._originalBackground;
-			this._originalBackground = null;
-		}
-
-		if (this.tabStrip) {
-			this.setTabStripItems(this.tabStrip.items);
-		} else {
-			// manually set the visibility, so that the grid layout remeasures
-			this._bottomNavigationBar.setVisibility(android.view.View.GONE);
-		}
-
-		this.changeTab(this.selectedIndex);
-	}
-
-	_onAttachedToWindow(): void {
-		super._onAttachedToWindow();
-
-		// _onAttachedToWindow called from OS again after it was detach
-		// TODO: Consider testing and removing it when update to androidx.fragment:1.2.0
-		if (this._manager && this._manager.isDestroyed()) {
-			return;
-		}
-
-		this._attachedToWindow = true;
-		this.changeTab(this.selectedIndex);
-	}
-
-	_onDetachedFromWindow(): void {
-		super._onDetachedFromWindow();
-
-		this._attachedToWindow = false;
-	}
-
-	public onUnloaded(): void {
-		super.onUnloaded();
-
-		if (this.tabStrip) {
-			this.setTabStripItems(null);
-		}
-
-		const fragmentToDetach = this._currentFragment;
-		if (fragmentToDetach) {
-			this.destroyItem((<any>fragmentToDetach).index, fragmentToDetach);
-			this.removeFragment(fragmentToDetach);
-		}
-	}
-
-	public disposeNativeView() {
-		this._bottomNavigationBar.setItems(null);
-		this._bottomNavigationBar = null;
-
-		this.nativeViewProtected.removeOnAttachStateChangeListener(AttachStateChangeListener);
-		this.nativeViewProtected[ownerSymbol] = null;
-
-		super.disposeNativeView();
-	}
-
-	public _onRootViewReset(): void {
-		super._onRootViewReset();
-
-		// call this AFTER the super call to ensure descendants apply their rootview-reset logic first
-		// i.e. in a scenario with tab frames let the frames cleanup their fragments first, and then
-		// cleanup the tab fragments to avoid
-		// android.content.res.Resources$NotFoundException: Unable to find resource ID #0xfffffff6
-		this.disposeTabFragments();
-	}
-
-	private disposeTabFragments(): void {
-		const fragmentManager = this._getFragmentManager();
-		const fragments = fragmentManager.getFragments().toArray();
-		for (let i = 0; i < fragments.length; i++) {
-			this.removeFragment(fragments[i]);
-		}
-	}
-
-	private attachFragment(fragment: androidx.fragment.app.Fragment, id?: number, name?: string): void {
-		const fragmentManager = this._getFragmentManager();
-		if (fragment) {
-			if (fragment.isAdded() || fragment.isRemoving()) {
-				// ignore
-			} else {
-				const fragmentExitTransition = fragment.getExitTransition();
-				if (fragmentExitTransition && fragmentExitTransition instanceof org.nativescript.widgets.CustomTransition) {
-					fragmentExitTransition.setResetOnTransitionEnd(true);
-				}
-				if (fragmentManager) {
-					if (!fragmentManager.isDestroyed()) {
-						try {
-							if (fragmentManager.isStateSaved()) {
-								if (id && name) {
-									fragmentManager.beginTransaction().add(id, fragment, name).commitNowAllowingStateLoss();
-								} else {
-									fragmentManager.beginTransaction().attach(fragment).commitNowAllowingStateLoss();
-								}
-							} else {
-								if (id && name) {
-									fragmentManager.beginTransaction().add(id, fragment, name).commitNow();
-								} else {
-									fragmentManager.beginTransaction().attach(fragment).commitNow();
-								}
-							}
-						} catch (e) {}
-					}
-				}
-			}
-		}
-	}
-
-	// TODO: Should we extract adapter-like class?
-	// TODO: Rename this?
-	public changeTab(index: number) {
-		// index is -1 when there are no items
-		// bot nav is not attached if you change the tab too early
-		if (index === -1 || !this._attachedToWindow) {
-			return;
-		}
-
-		const fragmentToDetach = this._currentFragment;
-		if (fragmentToDetach) {
-			this.destroyItem((<any>fragmentToDetach).index, fragmentToDetach);
-		}
-
-		const fragment = this.instantiateItem(this._contentView, index);
-		this.setPrimaryItem(index, fragment);
-	}
-
-	private instantiateItem(container: android.view.ViewGroup, position: number): androidx.fragment.app.Fragment {
-		const name = makeFragmentName(container.getId(), position);
-
-		const fragmentManager = this._getFragmentManager();
-		let fragment: androidx.fragment.app.Fragment = fragmentManager.findFragmentByTag(name);
-		if (fragment != null) {
-			this.attachFragment(fragment);
-		} else {
-			fragment = TabFragment.newInstance(this._domId, position);
-			this.attachFragment(fragment, container.getId(), name);
-		}
-
-		if (fragment !== this._currentFragment) {
-			fragment.setMenuVisibility(false);
-			fragment.setUserVisibleHint(false);
-		}
-
-		return fragment;
-	}
-
-	private setPrimaryItem(position: number, fragment: androidx.fragment.app.Fragment): void {
-		if (fragment !== this._currentFragment) {
-			if (this._currentFragment != null) {
-				this._currentFragment.setMenuVisibility(false);
-				this._currentFragment.setUserVisibleHint(false);
-			}
-
-			if (fragment != null) {
-				fragment.setMenuVisibility(true);
-				// commenting out as it fixes rare crash when going
-				// back from deeply nested/modally shown fragments
-				// fragment.setUserVisibleHint(true);
-			}
-
-			this._currentFragment = fragment;
-			this.selectedIndex = position;
-
-			const tabItems = this.items;
-			const tabItem = tabItems ? tabItems[position] : null;
-			if (tabItem) {
-				tabItem.canBeLoaded = true;
-				this._loadUnloadTabItems(position);
-			}
-		}
-	}
-
-	private destroyItem(position: number, fragment: androidx.fragment.app.Fragment): void {
-		if (fragment) {
-			this.removeFragment(fragment);
-			if (this._currentFragment === fragment) {
-				this._currentFragment = null;
-			}
-		}
-
-		if (this.items && this.items[position]) {
-			this.items[position].canBeLoaded = false;
-		}
-	}
-	private removeFragment(fragment: androidx.fragment.app.Fragment, fragmentManager?: any) {
-		if (!fragmentManager) {
-			fragmentManager = this._getFragmentManager();
-		}
-		if (fragment) {
-			if (!fragment.isAdded() || fragment.isRemoving()) {
-				// ignore
-				return;
-			} else {
-				const fragmentExitTransition = fragment.getExitTransition();
-				if (fragmentExitTransition && fragmentExitTransition instanceof org.nativescript.widgets.CustomTransition) {
-					fragmentExitTransition.setResetOnTransitionEnd(true);
-				}
-				if (fragment && fragment.isAdded() && !fragment.isRemoving()) {
-					const pfm = (<any>fragment).getParentFragmentManager ? (<any>fragment).getParentFragmentManager() : fragmentManager;
-					if (pfm) {
-						try {
-							if (pfm.isStateSaved()) {
-								pfm.beginTransaction().remove(fragment).commitNowAllowingStateLoss();
-							} else {
-								pfm.beginTransaction().remove(fragment).commitNow();
-							}
-						} catch (e) {}
-					}
-				}
-			}
-		}
-	}
-
-	private setTabStripItems(items: Array<TabStripItem>) {
-		if (!this.tabStrip || !items) {
-			this._bottomNavigationBar.setItems(null);
-
-			return;
-		}
-
-		const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
-		items.forEach((tabStripItem, i, arr) => {
-			tabStripItem._index = i;
-			if (items[i]) {
-				const tabItemSpec = this.createTabItemSpec(items[i]);
-				tabItems.push(tabItemSpec);
-			}
-		});
-
-		this._bottomNavigationBar.setItems(tabItems);
-
-		items.forEach((item, i, arr) => {
-			const textView = this._bottomNavigationBar.getTextViewForItemAt(i);
-			item.setNativeView(textView);
-			this._setItemColor(item);
-		});
-	}
-
-	private getItemLabelTextTransform(tabStripItem: TabStripItem): Enums.TextTransformType {
-		const nestedLabel = tabStripItem.label;
-		let textTransform: Enums.TextTransformType = null;
-		if (nestedLabel && nestedLabel.style.textTransform !== 'initial') {
-			textTransform = nestedLabel.style.textTransform;
-		} else if (tabStripItem.style.textTransform !== 'initial') {
-			textTransform = tabStripItem.style.textTransform;
-		}
-
-		return textTransform || this._textTransform;
-	}
-
-	private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
-		const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
-
-		if (tabStripItem.isLoaded) {
-			const titleLabel = tabStripItem.label;
-			let title = titleLabel.text;
-
-			// TEXT-TRANSFORM
-			const textTransform = this.getItemLabelTextTransform(tabStripItem);
-			title = getTransformedText(title, textTransform);
-			tabItemSpec.title = title;
-
-			// BACKGROUND-COLOR
-			const backgroundColor = tabStripItem.style.backgroundColor;
-			tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
-
-			// COLOR
-			const itemColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
-			const color = itemColor || titleLabel.style.color;
-			tabItemSpec.color = color && color.android;
-
-			// FONT
-			const fontInternal = titleLabel.style.fontInternal;
-			if (fontInternal) {
-				tabItemSpec.fontSize = fontInternal.fontSize;
-				tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
-			}
-
-			// ICON
-			const iconSource = tabStripItem.image && tabStripItem.image.src;
-			if (iconSource) {
-				const iconInfo = this.getIconInfo(tabStripItem, itemColor);
-
-				if (iconInfo) {
-					// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
-					// tslint:disable-next-line:deprecation
-					tabItemSpec.iconDrawable = iconInfo.drawable;
-					tabItemSpec.imageHeight = iconInfo.height;
-				} else {
-					// TODO:
-					// traceMissingIcon(iconSource);
-				}
-			}
-		}
-
-		return tabItemSpec;
-	}
-
-	private getOriginalIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.Bitmap {
-		const iconSource = tabStripItem.image && tabStripItem.image.src;
-		if (!iconSource) {
-			return null;
-		}
-
-		let is: ImageSource;
-		if (isFontIconURI(iconSource)) {
-			const fontIconCode = iconSource.split('//')[1];
-			const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
-			const font = target.style.fontInternal;
-			if (!color) {
-				color = target.style.color;
-			}
-			is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
-		} else {
-			is = ImageSource.fromFileOrResourceSync(iconSource);
-		}
-
-		return is && is.android;
-	}
-
-	private getDrawableInfo(image: android.graphics.Bitmap): IconInfo {
-		if (image) {
-			if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
-				image = this.getFixedSizeIcon(image);
-			}
-
-			const imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
-
-			return {
-				drawable: imageDrawable,
-				height: image.getHeight(),
-			};
-		}
-
-		return new IconInfo();
-	}
-
-	private getIconInfo(tabStripItem: TabStripItem, color?: Color): IconInfo {
-		const originalIcon = this.getOriginalIcon(tabStripItem, color);
-
-		return this.getDrawableInfo(originalIcon);
-	}
-
-	private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
-		const inWidth = image.getWidth();
-		const inHeight = image.getHeight();
-
-		const iconSpecSize = getIconSpecSize({
-			width: inWidth,
-			height: inHeight,
-		});
-
-		const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
-		const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
-
-		const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
-
-		return scaledImage;
-	}
-
-	public updateAndroidItemAt(index: number, spec: org.nativescript.widgets.TabItemSpec) {
-		this._bottomNavigationBar.updateItemAt(index, spec);
-	}
-
-	public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
-		return this._bottomNavigationBar.getBackground();
-	}
-
-	public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
-		if (value instanceof Color) {
-			this._bottomNavigationBar.setBackgroundColor(value.android);
-		} else {
-			this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
-		}
-
-		this.updateTabStripItems();
-	}
-
-	private updateTabStripItems(): void {
-		this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
-			if (tabStripItem.nativeView) {
-				const tabItemSpec = this.createTabItemSpec(tabStripItem);
-				this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
-			}
-		});
-	}
-
-	public _setItemsColors(items: Array<TabStripItem>): void {
-		items.forEach((item) => {
-			if (item.nativeView) {
-				this._setItemColor(item);
-			}
-		});
-	}
-
-	public getTabBarSelectedItemColor(): Color {
-		return this._selectedItemColor;
-	}
-
-	public setTabBarSelectedItemColor(value: Color) {
-		this._selectedItemColor = value;
-		this._setItemsColors(this.tabStrip.items);
-	}
-
-	public getTabBarUnSelectedItemColor(): Color {
-		return this._unSelectedItemColor;
-	}
-
-	public setTabBarUnSelectedItemColor(value: Color) {
-		this._unSelectedItemColor = value;
-		this._setItemsColors(this.tabStrip.items);
-	}
-
-	private updateItem(tabStripItem: TabStripItem): void {
-		// TODO: Should figure out a way to do it directly with the the nativeView
-		const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-		const tabItemSpec = this.createTabItemSpec(tabStripItem);
-		this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
-	}
-
-	public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
-		this.updateItem(tabStripItem);
-	}
-
-	public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
-		this.updateItem(tabStripItem);
-	}
-
-	public _setItemColor(tabStripItem: TabStripItem) {
-		const itemColor = tabStripItem._index === this.selectedIndex ? this._selectedItemColor : this._unSelectedItemColor;
-		if (!itemColor) {
-			return;
-		}
-
-		// set label color
-		tabStripItem.nativeViewProtected.setTextColor(itemColor.android);
-
-		// set icon color
-		this.setIconColor(tabStripItem, itemColor);
-	}
-
-	private setIconColor(tabStripItem: TabStripItem, color?: Color) {
-		const tabBarItem = this._bottomNavigationBar.getViewForItemAt(tabStripItem._index);
-
-		const drawableInfo = this.getIconInfo(tabStripItem, color);
-		const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
-		imgView.setImageDrawable(drawableInfo.drawable);
-		if (color) {
-			imgView.setColorFilter(color.android);
-		}
-	}
-
-	public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
-		const itemColor = tabStripItem._index === this.selectedIndex ? this._selectedItemColor : this._unSelectedItemColor;
-		if (itemColor) {
-			// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
-			// so it does not respect the css color
-			return;
-		}
-
-		const androidColor = value instanceof Color ? value.android : value;
-		tabStripItem.nativeViewProtected.setTextColor(androidColor);
-	}
-
-	public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
-		const itemColor = tabStripItem._index === this.selectedIndex ? this._selectedItemColor : this._unSelectedItemColor;
-		if (itemColor) {
-			// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
-			// so it does not respect the css color
-			return;
-		}
-
-		this.setIconColor(tabStripItem);
-	}
-
-	public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
-		this.updateItem(tabStripItem);
-	}
-
-	public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
-		if (value.fontSize) {
-			tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
-		}
-
-		tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface());
-	}
-
-	public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: Enums.TextTransformType): void {
-		const titleLabel = tabStripItem.label;
-		const title = getTransformedText(titleLabel.text, value);
-		tabStripItem.nativeViewProtected.setText(title);
-	}
-
-	public getTabBarTextTransform(): Enums.TextTransformType {
-		return this._textTransform;
-	}
-
-	public setTabBarTextTransform(value: Enums.TextTransformType): void {
-		const items = this.tabStrip && this.tabStrip.items;
-		if (items) {
-			items.forEach((tabStripItem) => {
-				if (tabStripItem.label && tabStripItem.nativeViewProtected) {
-					const nestedLabel = tabStripItem.label;
-					const title = getTransformedText(nestedLabel.text, value);
-					tabStripItem.nativeViewProtected.setText(title);
-				}
-			});
-		}
-		this._textTransform = value;
-	}
-
-	[selectedIndexProperty.setNative](value: number) {
-		// const smoothScroll = false;
-
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
-		// }
-
-		if (this.tabStrip) {
-			this._bottomNavigationBar.setSelectedPosition(value);
-		} else {
-			this.changeTab(value);
-		}
-	}
-
-	[itemsProperty.getDefault](): TabContentItem[] {
-		return null;
-	}
-	[itemsProperty.setNative](value: TabContentItem[]) {
-		if (value) {
-			value.forEach((item: TabContentItem, i) => {
-				(<any>item).index = i;
-			});
-		}
-
-		selectedIndexProperty.coerce(this);
-	}
-
-	[tabStripProperty.getDefault](): TabStrip {
-		return null;
-	}
-	[tabStripProperty.setNative](value: TabStrip) {
-		const items = this.tabStrip ? this.tabStrip.items : null;
-		this.setTabStripItems(items);
-	}
-}
-
-function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
-	if (value) {
-		const constantState = value.getConstantState();
-		if (constantState) {
-			return constantState.newDrawable(resources);
-		}
-	}
-
-	return value;
-}
diff --git a/packages/core/ui/bottom-navigation/index.d.ts b/packages/core/ui/bottom-navigation/index.d.ts
deleted file mode 100644
index 14dae16cd..000000000
--- a/packages/core/ui/bottom-navigation/index.d.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { TabNavigationBase } from '../tab-navigation-base/tab-navigation-base';
-import { TabContentItem } from '../tab-navigation-base/tab-content-item';
-import { TabStrip } from '../tab-navigation-base/tab-strip';
-import { Property, CoercibleProperty } from '../core/properties';
-import { EventData } from '../../data/observable';
-
-/**
- * Defines the data for the TabView.selectedIndexChanged event.
- */
-export interface SelectedIndexChangedEventData extends EventData {
-	/**
-	 * The old selected index.
-	 */
-	oldIndex: number;
-
-	/**
-	 * The new selected index.
-	 */
-	newIndex: number;
-}
-
-/**
- * Represents a tab navigation widget with static tabs at the bottom.
- */
-export class BottomNavigation extends TabNavigationBase {
-	/**
-	 * Gets or sets the items of the BottomNavigation.
-	 */
-	items: Array<TabContentItem>;
-
-	/**
-	 * Gets or sets the tab strip of the BottomNavigation.
-	 */
-	tabStrip: TabStrip;
-
-	/**
-	 * Gets or sets the selectedIndex of the BottomNavigation.
-	 */
-	selectedIndex: number;
-
-	/**
-	 * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
-	 */
-	android: any /* android.view.View */; //android.support.v4.view.ViewPager;
-
-	/**
-	 * Gets the native iOS [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) that represents the user interface for this component. Valid only when running on iOS.
-	 */
-	ios: any /* UITabBarController */;
-
-	/**
-	 * String value used when hooking to the selectedIndexChanged event.
-	 */
-	public static selectedIndexChangedEvent: string;
-
-	/**
-	 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-	 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
-	 * @param callback - Callback function which will be executed when event is raised.
-	 * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
-	 */
-	on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
-
-	/**
-	 * Raised when the selected index changes.
-	 */
-	on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
-}
-
-export const itemsProperty: Property<BottomNavigation, TabContentItem[]>;
-export const tabStripProperty: Property<BottomNavigation, TabStrip>;
-export const selectedIndexProperty: CoercibleProperty<BottomNavigation, number>;
diff --git a/packages/core/ui/bottom-navigation/index.ios.ts b/packages/core/ui/bottom-navigation/index.ios.ts
deleted file mode 100644
index 608d65c64..000000000
--- a/packages/core/ui/bottom-navigation/index.ios.ts
+++ /dev/null
@@ -1,817 +0,0 @@
-// Types
-import { TabContentItem } from '../tab-navigation-base/tab-content-item';
-import { TabStrip } from '../tab-navigation-base/tab-strip';
-import { TabStripItem } from '../tab-navigation-base/tab-strip-item';
-import { getTransformedText } from '../text-base';
-import { Enums } from '../enums';
-// Requires
-import { Color } from '../../color';
-import { ImageSource } from '../../image-source';
-import { Device } from '../../platform';
-import { iOSNativeHelper, isFontIconURI, layout } from '../../utils';
-import { CSSType, IOSHelper, View } from '../core/view';
-import { Frame } from '../frame';
-import { Font } from '../styling/font';
-import { getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty } from '../tab-navigation-base/tab-navigation-base';
-
-// TODO:
-// import { profile } from "../../profiling";
-
-const maxTabsCount = 5;
-const majorVersion = iOSNativeHelper.MajorVersion;
-const isPhone = Device.deviceType === 'Phone';
-
-@NativeClass
-class UITabBarControllerImpl extends UITabBarController {
-	private _owner: WeakRef<BottomNavigation>;
-
-	public static initWithOwner(owner: WeakRef<BottomNavigation>): UITabBarControllerImpl {
-		const handler = <UITabBarControllerImpl>UITabBarControllerImpl.new();
-		handler._owner = owner;
-
-		return handler;
-	}
-
-	// TODO
-	// @profile
-	public viewWillAppear(animated: boolean): void {
-		super.viewWillAppear(animated);
-		const owner = this._owner.get();
-		if (!owner) {
-			return;
-		}
-
-		// Unify translucent and opaque bars layout
-		this.extendedLayoutIncludesOpaqueBars = true;
-
-		IOSHelper.updateAutoAdjustScrollInsets(this, owner);
-
-		if (!owner.parent) {
-			owner.callLoaded();
-		}
-	}
-
-	// TODO
-	// @profile
-	public viewDidDisappear(animated: boolean): void {
-		super.viewDidDisappear(animated);
-		const owner = this._owner.get();
-		if (owner && !owner.parent && owner.isLoaded && !this.presentedViewController) {
-			owner.callUnloaded();
-		}
-	}
-
-	public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void {
-		super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator);
-		coordinator.animateAlongsideTransitionCompletion(() => {
-			const owner = this._owner.get();
-			if (owner && owner.tabStrip && owner.tabStrip.items) {
-				const tabStrip = owner.tabStrip;
-				tabStrip.items.forEach((tabStripItem) => {
-					updateBackgroundPositions(tabStrip, tabStripItem);
-
-					const index = tabStripItem._index;
-					const tabBarItemController = this.viewControllers[index];
-					updateTitleAndIconPositions(tabStripItem, tabBarItemController.tabBarItem, tabBarItemController);
-				});
-			}
-		}, null);
-	}
-
-	// Mind implementation for other controllers
-	public traitCollectionDidChange(previousTraitCollection: UITraitCollection): void {
-		super.traitCollectionDidChange(previousTraitCollection);
-
-		if (majorVersion >= 13) {
-			const owner = this._owner.get();
-			if (owner && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection(previousTraitCollection)) {
-				owner.notify({
-					eventName: IOSHelper.traitCollectionColorAppearanceChangedEvent,
-					object: owner,
-				});
-			}
-		}
-	}
-}
-
-@NativeClass
-class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControllerDelegate {
-	public static ObjCProtocols = [UITabBarControllerDelegate];
-
-	private _owner: WeakRef<BottomNavigation>;
-
-	public static initWithOwner(owner: WeakRef<BottomNavigation>): UITabBarControllerDelegateImpl {
-		const delegate = <UITabBarControllerDelegateImpl>UITabBarControllerDelegateImpl.new();
-		delegate._owner = owner;
-
-		return delegate;
-	}
-
-	public tabBarControllerShouldSelectViewController(tabBarController: UITabBarController, viewController: UIViewController): boolean {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
-		// }
-
-		const owner = this._owner.get();
-		if (owner) {
-			// "< More" cannot be visible after clicking on the main tab bar buttons.
-			const backToMoreWillBeVisible = false;
-			owner._handleTwoNavigationBars(backToMoreWillBeVisible);
-
-			if (tabBarController.viewControllers) {
-				const position = tabBarController.viewControllers.indexOfObject(viewController);
-				if (position !== NSNotFound) {
-					const tabStrip = owner.tabStrip;
-					const tabStripItems = tabStrip && tabStrip.items;
-
-					if (tabStripItems && tabStripItems[position]) {
-						tabStripItems[position]._emit(TabStripItem.tapEvent);
-						tabStrip.notify({
-							eventName: TabStrip.itemTapEvent,
-							object: tabStrip,
-							index: position,
-						});
-					}
-				}
-			}
-		}
-
-		if ((<any>tabBarController).selectedViewController === viewController) {
-			return false;
-		}
-
-		(<any>tabBarController)._willSelectViewController = viewController;
-
-		return true;
-	}
-
-	public tabBarControllerDidSelectViewController(tabBarController: UITabBarController, viewController: UIViewController): void {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.delegate.DID_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
-		// }
-
-		const owner = this._owner.get();
-		if (owner) {
-			owner._onViewControllerShown(viewController);
-		}
-
-		(<any>tabBarController)._willSelectViewController = undefined;
-	}
-}
-
-@NativeClass
-class UINavigationControllerDelegateImpl extends NSObject implements UINavigationControllerDelegate {
-	public static ObjCProtocols = [UINavigationControllerDelegate];
-
-	private _owner: WeakRef<BottomNavigation>;
-
-	public static initWithOwner(owner: WeakRef<BottomNavigation>): UINavigationControllerDelegateImpl {
-		const delegate = <UINavigationControllerDelegateImpl>UINavigationControllerDelegateImpl.new();
-		delegate._owner = owner;
-
-		return delegate;
-	}
-
-	navigationControllerWillShowViewControllerAnimated(navigationController: UINavigationController, viewController: UIViewController, animated: boolean): void {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.moreNavigationController.WILL_show(" + navigationController + ", " + viewController + ", " + animated + ");", Trace.categories.Debug);
-		// }
-
-		const owner = this._owner.get();
-		if (owner) {
-			// If viewController is one of our tab item controllers, then "< More" will be visible shortly.
-			// Otherwise viewController is the UIMoreListController which shows the list of all tabs beyond the 4th tab.
-			const backToMoreWillBeVisible = owner._ios.viewControllers.containsObject(viewController);
-			owner._handleTwoNavigationBars(backToMoreWillBeVisible);
-		}
-	}
-
-	navigationControllerDidShowViewControllerAnimated(navigationController: UINavigationController, viewController: UIViewController, animated: boolean): void {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.moreNavigationController.DID_show(" + navigationController + ", " + viewController + ", " + animated + ");", Trace.categories.Debug);
-		// }
-		// We don't need Edit button in More screen.
-		navigationController.navigationBar.topItem.rightBarButtonItem = null;
-		const owner = this._owner.get();
-		if (owner) {
-			owner._onViewControllerShown(viewController);
-		}
-	}
-}
-
-function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripItem) {
-	let bgView = (<any>tabStripItem).bgView;
-	const index = tabStripItem._index;
-	const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length;
-	const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width);
-	if (!bgView) {
-		bgView = UIView.alloc().initWithFrame(frame);
-		tabStrip.nativeView.insertSubviewAtIndex(bgView, 0);
-		(<any>tabStripItem).bgView = bgView;
-	} else {
-		bgView.frame = frame;
-	}
-
-	const backgroundColor = tabStripItem.style.backgroundColor;
-	bgView.backgroundColor = backgroundColor instanceof Color ? backgroundColor.ios : backgroundColor;
-}
-
-function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UITabBarItem, controller: UIViewController) {
-	if (!tabStripItem || !tabBarItem) {
-		return;
-	}
-
-	// For iOS <11 icon is *always* above the text.
-	// For iOS 11 icon is above the text *only* on phones in portrait mode.
-	const orientation = controller.interfaceOrientation;
-	const isPortrait = orientation !== UIInterfaceOrientation.LandscapeLeft && orientation !== UIInterfaceOrientation.LandscapeRight;
-	const isIconAboveTitle = majorVersion < 11 || (isPhone && isPortrait);
-
-	if (!tabStripItem.iconSource) {
-		if (isIconAboveTitle) {
-			tabBarItem.titlePositionAdjustment = {
-				horizontal: 0,
-				vertical: -20,
-			};
-		} else {
-			tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 };
-		}
-	}
-
-	if (!tabStripItem.title) {
-		if (isIconAboveTitle) {
-			tabBarItem.imageInsets = new UIEdgeInsets({
-				top: 6,
-				left: 0,
-				bottom: -6,
-				right: 0,
-			});
-		} else {
-			tabBarItem.imageInsets = new UIEdgeInsets({
-				top: 0,
-				left: 0,
-				bottom: 0,
-				right: 0,
-			});
-		}
-	}
-}
-
-@CSSType('BottomNavigation')
-export class BottomNavigation extends TabNavigationBase {
-	public viewController: UITabBarControllerImpl;
-	public items: TabContentItem[];
-	public _ios: UITabBarControllerImpl;
-	private _delegate: UITabBarControllerDelegateImpl;
-	private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
-	private _iconsCache = {};
-	private _selectedItemColor: Color;
-	private _unSelectedItemColor: Color;
-
-	constructor() {
-		super();
-
-		this.viewController = this._ios = UITabBarControllerImpl.initWithOwner(new WeakRef(this));
-		this.nativeViewProtected = this._ios.view;
-	}
-
-	initNativeView() {
-		super.initNativeView();
-		this._delegate = UITabBarControllerDelegateImpl.initWithOwner(new WeakRef(this));
-		this._moreNavigationControllerDelegate = UINavigationControllerDelegateImpl.initWithOwner(new WeakRef(this));
-		if (!this.tabStrip) {
-			this.viewController.tabBar.hidden = true;
-		}
-	}
-
-	disposeNativeView() {
-		this._delegate = null;
-		this._moreNavigationControllerDelegate = null;
-		super.disposeNativeView();
-	}
-
-	// TODO
-	// @profile
-	public onLoaded() {
-		super.onLoaded();
-
-		this.setViewControllers(this.items);
-
-		const selectedIndex = this.selectedIndex;
-		const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
-		if (selectedView instanceof Frame) {
-			selectedView._pushInFrameStackRecursive();
-		}
-
-		this._ios.delegate = this._delegate;
-	}
-
-	public onUnloaded() {
-		this._ios.delegate = null;
-		this._ios.moreNavigationController.delegate = null;
-		super.onUnloaded();
-	}
-
-	// @ts-ignore
-	get ios(): UITabBarController {
-		return this._ios;
-	}
-
-	public layoutNativeView(left: number, top: number, right: number, bottom: number): void {
-		//
-	}
-
-	public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
-		//
-	}
-
-	public onSelectedIndexChanged(oldIndex: number, newIndex: number): void {
-		const items = this.items;
-		if (!items) {
-			return;
-		}
-
-		const oldItem = items[oldIndex];
-		if (oldItem) {
-			oldItem.canBeLoaded = false;
-			oldItem.unloadView(oldItem.content);
-		}
-
-		const newItem = items[newIndex];
-		if (newItem && this.isLoaded) {
-			const selectedView = items[newIndex].content;
-			if (selectedView instanceof Frame) {
-				selectedView._pushInFrameStackRecursive();
-			}
-
-			newItem.canBeLoaded = true;
-			newItem.loadView(newItem.content);
-		}
-
-		const tabStripItems = this.tabStrip && this.tabStrip.items;
-		if (tabStripItems) {
-			if (tabStripItems[newIndex]) {
-				tabStripItems[newIndex]._emit(TabStripItem.selectEvent);
-			}
-
-			if (tabStripItems[oldIndex]) {
-				tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent);
-			}
-		}
-
-		super.onSelectedIndexChanged(oldIndex, newIndex);
-	}
-
-	public getTabBarBackgroundColor(): UIColor {
-		return this._ios.tabBar.barTintColor;
-	}
-
-	public setTabBarBackgroundColor(value: UIColor | Color): void {
-		this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
-		this.updateAllItemsColors();
-	}
-
-	public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
-		tabStripItem.nativeView.title = value;
-	}
-
-	public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		if (!this.tabStrip || !tabStripItem) {
-			return;
-		}
-
-		updateBackgroundPositions(this.tabStrip, tabStripItem);
-	}
-
-	public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
-	}
-
-	private setItemColors(): void {
-		if (this._selectedItemColor) {
-			this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor.ios;
-		}
-		if (this._unSelectedItemColor) {
-			this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
-		}
-	}
-
-	private setIconColor(tabStripItem: TabStripItem, forceReload = false): void {
-		if (forceReload || (!this._unSelectedItemColor && !this._selectedItemColor)) {
-			// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
-			const tabStripColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
-
-			const image = this.getIcon(tabStripItem, tabStripColor);
-
-			tabStripItem.nativeView.image = image;
-			tabStripItem.nativeView.selectedImage = image;
-		}
-	}
-
-	public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		this.setIconColor(tabStripItem);
-	}
-
-	public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		this.updateItemColors(tabStripItem);
-	}
-
-	public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
-		this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
-	}
-
-	public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: Enums.TextTransformType): void {
-		tabStripItem.nativeView.title = getTransformedText(tabStripItem.label.text, value);
-	}
-
-	public getTabBarHighlightColor(): UIColor {
-		return this._ios.tabBar.tintColor;
-	}
-
-	public setTabBarHighlightColor(value: UIColor | Color) {
-		this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
-	}
-
-	public getTabBarSelectedItemColor(): Color {
-		return this._selectedItemColor;
-	}
-
-	public setTabBarSelectedItemColor(value: Color) {
-		this._selectedItemColor = value;
-		this.updateAllItemsColors();
-	}
-
-	public getTabBarUnSelectedItemColor(): Color {
-		return this._unSelectedItemColor;
-	}
-
-	public setTabBarUnSelectedItemColor(value: Color) {
-		this._unSelectedItemColor = value;
-		this.updateAllItemsColors();
-	}
-
-	public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-		const width = layout.getMeasureSpecSize(widthMeasureSpec);
-		const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
-
-		const height = layout.getMeasureSpecSize(heightMeasureSpec);
-		const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
-
-		const widthAndState = View.resolveSizeAndState(width, width, widthMode, 0);
-		const heightAndState = View.resolveSizeAndState(height, height, heightMode, 0);
-
-		this.setMeasuredDimension(widthAndState, heightAndState);
-	}
-
-	public _onViewControllerShown(viewController: UIViewController) {
-		// This method could be called with the moreNavigationController or its list controller, so we have to check.
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView._onViewControllerShown(" + viewController + ");", Trace.categories.Debug);
-		// }
-		if (this._ios.viewControllers && this._ios.viewControllers.containsObject(viewController)) {
-			this.selectedIndex = this._ios.viewControllers.indexOfObject(viewController);
-		} else {
-			// TODO
-			// if (Trace.isEnabled()) {
-			//     Trace.write("TabView._onViewControllerShown: viewController is not one of our viewControllers", Trace.categories.Debug);
-			// }
-		}
-	}
-
-	private _actionBarHiddenByTabView: boolean;
-	public _handleTwoNavigationBars(backToMoreWillBeVisible: boolean) {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write(`TabView._handleTwoNavigationBars(backToMoreWillBeVisible: ${backToMoreWillBeVisible})`, Trace.categories.Debug);
-		// }
-
-		// The "< Back" and "< More" navigation bars should not be visible simultaneously.
-		const page = this.page || (<any>this)._selectedView.page || (<any>this)._selectedView.currentPage;
-		if (!page || !page.frame) {
-			return;
-		}
-
-		const actionBarVisible = page.frame._getNavBarVisible(page);
-
-		if (backToMoreWillBeVisible && actionBarVisible) {
-			page.frame.ios._disableNavBarAnimation = true;
-			page.actionBarHidden = true;
-			page.frame.ios._disableNavBarAnimation = false;
-			this._actionBarHiddenByTabView = true;
-
-			// TODO
-			// if (Trace.isEnabled()) {
-			//     Trace.write(`TabView hid action bar`, Trace.categories.Debug);
-			// }
-			return;
-		}
-
-		if (!backToMoreWillBeVisible && this._actionBarHiddenByTabView) {
-			page.frame.ios._disableNavBarAnimation = true;
-			page.actionBarHidden = false;
-			page.frame.ios._disableNavBarAnimation = false;
-			this._actionBarHiddenByTabView = undefined;
-
-			// TODO
-			// if (Trace.isEnabled()) {
-			//     Trace.write(`TabView restored action bar`, Trace.categories.Debug);
-			// }
-			return;
-		}
-	}
-
-	private getViewController(item: TabContentItem): UIViewController {
-		let newController: UIViewController = item.content ? item.content.viewController : null;
-
-		if (newController) {
-			(<any>item).setViewController(newController, newController.view);
-
-			return newController;
-		}
-
-		if (item.content.ios instanceof UIViewController) {
-			newController = item.content.ios;
-			(<any>item).setViewController(newController, newController.view);
-		} else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
-			newController = item.content.ios.controller;
-			(<any>item).setViewController(newController, newController.view);
-		} else {
-			newController = IOSHelper.UILayoutViewController.initWithOwner(new WeakRef(item.content)) as UIViewController;
-			newController.view.addSubview(item.content.nativeViewProtected);
-			item.content.viewController = newController;
-			(<any>item).setViewController(newController, item.content.nativeViewProtected);
-		}
-
-		return newController;
-	}
-
-	private setViewControllers(items: TabContentItem[]) {
-		const length = items ? items.length : 0;
-		if (length === 0) {
-			this._ios.viewControllers = null;
-
-			return;
-		}
-
-		// Limit both tabContentItems and tabStripItems to 5 in order to prevent iOS 'more' button
-		items = items.slice(0, maxTabsCount);
-
-		const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
-
-		if (this.tabStrip) {
-			this.tabStrip.setNativeView(this._ios.tabBar);
-		}
-
-		items.forEach((item, i) => {
-			const controller = this.getViewController(item);
-
-			if (this.tabStrip && this.tabStrip.items && this.tabStrip.items[i]) {
-				const tabStripItem = <TabStripItem>this.tabStrip.items[i];
-				const tabBarItem = this.createTabBarItem(tabStripItem, i);
-				updateTitleAndIconPositions(tabStripItem, tabBarItem, controller);
-
-				this.setViewAttributes(tabBarItem, tabStripItem.label);
-
-				controller.tabBarItem = tabBarItem;
-				tabStripItem._index = i;
-				tabStripItem.setNativeView(tabBarItem);
-			}
-
-			controllers.addObject(controller);
-		});
-
-		this.setItemImages();
-
-		this._ios.viewControllers = controllers;
-		this._ios.customizableViewControllers = null;
-
-		// When we set this._ios.viewControllers, someone is clearing the moreNavigationController.delegate, so we have to reassign it each time here.
-		this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate;
-	}
-
-	private setItemImages() {
-		if (this._selectedItemColor || this._unSelectedItemColor) {
-			if (this.tabStrip && this.tabStrip.items) {
-				this.tabStrip.items.forEach((item) => {
-					if (this._unSelectedItemColor && item.nativeView) {
-						item.nativeView.image = this.getIcon(item, this._unSelectedItemColor);
-						item.nativeView.tintColor = this._unSelectedItemColor;
-					}
-					if (this._selectedItemColor && item.nativeView) {
-						item.nativeView.selectedImage = this.getIcon(item, this._selectedItemColor);
-						item.nativeView.tintColor = this._selectedItemColor;
-					}
-				});
-			}
-		}
-	}
-
-	public updateAllItemsColors() {
-		this.setItemColors();
-		if (this.tabStrip && this.tabStrip.items) {
-			this.tabStrip.items.forEach((tabStripItem) => {
-				this.updateItemColors(tabStripItem);
-			});
-		}
-	}
-
-	private updateItemColors(tabStripItem: TabStripItem): void {
-		updateBackgroundPositions(this.tabStrip, tabStripItem);
-		this.setIconColor(tabStripItem, true);
-	}
-
-	private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
-		let image: UIImage;
-		let title: string;
-
-		if (item.isLoaded) {
-			image = this.getIcon(item);
-			title = item.label.text;
-
-			const textTransform = item.label.style.textTransform;
-			if (textTransform) {
-				title = getTransformedText(title, textTransform);
-			}
-		}
-
-		return UITabBarItem.alloc().initWithTitleImageTag(title, image, index);
-	}
-
-	private getIconRenderingMode(): UIImageRenderingMode {
-		switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
-			case 'alwaysOriginal':
-				return UIImageRenderingMode.AlwaysOriginal;
-			case 'alwaysTemplate':
-				return UIImageRenderingMode.AlwaysTemplate;
-			case 'automatic':
-			default:
-				return UIImageRenderingMode.Automatic;
-		}
-	}
-
-	private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage {
-		// Image and Label children of TabStripItem
-		// take priority over its `iconSource` and `title` properties
-		const iconSource = tabStripItem.image && tabStripItem.image.src;
-		if (!iconSource) {
-			return null;
-		}
-
-		const target = tabStripItem.image;
-		const font = target.style.fontInternal || Font.default;
-		if (!color) {
-			color = target.style.color;
-		}
-		const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(';');
-
-		let isFontIcon = false;
-		let image: UIImage = this._iconsCache[iconTag];
-		if (!image) {
-			let is;
-			if (isFontIconURI(iconSource)) {
-				isFontIcon = true;
-				const fontIconCode = iconSource.split('//')[1];
-				is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
-			} else {
-				is = ImageSource.fromFileOrResourceSync(iconSource);
-			}
-
-			if (is && is.ios) {
-				image = is.ios;
-
-				if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
-					image = this.getFixedSizeIcon(image);
-				}
-
-				let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysOriginal;
-				if (!isFontIcon) {
-					renderingMode = this.getIconRenderingMode();
-				}
-				const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
-				this._iconsCache[iconTag] = originalRenderedImage;
-				image = originalRenderedImage;
-			} else {
-				// TODO
-				// traceMissingIcon(iconSource);
-			}
-		}
-
-		return image;
-	}
-
-	private getFixedSizeIcon(image: UIImage): UIImage {
-		const inWidth = image.size.width;
-		const inHeight = image.size.height;
-
-		const iconSpecSize = getIconSpecSize({
-			width: inWidth,
-			height: inHeight,
-		});
-
-		const widthPts = iconSpecSize.width;
-		const heightPts = iconSpecSize.height;
-
-		UIGraphicsBeginImageContextWithOptions({ width: widthPts, height: heightPts }, false, layout.getDisplayDensity());
-		image.drawInRect(CGRectMake(0, 0, widthPts, heightPts));
-		const resultImage = UIGraphicsGetImageFromCurrentImageContext();
-		UIGraphicsEndImageContext();
-
-		return resultImage;
-	}
-
-	// private _updateIOSTabBarColorsAndFonts(): void {
-	//     if (!this.tabStrip || !this.tabStrip.items || !this.tabStrip.items.length) {
-	//         return;
-	//     }
-
-	//     const tabBar = <UITabBar>this.ios.tabBar;
-	//     const states = getTitleAttributesForStates(this);
-	//     for (let i = 0; i < tabBar.items.count; i++) {
-	//         applyStatesToItem(tabBar.items[i], states);
-	//     }
-	// }
-
-	// TODO: Move this to TabStripItem
-	// [fontInternalProperty.getDefault](): Font {
-	//     return null;
-	// }
-	// [fontInternalProperty.setNative](value: Font) {
-	//     this._updateIOSTabBarColorsAndFonts();
-	// }
-
-	[selectedIndexProperty.setNative](value: number): void {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", Trace.categories.Debug);
-		// }
-
-		if (value > -1) {
-			(<any>this._ios)._willSelectViewController = this._ios.viewControllers[value];
-			this._ios.selectedIndex = value;
-		}
-	}
-
-	[itemsProperty.getDefault](): TabContentItem[] {
-		return null;
-	}
-	[itemsProperty.setNative](value: TabContentItem[]): void {
-		if (value) {
-			value.forEach((item: TabContentItem, i) => {
-				(<any>item).index = i;
-			});
-		}
-
-		this.setViewControllers(value);
-		selectedIndexProperty.coerce(this);
-	}
-
-	[tabStripProperty.getDefault](): TabStrip {
-		return null;
-	}
-
-	[tabStripProperty.setNative](value: TabStrip): void {
-		this.setViewControllers(this.items);
-		selectedIndexProperty.coerce(this);
-	}
-
-	private setViewAttributes(item: UITabBarItem, view: View): any {
-		if (!view) {
-			return null;
-		}
-
-		const defaultTabItemFontSize = 10;
-		const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize;
-		const font: UIFont = (view.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
-		const tabItemTextColor = view.style.color;
-		const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
-		const attributes: any = { [NSFontAttributeName]: font };
-
-		// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
-		if (!this._selectedItemColor && !this._unSelectedItemColor) {
-			if (textColor) {
-				attributes[UITextAttributeTextColor] = textColor;
-				attributes[NSForegroundColorAttributeName] = textColor;
-			}
-		} else {
-			this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor && this._unSelectedItemColor.ios;
-			this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor && this._selectedItemColor.ios;
-		}
-
-		item.setTitleTextAttributesForState(attributes, UIControlState.Selected);
-		item.setTitleTextAttributesForState(attributes, UIControlState.Normal);
-
-		// there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip
-		// https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor
-		// to fix the above issue we are applying the selected fix only for the case, when there is no background set
-		// in that case we have the following known issue:
-		// // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items
-		if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && majorVersion > 9) {
-			this.viewController.tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor];
-		}
-	}
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-content-item/index.android.ts b/packages/core/ui/tab-navigation-base/tab-content-item/index.android.ts
deleted file mode 100644
index eadf6a585..000000000
--- a/packages/core/ui/tab-navigation-base/tab-content-item/index.android.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-// Types
-import { TabContentItem as TabContentItemDefinition } from '.';
-import { TabNavigationBase } from '../tab-navigation-base';
-import { GridLayout } from '../../layouts/grid-layout';
-
-// Requires
-import { TabContentItemBase, traceCategory } from './tab-content-item-common';
-import { View } from '../../core/view';
-import { Trace } from '../../../trace';
-
-export * from './tab-content-item-common';
-
-export class TabContentItem extends TabContentItemBase {
-	public nativeViewProtected: org.nativescript.widgets.GridLayout;
-	public tabItemSpec: org.nativescript.widgets.TabItemSpec;
-	public index: number;
-
-	get _hasFragments(): boolean {
-		return true;
-	}
-
-	public createNativeView() {
-		const layout = new org.nativescript.widgets.GridLayout(this._context);
-		layout.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
-
-		return layout;
-	}
-
-	public initNativeView(): void {
-		super.initNativeView();
-	}
-
-	public _addViewToNativeVisualTree(child: View, atIndex?: number): boolean {
-		// Set the row property for the child
-		if (this.nativeViewProtected && child.nativeViewProtected) {
-			GridLayout.setRow(child, 0);
-		}
-
-		return super._addViewToNativeVisualTree(child, atIndex);
-	}
-
-	public disposeNativeView(): void {
-		super.disposeNativeView();
-		(<TabContentItemDefinition>this).canBeLoaded = false;
-	}
-
-	public _getChildFragmentManager(): androidx.fragment.app.FragmentManager {
-		const tabView = <TabNavigationBase>this.parent;
-		let tabFragment = null;
-		const fragmentManager = tabView._getFragmentManager();
-
-		if (typeof this.index === 'undefined') {
-			Trace.write(`Current TabContentItem index is not set`, traceCategory, Trace.messageType.error);
-		}
-
-		const fragments = fragmentManager.getFragments().toArray();
-		for (let i = 0; i < fragments.length; i++) {
-			if (fragments[i].index === this.index) {
-				tabFragment = fragments[i];
-				break;
-			}
-		}
-
-		// TODO: can happen in a modal tabview scenario when the modal dialog fragment is already removed
-		if (!tabFragment) {
-			// if (Trace.isEnabled()) {
-			//     Trace.write(`Could not get child fragment manager for tab item with index ${this.index}`, traceCategory);
-			// }
-
-			// TODO: fix d.ts in view module
-			return (<any>tabView)._getRootFragmentManager();
-		}
-
-		return tabFragment.getChildFragmentManager();
-	}
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-content-item/index.d.ts b/packages/core/ui/tab-navigation-base/tab-content-item/index.d.ts
deleted file mode 100644
index 202e3ef10..000000000
--- a/packages/core/ui/tab-navigation-base/tab-content-item/index.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ContentView } from '../../content-view';
-
-/**
- * Represents a tab navigation content entry.
- */
-export class TabContentItem extends ContentView {
-	/**
-	 * @private
-	 */
-	canBeLoaded?: boolean;
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-content-item/index.ios.ts b/packages/core/ui/tab-navigation-base/tab-content-item/index.ios.ts
deleted file mode 100644
index 01838e03c..000000000
--- a/packages/core/ui/tab-navigation-base/tab-content-item/index.ios.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Requires
-import { TabContentItemBase } from './tab-content-item-common';
-
-export * from './tab-content-item-common';
-
-export class TabContentItem extends TabContentItemBase {
-	// tslint:disable-next-line
-	private __controller: UIViewController;
-
-	public setViewController(controller: UIViewController, nativeView: UIView) {
-		this.__controller = controller;
-		this.setNativeView(nativeView);
-	}
-
-	public disposeNativeView() {
-		this.__controller = undefined;
-		this.setNativeView(undefined);
-	}
-
-	// TODO: Handle this for BOTTOM NAVIGATION with canBeLoaded in tab-cotent-item-common
-	// public loadView(view: ViewBase): void {
-	//     const tabView = this.parent as TabNavigationBase;
-	//     if (tabView && tabView.items) {
-	//         const index = tabView.items.indexOf(this);
-
-	//         // if (index === tabView.selectedIndex) {
-	//         //     super.loadView(view);
-	//         // }
-	//         super.loadView(view);
-	//     }
-	// }
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-content-item/tab-content-item-common.ts b/packages/core/ui/tab-navigation-base/tab-content-item/tab-content-item-common.ts
deleted file mode 100644
index fb6fd0839..000000000
--- a/packages/core/ui/tab-navigation-base/tab-content-item/tab-content-item-common.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// Types
-import { TabContentItem as TabContentItemDefinition } from '.';
-import { AddChildFromBuilder } from '../../core/view';
-import { TabNavigationBase } from '../tab-navigation-base';
-
-// Requires
-import { View, CSSType } from '../../core/view';
-import { ViewBase } from '../../core/view-base';
-import { ContentView } from '../../content-view';
-export const traceCategory = 'TabView';
-
-@CSSType('TabContentItem')
-export abstract class TabContentItemBase extends ContentView implements TabContentItemDefinition, AddChildFromBuilder {
-	public eachChild(callback: (child: View) => boolean) {
-		if (this.content) {
-			callback(this.content);
-		}
-	}
-
-	public loadView(view: ViewBase): void {
-		const tabView = <TabNavigationBase>this.parent;
-		if (tabView && tabView.items) {
-			// Don't load items until their fragments are instantiated.
-			if ((<TabContentItemDefinition>this).canBeLoaded) {
-				super.loadView(view);
-			}
-		}
-	}
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-navigation-base/index.d.ts b/packages/core/ui/tab-navigation-base/tab-navigation-base/index.d.ts
deleted file mode 100644
index 20475c072..000000000
--- a/packages/core/ui/tab-navigation-base/tab-navigation-base/index.d.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-import { View, AddArrayFromBuilder, AddChildFromBuilder } from '../../core/view';
-import { TabStrip } from '../tab-strip';
-import { TabStripItem } from '../tab-strip-item';
-import { TabContentItem } from '../tab-content-item';
-import { Property, CoercibleProperty } from '../../core/properties';
-import { EventData } from '../../../data/observable';
-import { Color } from '../../../color';
-/**
- * Defines the data for the tab navigation selectedIndexChanged event.
- */
-export interface SelectedIndexChangedEventData extends EventData {
-	/**
-	 * The old selected index.
-	 */
-	oldIndex: number;
-
-	/**
-	 * The new selected index.
-	 */
-	newIndex: number;
-}
-
-/**
- * Serves as a base class for tab navigation.
- */
-export class TabNavigationBase extends View {
-	/**
-	 * Gets or sets the items of the tab navigation.
-	 */
-	items: Array<TabContentItem>;
-
-	/**
-	 * Gets or sets the tab strip of the tab navigation.
-	 */
-	tabStrip: TabStrip;
-
-	/**
-	 * Gets or sets the selectedIndex of the tab navigation.
-	 */
-	selectedIndex: number;
-
-	/**
-	 * Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
-	 */
-	android: any /* android.view.View */; //android.support.v4.view.ViewPager;
-
-	/**
-	 * Gets the native iOS widget that represents the user interface for this component. Valid only when running on iOS.
-	 */
-	ios: any /* UITabBarController */;
-
-	/**
-	 * String value used when hooking to the selectedIndexChanged event.
-	 */
-	public static selectedIndexChangedEvent: string;
-
-	/**
-	 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-	 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
-	 * @param callback - Callback function which will be executed when event is raised.
-	 * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
-	 */
-	on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
-
-	/**
-	 * Raised when the selected index changes.
-	 */
-	on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	onItemsChanged(oldItems: TabContentItem[], newItems: TabContentItem[]): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	onSelectedIndexChanged(oldIndex: number, newIndex: number): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarBackgroundColor(): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarBackgroundArgbColor(): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarBackgroundColor(value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarColor(): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarColor(value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarFontInternal(): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarFontInternal(value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarTextTransform(): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarTextTransform(value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarHighlightColor(): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarHighlightColor(value: any);
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarSelectedItemColor(): Color;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarSelectedItemColor(value: Color);
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarUnSelectedItemColor(): Color;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarUnSelectedItemColor(value: Color);
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarItemTitle(tabStripItem: TabStripItem, value: any): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarItemBackgroundColor(tabStripItem: TabStripItem): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarItemColor(tabStripItem: TabStripItem): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarItemColor(tabStripItem: TabStripItem, value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarIconColor(tabStripItem: TabStripItem, value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarIconSource(tabStripItem: TabStripItem, value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarItemFontSize(tabStripItem: TabStripItem): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarItemFontSize(tabStripItem: TabStripItem, value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarItemFontInternal(tabStripItem: TabStripItem): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarItemFontInternal(tabStripItem: TabStripItem, value: any): void;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	getTabBarItemTextTransform(tabStripItem: TabStripItem): any;
-
-	/**
-	 * @private
-	 * Method is intended to be overridden by inheritors and used as "protected"
-	 */
-	setTabBarItemTextTransform(tabStripItem: TabStripItem, value: any): void;
-}
-
-export function getIconSpecSize(size: { width: number; height: number }): { width: number; height: number };
-
-export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>;
-export const tabStripProperty: Property<TabNavigationBase, TabStrip>;
-export const selectedIndexProperty: CoercibleProperty<TabNavigationBase, number>;
diff --git a/packages/core/ui/tab-navigation-base/tab-navigation-base/index.ts b/packages/core/ui/tab-navigation-base/tab-navigation-base/index.ts
deleted file mode 100644
index 286a2892d..000000000
--- a/packages/core/ui/tab-navigation-base/tab-navigation-base/index.ts
+++ /dev/null
@@ -1,334 +0,0 @@
-// Types
-import { TabNavigationBase as TabNavigationBaseDefinition } from '.';
-import { TabStripItem } from '../tab-strip-item';
-import { View, AddArrayFromBuilder, AddChildFromBuilder } from '../../core/view';
-
-// Requires
-import { Color } from '../../../color';
-import { ViewBase } from '../../core/view-base';
-import { Property, CoercibleProperty } from '../../core/properties';
-import { EventData } from '../../../data/observable';
-import { TabContentItem } from '../tab-content-item';
-import { TabStrip } from '../tab-strip';
-
-// TODO: Impl trace
-// export const traceCategory = "TabView";
-
-/**
- * Defines the data for the tab navigation selectedIndexChanged event.
- */
-export interface SelectedIndexChangedEventData extends EventData {
-	/**
-	 * The old selected index.
-	 */
-	oldIndex: number;
-
-	/**
-	 * The new selected index.
-	 */
-	newIndex: number;
-}
-
-export class TabNavigationBase extends View implements TabNavigationBaseDefinition, AddChildFromBuilder, AddArrayFromBuilder {
-	public static selectedIndexChangedEvent = 'selectedIndexChanged';
-
-	public items: TabContentItem[];
-	public tabStrip: TabStrip;
-	public selectedIndex: number;
-
-	public _addArrayFromBuilder(name: string, value: Array<any>) {
-		if (name === 'items') {
-			this.items = value;
-		}
-	}
-
-	public _addChildFromBuilder(name: string, value: any): void {
-		if (value instanceof TabContentItem) {
-			if (!this.items) {
-				this.items = new Array<TabContentItem>();
-			}
-			this.items.push(<TabContentItem>value);
-			this._addView(value);
-			// selectedIndexProperty.coerce(this);
-		} else if (value instanceof TabStrip) {
-			// Setting tabStrip will trigger onTabStripChanged
-			this.tabStrip = value;
-		}
-	}
-
-	get _selectedView(): View {
-		const selectedIndex = this.selectedIndex;
-
-		return selectedIndex > -1 ? this.items[selectedIndex].content : null;
-	}
-
-	get _childrenCount(): number {
-		const items = this.items;
-
-		return items ? items.length : 0;
-	}
-
-	public eachChild(callback: (child: ViewBase) => boolean) {
-		const items = this.items;
-		if (items) {
-			items.forEach((item, i) => {
-				callback(item);
-			});
-		}
-
-		const tabStrip = this.tabStrip;
-		if (tabStrip) {
-			callback(tabStrip);
-		}
-	}
-
-	public eachChildView(callback: (child: View) => boolean) {
-		const items = this.items;
-		if (items) {
-			items.forEach((item, i) => {
-				callback(item.content);
-			});
-		}
-	}
-
-	public onItemsChanged(oldItems: TabContentItem[], newItems: TabContentItem[]): void {
-		if (oldItems) {
-			oldItems.forEach((item) => this._removeView(item));
-		}
-
-		if (newItems) {
-			newItems.forEach((item) => {
-				if (!item.content) {
-					throw new Error(`TabContentItem must have a content (view).`);
-				}
-
-				this._addView(item);
-			});
-		}
-	}
-
-	public onTabStripChanged(oldTabStrip: TabStrip, newTabStrip: TabStrip) {
-		if (oldTabStrip && oldTabStrip.parent) {
-			this._removeView(oldTabStrip);
-		}
-
-		if (newTabStrip) {
-			this._addView(newTabStrip);
-		}
-	}
-
-	public onSelectedIndexChanged(oldIndex: number, newIndex: number): void {
-		// to be overridden in platform specific files
-		this.notify(<SelectedIndexChangedEventData>{
-			eventName: TabNavigationBase.selectedIndexChangedEvent,
-			object: this,
-			oldIndex,
-			newIndex,
-		});
-	}
-
-	public getTabBarBackgroundColor(): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public getTabBarBackgroundArgbColor(): any {
-		// This method is implemented only for Android
-		const colorDrawable = this.getTabBarBackgroundColor();
-
-		return colorDrawable && colorDrawable.getColor && colorDrawable.getColor();
-	}
-
-	public setTabBarBackgroundColor(value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarFontInternal(): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarFontInternal(value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarTextTransform(): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarTextTransform(value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarHighlightColor(): any {
-		// overridden by inheritors
-	}
-
-	public setTabBarHighlightColor(value: any) {
-		// overridden by inheritors
-	}
-
-	public getTabBarSelectedItemColor(): Color {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarSelectedItemColor(value: Color) {
-		// overridden by inheritors
-	}
-
-	public getTabBarUnSelectedItemColor(): Color {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarUnSelectedItemColor(value: Color) {
-		// overridden by inheritors
-	}
-
-	public getTabBarColor(): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarColor(value: any): void {
-		// overridden by inheritors
-	}
-
-	public setTabBarItemTitle(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarItemBackgroundColor(tabStripItem: TabStripItem): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarItemColor(tabStripItem: TabStripItem): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarItemColor(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public setTabBarIconColor(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public setTabBarIconSource(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarItemFontSize(tabStripItem: TabStripItem): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarItemFontSize(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarItemFontInternal(tabStripItem: TabStripItem): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-
-	public getTabBarItemTextTransform(tabStripItem: TabStripItem): any {
-		// overridden by inheritors
-		return null;
-	}
-
-	public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: any): void {
-		// overridden by inheritors
-	}
-}
-
-export interface TabNavigationBase {
-	on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
-	on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
-}
-
-const MIN_ICON_SIZE = 24;
-const MAX_ICON_WIDTH = 31;
-const MAX_ICON_HEIGHT = 28;
-
-export function getIconSpecSize(size: { width: number; height: number }): { width: number; height: number } {
-	const inWidth = size.width;
-	const inHeight = size.height;
-	let outWidth = 0;
-	let outHeight = 0;
-
-	if (inWidth < inHeight) {
-		outWidth = MIN_ICON_SIZE;
-		outHeight = (inHeight * MIN_ICON_SIZE) / inWidth;
-		if (outHeight > MAX_ICON_HEIGHT) {
-			outHeight = MAX_ICON_HEIGHT;
-			outWidth = (inWidth * MAX_ICON_HEIGHT) / inHeight;
-		}
-	} else {
-		outHeight = MIN_ICON_SIZE;
-		outWidth = (inWidth * MIN_ICON_SIZE) / inHeight;
-		if (outWidth > MAX_ICON_WIDTH) {
-			outWidth = MAX_ICON_WIDTH;
-			outHeight = (inHeight * MAX_ICON_WIDTH) / inWidth;
-		}
-	}
-
-	return { width: outWidth, height: outHeight };
-}
-
-export const selectedIndexProperty = new CoercibleProperty<TabNavigationBase, number>({
-	name: 'selectedIndex',
-	defaultValue: -1,
-	affectsLayout: global.isIOS,
-	valueChanged: (target, oldValue, newValue) => {
-		target.onSelectedIndexChanged(oldValue, newValue);
-	},
-	coerceValue: (target, value) => {
-		const items = target.items;
-		if (items) {
-			const max = items.length - 1;
-			if (value < 0) {
-				value = 0;
-			}
-			if (value > max) {
-				value = max;
-			}
-		} else {
-			value = -1;
-		}
-
-		return value;
-	},
-	valueConverter: (v) => parseInt(v),
-});
-selectedIndexProperty.register(TabNavigationBase);
-
-export const _tabs = new Array<WeakRef<TabNavigationBase>>();
-
-export const itemsProperty = new Property<TabNavigationBase, TabContentItem[]>({
-	name: 'items',
-	valueChanged: (target, oldValue, newValue) => {
-		target.onItemsChanged(oldValue, newValue);
-	},
-});
-itemsProperty.register(TabNavigationBase);
-
-export const tabStripProperty = new Property<TabNavigationBase, TabStrip>({
-	name: 'tabStrip',
-	valueChanged: (target, oldValue, newValue) => {
-		target.onTabStripChanged(oldValue, newValue);
-	},
-});
-tabStripProperty.register(TabNavigationBase);
diff --git a/packages/core/ui/tab-navigation-base/tab-strip-item/index.d.ts b/packages/core/ui/tab-navigation-base/tab-strip-item/index.d.ts
deleted file mode 100644
index 51fe23c22..000000000
--- a/packages/core/ui/tab-navigation-base/tab-strip-item/index.d.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { View } from '../../core/view';
-import { Image } from '../../image';
-import { Label } from '../../label';
-import { EventData } from '../../../data/observable';
-
-/**
- * Represents a tab strip entry.
- */
-export class TabStripItem extends View {
-	/**
-	 * Gets or sets the title of the tab strip entry.
-	 */
-	title: string;
-
-	/**
-	 * Gets or sets the CSS class name of the icon in the tab strip entry.
-	 */
-	iconClass: string;
-
-	/**
-	 * Gets or sets the icon source of the tab strip entry.
-	 */
-	iconSource: string;
-
-	/**
-	 * Gets or sets the label of the tab strip entry.
-	 */
-	label: Label;
-
-	/**
-	 * Gets or sets the image of the tab strip entry.
-	 */
-	image: Image;
-
-	/**
-	 * String value used when hooking to the tap event.
-	 */
-	public static tapEvent: string;
-
-	//@private
-
-	/**
-	 * @private
-	 */
-	_index: number;
-
-	/**
-	 * @private
-	 */
-	static selectEvent: string;
-
-	/**
-	 * @private
-	 */
-	static unselectEvent: string;
-	//@endprivate
-
-	/**
-	 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-	 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
-	 * @param callback - Callback function which will be executed when event is raised.
-	 * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
-	 */
-	on(eventNames: string, callback: (data: EventData) => void);
-
-	/**
-	 * Raised when a tap event occurs.
-	 */
-	on(event: 'tap', callback: (args: EventData) => void);
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts b/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts
deleted file mode 100644
index 747125ced..000000000
--- a/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-// Types
-import { TabStripItem as TabStripItemDefinition } from '.';
-import { PropertyChangeData } from '../../../data/observable';
-import { TabNavigationBase } from '../tab-navigation-base';
-import { TabStrip } from '../tab-strip';
-import { Color } from '../../../color';
-import { AddChildFromBuilder, PseudoClassHandler } from '../../core/view';
-
-// Requires
-import { View, CSSType } from '../../core/view';
-import { ViewBase } from '../../core/view-base';
-import { backgroundColorProperty, backgroundInternalProperty } from '../../styling/style-properties';
-import { Image } from '../../image';
-import { Label } from '../../label';
-import { textTransformProperty } from '../../text-base';
-import { Enums } from '../../enums';
-
-@CSSType('TabStripItem')
-export class TabStripItem extends View implements TabStripItemDefinition, AddChildFromBuilder {
-	public static tapEvent = 'tap';
-	public static selectEvent = 'select';
-	public static unselectEvent = 'unselect';
-
-	public image: Image;
-	public label: Label;
-	public _index: number;
-
-	private _title: string;
-	private _iconSource: string;
-	private _iconClass: string;
-
-	private _highlightedHandler: () => void;
-	private _normalHandler: () => void;
-
-	private _labelColorHandler: (args: PropertyChangeData) => void;
-	private _labelFontHandler: (args: PropertyChangeData) => void;
-	private _labelTextTransformHandler: (args: PropertyChangeData) => void;
-	private _labelTextHandler: (args: PropertyChangeData) => void;
-
-	private _imageColorHandler: (args: PropertyChangeData) => void;
-	private _imageFontHandler: (args: PropertyChangeData) => void;
-	private _imageSrcHandler: (args: PropertyChangeData) => void;
-
-	get title(): string {
-		if (this.isLoaded) {
-			return this.label.text;
-		}
-
-		return this._title;
-	}
-
-	set title(value: string) {
-		this._title = value;
-
-		if (this.isLoaded) {
-			this.label.text = value;
-		}
-	}
-
-	get iconClass(): string {
-		if (this.isLoaded) {
-			return this.image.className;
-		}
-
-		return this._iconClass;
-	}
-
-	set iconClass(value: string) {
-		this._iconClass = value;
-
-		if (this.isLoaded) {
-			this.image.className = value;
-		}
-	}
-
-	get iconSource(): string {
-		if (this.isLoaded) {
-			return this.image.src;
-		}
-
-		return this._iconSource;
-	}
-
-	set iconSource(value: string) {
-		this._iconSource = value;
-
-		if (this.isLoaded) {
-			this.image.src = value;
-		}
-	}
-
-	public onLoaded() {
-		if (!this.image) {
-			const image = new Image();
-			image.src = this.iconSource;
-			image.className = this.iconClass;
-			this.image = image;
-			this._addView(this.image);
-		}
-
-		if (!this.label) {
-			const label = new Label();
-			label.text = this.title;
-			this.label = label;
-			this._addView(this.label);
-		}
-
-		super.onLoaded();
-
-		this._labelColorHandler =
-			this._labelColorHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarItemColor(this, args.value);
-			});
-		this.label.style.on('colorChange', this._labelColorHandler);
-
-		this._labelFontHandler =
-			this._labelFontHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarItemFontInternal(this, args.value);
-			});
-		this.label.style.on('fontInternalChange', this._labelFontHandler);
-
-		this._labelTextTransformHandler =
-			this._labelTextTransformHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarItemTextTransform(this, args.value);
-			});
-		this.label.style.on('textTransformChange', this._labelTextTransformHandler);
-
-		this._labelTextHandler =
-			this._labelTextHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarItemTitle(this, args.value);
-			});
-		this.label.on('textChange', this._labelTextHandler);
-
-		this._imageColorHandler =
-			this._imageColorHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarIconColor(this, args.value);
-			});
-		this.image.style.on('colorChange', this._imageColorHandler);
-
-		this._imageFontHandler =
-			this._imageFontHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarIconColor(this, args.value);
-			});
-		this.image.style.on('fontInternalChange', this._imageFontHandler);
-
-		this._imageSrcHandler =
-			this._imageSrcHandler ||
-			((args: PropertyChangeData) => {
-				const parent = <TabStrip>this.parent;
-				const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-				return tabStripParent && tabStripParent.setTabBarIconSource(this, args.value);
-			});
-		this.image.on('srcChange', this._imageSrcHandler);
-	}
-
-	public onUnloaded() {
-		super.onUnloaded();
-
-		this.label.style.off('colorChange', this._labelColorHandler);
-		this.label.style.off('fontInternalChange', this._labelFontHandler);
-		this.label.style.off('textTransformChange', this._labelTextTransformHandler);
-		this.label.style.off('textChange', this._labelTextHandler);
-
-		this.image.style.off('colorChange', this._imageColorHandler);
-		this.image.style.off('fontInternalChange', this._imageFontHandler);
-		this.image.style.off('srcChange', this._imageSrcHandler);
-	}
-
-	public eachChild(callback: (child: ViewBase) => boolean) {
-		if (this.label) {
-			callback(this.label);
-		}
-
-		if (this.image) {
-			callback(this.image);
-		}
-	}
-
-	public _addChildFromBuilder(name: string, value: any): void {
-		if (value instanceof Image) {
-			this.image = <Image>value;
-			this.iconSource = (<Image>value).src;
-			this.iconClass = (<Image>value).className;
-			this._addView(value);
-			// selectedIndexProperty.coerce(this);
-		}
-
-		if (value instanceof Label) {
-			this.label = <Label>value;
-			this.title = (<Label>value).text;
-			this._addView(value);
-			// selectedIndexProperty.coerce(this);
-		}
-	}
-
-	public requestLayout(): void {
-		// Default implementation for non View instances (like TabViewItem).
-		const parent = this.parent;
-		if (parent) {
-			parent.requestLayout();
-		}
-	}
-
-	@PseudoClassHandler('normal', 'highlighted', 'pressed', 'active')
-	_updateTabStateChangeHandler(subscribe: boolean) {
-		if (subscribe) {
-			this._highlightedHandler =
-				this._highlightedHandler ||
-				(() => {
-					this._goToVisualState('highlighted');
-				});
-
-			this._normalHandler =
-				this._normalHandler ||
-				(() => {
-					this._goToVisualState('normal');
-				});
-
-			this.on(TabStripItem.selectEvent, this._highlightedHandler);
-			this.on(TabStripItem.unselectEvent, this._normalHandler);
-
-			const parent = <TabStrip>this.parent;
-			const tabStripParent = parent && <TabNavigationBase>parent.parent;
-			if (this._index === tabStripParent.selectedIndex && !(global.isIOS && tabStripParent.cssType.toLowerCase() === 'tabs')) {
-				// HACK: tabStripParent instanceof Tabs creates a circular dependency
-				// HACK: tabStripParent.cssType === "Tabs" is a hacky workaround
-				this._goToVisualState('highlighted');
-			}
-		} else {
-			this.off(TabStripItem.selectEvent, this._highlightedHandler);
-			this.off(TabStripItem.unselectEvent, this._normalHandler);
-		}
-	}
-
-	[backgroundColorProperty.getDefault](): Color {
-		const parent = <TabStrip>this.parent;
-		const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-		return tabStripParent && tabStripParent.getTabBarBackgroundColor();
-	}
-	[backgroundColorProperty.setNative](value: Color) {
-		const parent = <TabStrip>this.parent;
-		const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-		return tabStripParent && tabStripParent.setTabBarItemBackgroundColor(this, value);
-	}
-
-	[textTransformProperty.getDefault](): Enums.TextTransformType {
-		const parent = <TabStrip>this.parent;
-		const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-		return tabStripParent && tabStripParent.getTabBarItemTextTransform(this);
-	}
-	[textTransformProperty.setNative](value: Enums.TextTransformType) {
-		const parent = <TabStrip>this.parent;
-		const tabStripParent = parent && <TabNavigationBase>parent.parent;
-
-		return tabStripParent && tabStripParent.setTabBarItemTextTransform(this, value);
-	}
-
-	[backgroundInternalProperty.getDefault](): any {
-		return null;
-	}
-	[backgroundInternalProperty.setNative](value: any) {
-		// disable the background CSS properties
-	}
-}
diff --git a/packages/core/ui/tab-navigation-base/tab-strip/index.d.ts b/packages/core/ui/tab-navigation-base/tab-strip/index.d.ts
deleted file mode 100644
index 0ada0f623..000000000
--- a/packages/core/ui/tab-navigation-base/tab-strip/index.d.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Color } from '../../../color';
-import { View } from '../../core/view';
-import { EventData } from '../../../data/observable';
-import { Property } from '../../core/properties';
-import { TabStripItem } from '../tab-strip-item';
-
-/**
- * Represents a tab strip.
- */
-export class TabStrip extends View {
-	/**
-	 * Gets or sets the items of the tab strip.
-	 */
-	items: Array<TabStripItem>;
-
-	/**
-	 * Gets or sets whether icon size should be fixed based on specs or use the actual size. Defaults to true(fixed).
-	 */
-	isIconSizeFixed: boolean;
-
-	/**
-	 * Gets or sets the icon rendering mode on iOS
-	 */
-	iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
-
-	/**
-	 * Gets or sets the color that marks the selected tab of the tab strip. Works for Tabs component only.
-	 */
-	highlightColor: Color;
-
-	/**
-	 * Gets or sets the color of the selected item in the tab strip.
-	 */
-	selectedItemColor: Color;
-
-	/**
-	 * Gets or sets the color of the non-selected items in the tab strip.
-	 */
-	unSelectedItemColor: Color;
-
-	/**
-	 * @private
-	 */
-	_hasImage: boolean;
-
-	/**
-	 * @private
-	 */
-	_hasTitle: boolean;
-
-	/**
-	 * String value used when hooking to itemTap event.
-	 */
-	public static itemTapEvent: string;
-
-	/**
-	 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-	 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
-	 * @param callback - Callback function which will be executed when event is raised.
-	 * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
-	 */
-	on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
-
-	/**
-	 * Raised when an TabStripItem is tapped.
-	 */
-	on(event: 'itemTap', callback: (args: TabStripItemEventData) => void, thisArg?: any);
-}
-
-/**
- * Event data containing information for the TabStripItem's index.
- */
-export interface TabStripItemEventData extends EventData {
-	/**
-	 * The index of the TabStripItem.
-	 */
-	index: number;
-}
-
-export const iosIconRenderingModeProperty: Property<TabStrip, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>;
-export const isIconSizeFixedProperty: Property<TabStrip, boolean>;
-export const selectedItemColorProperty: Property<TabStrip, Color>;
-export const unSelectedItemColorProperty: Property<TabStrip, Color>;
diff --git a/packages/core/ui/tab-navigation-base/tab-strip/index.ts b/packages/core/ui/tab-navigation-base/tab-strip/index.ts
deleted file mode 100644
index 51b07ad3d..000000000
--- a/packages/core/ui/tab-navigation-base/tab-strip/index.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-// Types
-import { Color } from '../../../color';
-import { AddArrayFromBuilder, AddChildFromBuilder } from '../../core/view';
-import { TabNavigationBase } from '../tab-navigation-base';
-import { TabStrip as TabStripDefinition } from './';
-
-// Requires
-import { CSSType, View } from '../../core/view';
-import { ViewBase, booleanConverter } from '../../core/view-base';
-import { Property, CoercibleProperty } from '../../core/properties';
-import { EventData } from '../../../data/observable';
-import { colorProperty, backgroundColorProperty, backgroundInternalProperty, fontInternalProperty } from '../../styling/style-properties';
-import { TabStripItem } from '../tab-strip-item';
-import { textTransformProperty } from '../../text-base';
-
-export const traceCategory = 'TabView';
-
-// Place this on top because the webpack ts-loader doesn't work when export
-// is after reference
-export const highlightColorProperty = new Property<TabStrip, Color>({
-	name: 'highlightColor',
-	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
-});
-export const selectedItemColorProperty = new Property<TabStrip, Color>({
-	name: 'selectedItemColor',
-	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
-});
-export const unSelectedItemColorProperty = new Property<TabStrip, Color>({
-	name: 'unSelectedItemColor',
-	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
-});
-
-/**
- * Event data containing information for the TabStripItem's index.
- */
-export interface TabStripItemEventData extends EventData {
-	/**
-	 * The index of the TabStripItem.
-	 */
-	index: number;
-}
-
-@CSSType('TabStrip')
-export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
-	public static itemTapEvent = 'itemTap';
-	public items: TabStripItem[];
-	public isIconSizeFixed: boolean;
-	public iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
-	public highlightColor: Color;
-	public selectedItemColor: Color;
-	public unSelectedItemColor: Color;
-	public _hasImage: boolean;
-	public _hasTitle: boolean;
-
-	public eachChild(callback: (child: ViewBase) => boolean) {
-		const items = this.items;
-		if (items) {
-			items.forEach((item, i) => {
-				callback(item);
-			});
-		}
-	}
-
-	public _addArrayFromBuilder(name: string, value: Array<any>) {
-		if (name === 'items') {
-			this.items = value;
-		}
-	}
-
-	public _addChildFromBuilder(name: string, value: any): void {
-		if (value instanceof TabStripItem) {
-			if (!this.items) {
-				this.items = new Array<TabStripItem>();
-			}
-			this.items.push(<TabStripItem>value);
-			this._addView(value);
-			// selectedIndexProperty.coerce(this);
-		}
-	}
-
-	public onItemsChanged(oldItems: TabStripItem[], newItems: TabStripItem[]): void {
-		if (oldItems) {
-			oldItems.forEach((item) => this._removeView(item));
-		}
-
-		if (newItems) {
-			newItems.forEach((item) => {
-				this._addView(item);
-			});
-		}
-	}
-
-	[backgroundColorProperty.getDefault](): Color {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarBackgroundColor();
-	}
-	[backgroundColorProperty.setNative](value: Color) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarBackgroundColor(value);
-	}
-
-	[backgroundInternalProperty.getDefault](): any {
-		return null;
-	}
-	[backgroundInternalProperty.setNative](value: any) {
-		// disable the background CSS properties
-	}
-
-	[colorProperty.getDefault](): Color {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarColor();
-	}
-	[colorProperty.setNative](value: Color) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarColor(value);
-	}
-
-	[fontInternalProperty.getDefault](): any {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarFontInternal();
-	}
-	[fontInternalProperty.setNative](value: any) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarFontInternal(value);
-	}
-
-	[textTransformProperty.getDefault](): any {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarTextTransform();
-	}
-	[textTransformProperty.setNative](value: any) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarTextTransform(value);
-	}
-
-	[highlightColorProperty.getDefault](): number {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarHighlightColor();
-	}
-	[highlightColorProperty.setNative](value: number | Color) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarHighlightColor(value);
-	}
-
-	[selectedItemColorProperty.getDefault](): Color {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarSelectedItemColor();
-	}
-	[selectedItemColorProperty.setNative](value: Color) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarSelectedItemColor(value);
-	}
-
-	[unSelectedItemColorProperty.getDefault](): Color {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.getTabBarUnSelectedItemColor();
-	}
-	[unSelectedItemColorProperty.setNative](value: Color) {
-		const parent = <TabNavigationBase>this.parent;
-
-		return parent && parent.setTabBarUnSelectedItemColor(value);
-	}
-}
-
-export interface TabStrip {
-	on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
-	on(event: 'itemTap', callback: (args: TabStripItemEventData) => void, thisArg?: any);
-}
-
-const itemsProperty = new Property<TabStrip, TabStripItem[]>({
-	name: 'items',
-	valueChanged: (target, oldValue, newValue) => {
-		target.onItemsChanged(oldValue, newValue);
-	},
-});
-itemsProperty.register(TabStrip);
-
-export const iosIconRenderingModeProperty = new Property<TabStrip, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>({ name: 'iosIconRenderingMode', defaultValue: 'automatic' });
-iosIconRenderingModeProperty.register(TabStrip);
-
-export const isIconSizeFixedProperty = new Property<TabStrip, boolean>({
-	name: 'isIconSizeFixed',
-	defaultValue: true,
-	valueConverter: booleanConverter,
-});
-isIconSizeFixedProperty.register(TabStrip);
-
-highlightColorProperty.register(TabStrip);
-selectedItemColorProperty.register(TabStrip);
-unSelectedItemColorProperty.register(TabStrip);
diff --git a/packages/core/ui/tabs/index.android.ts b/packages/core/ui/tabs/index.android.ts
deleted file mode 100644
index f0a24a13a..000000000
--- a/packages/core/ui/tabs/index.android.ts
+++ /dev/null
@@ -1,1004 +0,0 @@
-// Types
-import { TabContentItem } from '../tab-navigation-base/tab-content-item';
-import { TabStrip } from '../tab-navigation-base/tab-strip';
-import { TabStripItem } from '../tab-navigation-base/tab-strip-item';
-import { Enums } from '../enums';
-
-// Requires
-import * as application from '../../application';
-import { ImageSource } from '../../image-source';
-import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from '../../utils/utils';
-import { Color } from '../../color';
-import { Frame } from '../frame';
-import { Font } from '../styling/font';
-import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from '../tab-navigation-base/tab-navigation-base';
-import { getTransformedText } from '../text-base';
-import { offscreenTabLimitProperty, swipeEnabledProperty, animationEnabledProperty, TabsBase } from './tabs-common';
-
-export * from './tabs-common';
-
-const ACCENT_COLOR = 'colorAccent';
-const PRIMARY_COLOR = 'colorPrimary';
-const DEFAULT_ELEVATION = 4;
-
-const TABID = '_tabId';
-const INDEX = '_index';
-
-interface PagerAdapter {
-	new (owner: Tabs): androidx.viewpager.widget.PagerAdapter;
-}
-
-let PagerAdapter: PagerAdapter;
-let TabsBar: any;
-let appResources: android.content.res.Resources;
-
-function makeFragmentName(viewId: number, id: number): string {
-	return 'android:viewpager:' + viewId + ':' + id;
-}
-
-function getTabById(id: number): Tabs {
-	const ref = tabs.find((ref) => {
-		const tab = ref.get();
-
-		return tab && tab._domId === id;
-	});
-
-	return ref && ref.get();
-}
-
-function initializeNativeClasses() {
-	if (PagerAdapter) {
-		return;
-	}
-
-	@NativeClass
-	class TabFragmentImplementation extends org.nativescript.widgets.FragmentBase {
-		private owner: Tabs;
-		private index: number;
-		private backgroundBitmap: android.graphics.Bitmap = null;
-
-		constructor() {
-			super();
-
-			return global.__native(this);
-		}
-
-		static newInstance(tabId: number, index: number): TabFragmentImplementation {
-			const args = new android.os.Bundle();
-			args.putInt(TABID, tabId);
-			args.putInt(INDEX, index);
-			const fragment = new TabFragmentImplementation();
-			fragment.setArguments(args);
-
-			return fragment;
-		}
-
-		public onCreate(savedInstanceState: android.os.Bundle): void {
-			super.onCreate(savedInstanceState);
-			const args = this.getArguments();
-			this.owner = getTabById(args.getInt(TABID));
-			this.index = args.getInt(INDEX);
-			if (!this.owner) {
-				throw new Error(`Cannot find TabView`);
-			}
-		}
-
-		public onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
-			const tabItem = this.owner.items[this.index];
-
-			return tabItem.nativeViewProtected;
-		}
-
-		public onDestroyView() {
-			const hasRemovingParent = this.getRemovingParentFragment();
-
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			if (hasRemovingParent && this.owner.selectedIndex === this.index) {
-				const bitmapDrawable = new android.graphics.drawable.BitmapDrawable(appResources, this.backgroundBitmap);
-				this.owner._originalBackground = this.owner.backgroundColor || new Color('White');
-				this.owner.nativeViewProtected.setBackgroundDrawable(bitmapDrawable);
-				this.backgroundBitmap = null;
-			}
-
-			super.onDestroyView();
-		}
-
-		public onPause(): void {
-			const hasRemovingParent = this.getRemovingParentFragment();
-
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			if (hasRemovingParent && this.owner.selectedIndex === this.index) {
-				this.backgroundBitmap = this.loadBitmapFromView(this.owner.nativeViewProtected);
-			}
-
-			super.onPause();
-		}
-
-		private loadBitmapFromView(view: android.view.View): android.graphics.Bitmap {
-			// Another way to get view bitmap. Test performance vs setDrawingCacheEnabled
-			// const width = view.getWidth();
-			// const height = view.getHeight();
-			// const bitmap = android.graphics.Bitmap.createBitmap(width, height, android.graphics.Bitmap.Config.ARGB_8888);
-			// const canvas = new android.graphics.Canvas(bitmap);
-			// view.layout(0, 0, width, height);
-			// view.draw(canvas);
-
-			view.setDrawingCacheEnabled(true);
-			const bitmap = android.graphics.Bitmap.createBitmap(view.getDrawingCache());
-			view.setDrawingCacheEnabled(false);
-
-			return bitmap;
-		}
-	}
-
-	const POSITION_UNCHANGED = -1;
-	const POSITION_NONE = -2;
-
-	@NativeClass
-	class FragmentPagerAdapter extends androidx.viewpager.widget.PagerAdapter {
-		public items: Array<TabContentItem>;
-		private mCurTransaction: androidx.fragment.app.FragmentTransaction;
-		private mCurrentPrimaryItem: androidx.fragment.app.Fragment;
-		private mCurrentPosition = -1;
-
-		constructor(public owner: Tabs) {
-			super();
-
-			return global.__native(this);
-		}
-
-		getCount() {
-			const items = this.items;
-
-			return items ? items.length : 0;
-		}
-
-		getPageTitle(index: number) {
-			const items = this.items;
-			if (index < 0 || index >= items.length) {
-				return '';
-			}
-
-			return ''; // items[index].title;
-		}
-
-		startUpdate(container: android.view.ViewGroup): void {
-			if (container.getId() === android.view.View.NO_ID) {
-				throw new Error(`ViewPager with adapter ${this} requires a view containerId`);
-			}
-		}
-
-		instantiateItem(container: android.view.ViewGroup, position: number): java.lang.Object {
-			const fragmentManager = this.owner._getFragmentManager();
-			if (!this.mCurTransaction) {
-				this.mCurTransaction = fragmentManager.beginTransaction();
-			}
-
-			const itemId = this.getItemId(position);
-			const name = makeFragmentName(container.getId(), itemId);
-
-			let fragment: androidx.fragment.app.Fragment = fragmentManager.findFragmentByTag(name);
-			if (fragment != null) {
-				this.mCurTransaction.attach(fragment);
-			} else {
-				fragment = TabFragmentImplementation.newInstance(this.owner._domId, position);
-				this.mCurTransaction.add(container.getId(), fragment, name);
-			}
-
-			if (fragment !== this.mCurrentPrimaryItem) {
-				fragment.setMenuVisibility(false);
-				fragment.setUserVisibleHint(false);
-			}
-
-			const tabItems = this.owner.items;
-			const tabItem = tabItems ? tabItems[position] : null;
-			if (tabItem) {
-				tabItem.canBeLoaded = true;
-			}
-
-			return fragment;
-		}
-
-		getItemPosition(object: java.lang.Object): number {
-			return this.items ? POSITION_UNCHANGED : POSITION_NONE;
-		}
-
-		destroyItem(container: android.view.ViewGroup, position: number, object: java.lang.Object): void {
-			if (!this.mCurTransaction) {
-				const fragmentManager = this.owner._getFragmentManager();
-				this.mCurTransaction = fragmentManager.beginTransaction();
-			}
-
-			const fragment: androidx.fragment.app.Fragment = <androidx.fragment.app.Fragment>object;
-			this.mCurTransaction.detach(fragment);
-
-			if (this.mCurrentPrimaryItem === fragment) {
-				this.mCurrentPrimaryItem = null;
-			}
-
-			const tabItems = this.owner.items;
-			const tabItem = tabItems ? tabItems[position] : null;
-			if (tabItem) {
-				tabItem.canBeLoaded = false;
-			}
-		}
-
-		setPrimaryItem(container: android.view.ViewGroup, position: number, object: java.lang.Object): void {
-			const fragment = <androidx.fragment.app.Fragment>object;
-			if (fragment !== this.mCurrentPrimaryItem) {
-				if (this.mCurrentPrimaryItem != null) {
-					this.mCurrentPrimaryItem.setMenuVisibility(false);
-					this.mCurrentPrimaryItem.setUserVisibleHint(false);
-				}
-
-				if (fragment != null) {
-					fragment.setMenuVisibility(true);
-					fragment.setUserVisibleHint(true);
-				}
-
-				this.mCurrentPrimaryItem = fragment;
-				const previousPosition = this.mCurrentPosition;
-				this.mCurrentPosition = position;
-
-				const tab = this.owner;
-				tab.selectedIndex = position;
-
-				// Update tabstrip items
-				if (position != previousPosition) {
-					const tabStripItems = tab.tabStrip && tab.tabStrip.items;
-
-					if (position >= 0 && tabStripItems && tabStripItems[position]) {
-						tabStripItems[position]._emit(TabStripItem.selectEvent);
-						tab._setItemColor(tabStripItems[position]);
-					}
-
-					if (previousPosition >= 0 && tabStripItems && tabStripItems[previousPosition]) {
-						tabStripItems[previousPosition]._emit(TabStripItem.unselectEvent);
-						tab._setItemColor(tabStripItems[previousPosition]);
-					}
-				}
-
-				const tabItems = tab.items;
-				const newTabItem = tabItems ? tabItems[position] : null;
-
-				if (newTabItem) {
-					tab._loadUnloadTabItems(tab.selectedIndex);
-				}
-			}
-		}
-
-		finishUpdate(container: android.view.ViewGroup): void {
-			this._commitCurrentTransaction();
-		}
-
-		isViewFromObject(view: android.view.View, object: java.lang.Object): boolean {
-			return (<androidx.fragment.app.Fragment>object).getView() === view;
-		}
-
-		saveState(): android.os.Parcelable {
-			// Commit the current transaction on save to prevent "No view found for id 0xa" exception on restore.
-			// Related to: https://github.com/NativeScript/NativeScript/issues/6466
-			this._commitCurrentTransaction();
-
-			return null;
-		}
-
-		restoreState(state: android.os.Parcelable, loader: java.lang.ClassLoader): void {
-			//
-		}
-
-		getItemId(position: number): number {
-			return position;
-		}
-
-		private _commitCurrentTransaction() {
-			if (this.mCurTransaction != null) {
-				this.mCurTransaction.commitNowAllowingStateLoss();
-				this.mCurTransaction = null;
-			}
-		}
-	}
-
-	@NativeClass
-	class TabsBarImplementation extends org.nativescript.widgets.TabsBar {
-		constructor(context: android.content.Context, public owner: Tabs) {
-			super(context);
-
-			return global.__native(this);
-		}
-
-		public onTap(position: number): boolean {
-			const owner = this.owner;
-			if (!owner) {
-				return false;
-			}
-
-			const tabStrip = owner.tabStrip;
-			const tabStripItems = tabStrip && tabStrip.items;
-
-			if (position >= 0 && tabStripItems[position]) {
-				tabStripItems[position]._emit(TabStripItem.tapEvent);
-				tabStrip.notify({
-					eventName: TabStrip.itemTapEvent,
-					object: tabStrip,
-					index: position,
-				});
-			}
-
-			if (!owner.items[position]) {
-				return false;
-			}
-
-			return true;
-		}
-	}
-
-	PagerAdapter = FragmentPagerAdapter;
-	TabsBar = TabsBarImplementation;
-	appResources = application.android.context.getResources();
-}
-
-let defaultAccentColor: number = undefined;
-function getDefaultAccentColor(context: android.content.Context): number {
-	if (defaultAccentColor === undefined) {
-		//Fallback color: https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html
-		defaultAccentColor = ad.resources.getPaletteColor(ACCENT_COLOR, context) || 0xff33b5e5;
-	}
-
-	return defaultAccentColor;
-}
-
-function setElevation(grid: org.nativescript.widgets.GridLayout, tabsBar: org.nativescript.widgets.TabsBar, tabsPosition: string) {
-	const compat = <any>androidx.core.view.ViewCompat;
-	if (compat.setElevation) {
-		const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
-
-		if (tabsPosition === 'top') {
-			compat.setElevation(grid, val);
-		}
-
-		compat.setElevation(tabsBar, val);
-	}
-}
-
-export const tabs = new Array<WeakRef<Tabs>>();
-
-function iterateIndexRange(index: number, eps: number, lastIndex: number, callback: (i) => void) {
-	const rangeStart = Math.max(0, index - eps);
-	const rangeEnd = Math.min(index + eps, lastIndex);
-	for (let i = rangeStart; i <= rangeEnd; i++) {
-		callback(i);
-	}
-}
-
-export class Tabs extends TabsBase {
-	private _tabsBar: org.nativescript.widgets.TabsBar;
-	private _viewPager: androidx.viewpager.widget.ViewPager;
-	private _pagerAdapter: androidx.viewpager.widget.PagerAdapter;
-	private _androidViewId = -1;
-	public _originalBackground: any;
-	private _textTransform: Enums.TextTransformType = 'uppercase';
-	private _selectedItemColor: Color;
-	private _unSelectedItemColor: Color;
-	public animationEnabled: boolean;
-
-	constructor() {
-		super();
-		tabs.push(new WeakRef(this));
-	}
-
-	get _hasFragments(): boolean {
-		return true;
-	}
-
-	public onItemsChanged(oldItems: TabContentItem[], newItems: TabContentItem[]): void {
-		super.onItemsChanged(oldItems, newItems);
-
-		if (oldItems) {
-			oldItems.forEach((item: TabContentItem, i, arr) => {
-				(<any>item).index = 0;
-				(<any>item).tabItemSpec = null;
-				item.setNativeView(null);
-			});
-		}
-	}
-
-	public createNativeView() {
-		initializeNativeClasses();
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView._createUI(" + this + ");", traceCategory);
-		// }
-
-		const context: android.content.Context = this._context;
-		const nativeView = new org.nativescript.widgets.GridLayout(context);
-		const viewPager = new org.nativescript.widgets.TabViewPager(context);
-		const tabsBar = new TabsBar(context, this);
-		const lp = new org.nativescript.widgets.CommonLayoutParams();
-		const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
-		const accentColor = getDefaultAccentColor(context);
-
-		lp.row = 1;
-
-		if (this.tabsPosition === 'top') {
-			nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
-			nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
-
-			viewPager.setLayoutParams(lp);
-		} else {
-			nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
-			nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
-
-			tabsBar.setLayoutParams(lp);
-		}
-
-		nativeView.addView(viewPager);
-		(<any>nativeView).viewPager = viewPager;
-
-		const adapter = new PagerAdapter(this);
-		viewPager.setAdapter(adapter);
-		(<any>viewPager).adapter = adapter;
-
-		nativeView.addView(tabsBar);
-		(<any>nativeView).tabsBar = tabsBar;
-
-		setElevation(nativeView, tabsBar, this.tabsPosition);
-
-		if (accentColor) {
-			tabsBar.setSelectedIndicatorColors([accentColor]);
-		}
-
-		if (primaryColor) {
-			tabsBar.setBackgroundColor(primaryColor);
-		}
-
-		return nativeView;
-	}
-
-	public initNativeView(): void {
-		super.initNativeView();
-		if (this._androidViewId < 0) {
-			this._androidViewId = android.view.View.generateViewId();
-		}
-
-		const nativeView: any = this.nativeViewProtected;
-		this._tabsBar = (<any>nativeView).tabsBar;
-
-		const viewPager = (<any>nativeView).viewPager;
-		viewPager.setId(this._androidViewId);
-		this._viewPager = viewPager;
-		this._pagerAdapter = (<any>viewPager).adapter;
-		(<any>this._pagerAdapter).owner = this;
-	}
-
-	public _loadUnloadTabItems(newIndex: number) {
-		const items = this.items;
-		if (!items) {
-			return;
-		}
-
-		const lastIndex = items.length - 1;
-		const offsideItems = this.offscreenTabLimit;
-
-		const toUnload = [];
-		const toLoad = [];
-
-		iterateIndexRange(newIndex, offsideItems, lastIndex, (i) => toLoad.push(i));
-
-		items.forEach((item, i) => {
-			const indexOfI = toLoad.indexOf(i);
-			if (indexOfI < 0) {
-				toUnload.push(i);
-			}
-		});
-
-		toUnload.forEach((index) => {
-			const item = items[index];
-			if (items[index]) {
-				item.unloadView(item.content);
-			}
-		});
-
-		const newItem = items[newIndex];
-		const selectedView = newItem && newItem.content;
-		if (selectedView instanceof Frame) {
-			(<Frame>selectedView)._pushInFrameStackRecursive();
-		}
-
-		toLoad.forEach((index) => {
-			const item = items[index];
-			if (this.isLoaded && items[index]) {
-				item.loadView(item.content);
-			}
-		});
-	}
-
-	public onLoaded(): void {
-		super.onLoaded();
-
-		if (this._originalBackground) {
-			this.backgroundColor = null;
-			this.backgroundColor = this._originalBackground;
-			this._originalBackground = null;
-		}
-
-		this.setItems(<any>this.items);
-
-		if (this.tabStrip) {
-			this.setTabStripItems(this.tabStrip.items);
-		}
-
-		// this.setAdapterItems(this.items);
-	}
-
-	public onUnloaded(): void {
-		super.onUnloaded();
-
-		this.setItems(null);
-		this.setTabStripItems(null);
-
-		// this.setAdapterItems(null);
-	}
-
-	public disposeNativeView() {
-		this._tabsBar.setItems(null, null);
-		(<any>this._pagerAdapter).owner = null;
-		this._pagerAdapter = null;
-
-		this._tabsBar = null;
-		this._viewPager = null;
-		super.disposeNativeView();
-	}
-
-	public _onRootViewReset(): void {
-		super._onRootViewReset();
-
-		// call this AFTER the super call to ensure descendants apply their rootview-reset logic first
-		// i.e. in a scenario with tab frames let the frames cleanup their fragments first, and then
-		// cleanup the tab fragments to avoid
-		// android.content.res.Resources$NotFoundException: Unable to find resource ID #0xfffffff6
-		this.disposeCurrentFragments();
-	}
-
-	private disposeCurrentFragments(): void {
-		const fragmentManager = this._getFragmentManager();
-		const transaction = fragmentManager.beginTransaction();
-		const fragments = <Array<any>>fragmentManager.getFragments().toArray();
-		for (let i = 0; i < fragments.length; i++) {
-			transaction.remove(fragments[i]);
-		}
-		transaction.commitNowAllowingStateLoss();
-	}
-
-	private shouldUpdateAdapter(items: Array<TabContentItem>) {
-		if (!this._pagerAdapter) {
-			return false;
-		}
-
-		const currentPagerAdapterItems = (<any>this._pagerAdapter).items;
-
-		// if both values are null, should not update
-		if (!items && !currentPagerAdapterItems) {
-			return false;
-		}
-
-		// if one value is null, should update
-		if (!items || !currentPagerAdapterItems) {
-			return true;
-		}
-
-		// if both are Arrays but length doesn't match, should update
-		if (items.length !== currentPagerAdapterItems.length) {
-			return true;
-		}
-
-		const matchingItems = currentPagerAdapterItems.filter((currentItem) => {
-			return !!items.filter((item) => {
-				return item._domId === currentItem._domId;
-			})[0];
-		});
-
-		// if both are Arrays and length matches, but not all items are the same, should update
-		if (matchingItems.length !== items.length) {
-			return true;
-		}
-
-		// if both are Arrays and length matches and all items are the same, should not update
-		return false;
-	}
-
-	private setItems(items: Array<TabContentItem>) {
-		if (this.shouldUpdateAdapter(items)) {
-			(<any>this._pagerAdapter).items = items;
-
-			if (items && items.length) {
-				items.forEach((item: TabContentItem, i) => {
-					(<any>item).index = i;
-				});
-			}
-
-			this._pagerAdapter.notifyDataSetChanged();
-		}
-	}
-
-	private setTabStripItems(items: Array<TabStripItem>) {
-		const length = items ? items.length : 0;
-		if (length === 0) {
-			this._tabsBar.setItems(null, null);
-
-			return;
-		}
-
-		const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
-		items.forEach((tabStripItem: TabStripItem, i, arr) => {
-			tabStripItem._index = i;
-			const tabItemSpec = this.createTabItemSpec(tabStripItem);
-			(<any>tabStripItem).tabItemSpec = tabItemSpec;
-			tabItems.push(tabItemSpec);
-		});
-
-		const tabsBar = this._tabsBar;
-		tabsBar.setItems(tabItems, this._viewPager);
-		this.tabStrip.setNativeView(tabsBar);
-		items.forEach((item, i, arr) => {
-			const tv = tabsBar.getTextViewForItemAt(i);
-			item.setNativeView(tv);
-			this._setItemColor(item);
-		});
-	}
-
-	private getItemLabelTextTransform(tabStripItem: TabStripItem): Enums.TextTransformType {
-		const nestedLabel = tabStripItem.label;
-		let textTransform: Enums.TextTransformType = null;
-		if (nestedLabel && nestedLabel.style.textTransform !== 'initial') {
-			textTransform = nestedLabel.style.textTransform;
-		} else if (tabStripItem.style.textTransform !== 'initial') {
-			textTransform = tabStripItem.style.textTransform;
-		}
-
-		return textTransform || this._textTransform;
-	}
-
-	private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
-		const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
-
-		if (tabStripItem.isLoaded) {
-			const nestedLabel = tabStripItem.label;
-			let title = nestedLabel.text;
-
-			// TEXT-TRANSFORM
-			const textTransform = this.getItemLabelTextTransform(tabStripItem);
-			title = getTransformedText(title, textTransform);
-			tabItemSpec.title = title;
-
-			// BACKGROUND-COLOR
-			const backgroundColor = tabStripItem.style.backgroundColor;
-			tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
-
-			// COLOR
-			const itemColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
-			const color = itemColor || nestedLabel.style.color;
-			tabItemSpec.color = color && color.android;
-
-			// FONT
-			const fontInternal = nestedLabel.style.fontInternal;
-			if (fontInternal) {
-				tabItemSpec.fontSize = fontInternal.fontSize;
-				tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
-			}
-
-			// ICON
-			const iconSource = tabStripItem.image && tabStripItem.image.src;
-			if (iconSource) {
-				const icon = this.getIcon(tabStripItem, itemColor);
-
-				if (icon) {
-					// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
-					// tslint:disable-next-line:deprecation
-					tabItemSpec.iconDrawable = icon;
-				} else {
-					// TODO:
-					// traceMissingIcon(iconSource);
-				}
-			}
-		}
-
-		return tabItemSpec;
-	}
-
-	private getIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.drawable.BitmapDrawable {
-		const iconSource = tabStripItem.image && tabStripItem.image.src;
-		if (!iconSource) {
-			return null;
-		}
-
-		let is: ImageSource;
-		if (isFontIconURI(iconSource)) {
-			const fontIconCode = iconSource.split('//')[1];
-			const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
-			const font = target.style.fontInternal;
-			if (!color) {
-				color = target.style.color;
-			}
-			is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
-		} else {
-			is = ImageSource.fromFileOrResourceSync(iconSource);
-		}
-
-		let imageDrawable: android.graphics.drawable.BitmapDrawable;
-		if (is && is.android) {
-			let image = is.android;
-
-			if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
-				image = this.getFixedSizeIcon(image);
-			}
-
-			imageDrawable = new android.graphics.drawable.BitmapDrawable(appResources, image);
-		} else {
-			// TODO
-			// traceMissingIcon(iconSource);
-		}
-
-		return imageDrawable;
-	}
-
-	private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
-		const inWidth = image.getWidth();
-		const inHeight = image.getHeight();
-
-		const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
-
-		const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
-		const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
-
-		const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
-
-		return scaledImage;
-	}
-
-	// private setAdapterItems(items: Array<TabStripItem>) {
-	//     if (this.shouldUpdateAdapter(items)) {
-	//         (<any>this._pagerAdapter).items = items;
-
-	//         const length = items ? items.length : 0;
-	//         if (length === 0) {
-	//             this._tabLayout.setItems(null, null);
-	//             this._pagerAdapter.notifyDataSetChanged();
-	//             return;
-	//         }
-
-	//         const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
-	//         items.forEach((item: TabStripItem, i, arr) => {
-	//             const tabItemSpec = createTabItemSpec(item);
-	//             (<any>item).index = i;
-	//             (<any>item).tabItemSpec = tabItemSpec;
-	//             tabItems.push(tabItemSpec);
-	//         });
-
-	//         const tabLayout = this._tabLayout;
-	//         tabLayout.setItems(tabItems, this._viewPager);
-	//         items.forEach((item, i, arr) => {
-	//             const tv = tabLayout.getTextViewForItemAt(i);
-	//             item.setNativeView(tv);
-	//         });
-
-	//         this._pagerAdapter.notifyDataSetChanged();
-	//     }
-	// }
-
-	public updateAndroidItemAt(index: number, spec: org.nativescript.widgets.TabItemSpec) {
-		this._tabsBar.updateItemAt(index, spec);
-	}
-
-	public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
-		return this._tabsBar.getBackground();
-	}
-
-	public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
-		if (value instanceof Color) {
-			this._tabsBar.setBackgroundColor(value.android);
-		} else {
-			this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
-		}
-
-		this.updateTabStripItems();
-	}
-
-	private updateTabStripItems(): void {
-		this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
-			if (tabStripItem.nativeView) {
-				const tabItemSpec = this.createTabItemSpec(tabStripItem);
-				this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
-			}
-		});
-	}
-
-	public getTabBarHighlightColor(): number {
-		return getDefaultAccentColor(this._context);
-	}
-
-	public setTabBarHighlightColor(value: number | Color) {
-		const color = value instanceof Color ? value.android : value;
-		this._tabsBar.setSelectedIndicatorColors([color]);
-	}
-
-	private setItemsColors(items: Array<TabStripItem>): void {
-		items.forEach((item) => {
-			if (item.nativeView) {
-				this._setItemColor(item);
-			}
-		});
-	}
-
-	public getTabBarSelectedItemColor(): Color {
-		return this._selectedItemColor;
-	}
-
-	public setTabBarSelectedItemColor(value: Color) {
-		this._selectedItemColor = value;
-		this.setItemsColors(this.tabStrip.items);
-	}
-
-	public getTabBarUnSelectedItemColor(): Color {
-		return this._unSelectedItemColor;
-	}
-
-	public setTabBarUnSelectedItemColor(value: Color) {
-		this._unSelectedItemColor = value;
-		this.setItemsColors(this.tabStrip.items);
-	}
-
-	private updateItem(tabStripItem: TabStripItem): void {
-		// TODO: Should figure out a way to do it directly with the the nativeView
-		const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-		const tabItemSpec = this.createTabItemSpec(tabStripItem);
-		this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
-	}
-
-	public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
-		this.updateItem(tabStripItem);
-	}
-
-	public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
-		this.updateItem(tabStripItem);
-	}
-
-	public _setItemColor(tabStripItem: TabStripItem) {
-		const itemColor = tabStripItem._index === this.selectedIndex ? this._selectedItemColor : this._unSelectedItemColor;
-		if (!itemColor) {
-			return;
-		}
-
-		// set label color
-		tabStripItem.nativeViewProtected.setTextColor(itemColor.android);
-
-		// set icon color
-		this.setIconColor(tabStripItem, itemColor);
-	}
-
-	private setIconColor(tabStripItem: TabStripItem, color?: Color) {
-		const tabBarItem = this._tabsBar.getViewForItemAt(tabStripItem._index);
-
-		const drawable = this.getIcon(tabStripItem, color);
-		const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
-		imgView.setImageDrawable(drawable);
-		if (color) {
-			imgView.setColorFilter(color.android);
-		}
-	}
-
-	public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
-		const itemColor = tabStripItem._index === this.selectedIndex ? this._selectedItemColor : this._unSelectedItemColor;
-		if (itemColor) {
-			// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
-			// so it does not respect the css color
-			return;
-		}
-
-		const androidColor = value instanceof Color ? value.android : value;
-		tabStripItem.nativeViewProtected.setTextColor(androidColor);
-	}
-
-	public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
-		const itemColor = tabStripItem._index === this.selectedIndex ? this._selectedItemColor : this._unSelectedItemColor;
-		if (itemColor) {
-			// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
-			// so it does not respect the css color
-			return;
-		}
-
-		this.setIconColor(tabStripItem);
-	}
-
-	public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
-		this.updateItem(tabStripItem);
-	}
-
-	public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
-		if (value.fontSize) {
-			tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
-		}
-		tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface());
-	}
-
-	public getTabBarItemTextTransform(tabStripItem: TabStripItem): Enums.TextTransformType {
-		return this.getItemLabelTextTransform(tabStripItem);
-	}
-
-	public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: Enums.TextTransformType): void {
-		const nestedLabel = tabStripItem.label;
-		const title = getTransformedText(nestedLabel.text, value);
-		tabStripItem.nativeViewProtected.setText(title);
-	}
-
-	public getTabBarTextTransform(): Enums.TextTransformType {
-		return this._textTransform;
-	}
-
-	public setTabBarTextTransform(value: Enums.TextTransformType): void {
-		const items = this.tabStrip && this.tabStrip.items;
-		if (items) {
-			items.forEach((tabStripItem) => {
-				if (tabStripItem.label && tabStripItem.nativeViewProtected) {
-					const nestedLabel = tabStripItem.label;
-					const title = getTransformedText(nestedLabel.text, value);
-					tabStripItem.nativeViewProtected.setText(title);
-				}
-			});
-		}
-		this._textTransform = value;
-	}
-
-	[selectedIndexProperty.setNative](value: number) {
-		if (this._viewPager.getCurrentItem() != value) {
-			this._viewPager.setCurrentItem(value);
-		}
-	}
-
-	[itemsProperty.getDefault](): TabContentItem[] {
-		return null;
-	}
-	[itemsProperty.setNative](value: TabContentItem[]) {
-		this.setItems(value);
-		selectedIndexProperty.coerce(this);
-	}
-
-	[tabStripProperty.getDefault](): TabStrip {
-		return null;
-	}
-	[tabStripProperty.setNative](value: TabStrip) {
-		this.setTabStripItems(value.items);
-	}
-
-	[swipeEnabledProperty.getDefault](): boolean {
-		// TODO: create native method and get native?
-		return true;
-	}
-	[swipeEnabledProperty.setNative](value: boolean) {
-		(<any>this._viewPager).setSwipePageEnabled(value);
-	}
-
-	[offscreenTabLimitProperty.getDefault](): number {
-		return this._viewPager.getOffscreenPageLimit();
-	}
-	[offscreenTabLimitProperty.setNative](value: number) {
-		this._viewPager.setOffscreenPageLimit(value);
-	}
-
-	[animationEnabledProperty.setNative](value: number) {
-		(<any>this._viewPager).setAnimationEnabled(value);
-	}
-}
-
-function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
-	if (value) {
-		const constantState = value.getConstantState();
-		if (constantState) {
-			return constantState.newDrawable(resources);
-		}
-	}
-
-	return value;
-}
diff --git a/packages/core/ui/tabs/index.d.ts b/packages/core/ui/tabs/index.d.ts
deleted file mode 100644
index e2f4a83e7..000000000
--- a/packages/core/ui/tabs/index.d.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Contains the Tabs class, which represents a tab navigation component.
- */
-
-import { Property } from '../core/properties';
-import { EventData } from '../../data/observable';
-import { TabContentItem } from '../tab-navigation-base/tab-content-item';
-import { SelectedIndexChangedEventData, TabNavigationBase } from '../tab-navigation-base/tab-navigation-base';
-import { TabStrip } from '../tab-navigation-base/tab-strip';
-
-export * from '../tab-navigation-base/tab-content-item';
-export * from '../tab-navigation-base/tab-navigation-base';
-export * from '../tab-navigation-base/tab-strip';
-export * from '../tab-navigation-base/tab-strip-item';
-
-/**
- * Represents a swipeable tabs view.
- */
-export class Tabs extends TabNavigationBase {
-	/**
-	 * Gets or sets the items of the Tabs.
-	 */
-	items: Array<TabContentItem>;
-
-	/**
-	 * Gets or sets the tab strip of the Tabs.
-	 */
-	tabStrip: TabStrip;
-
-	/**
-	 * Gets or sets the selectedIndex of the Tabs.
-	 */
-	selectedIndex: number;
-
-	/**
-	 * Gets or sets the swipe enabled state of the Tabs.
-	 */
-	swipeEnabled: boolean;
-
-	/**
-	 * Gets or sets the number of offscreen preloaded tabs of the Tabs.
-	 */
-	offscreenTabLimit: number;
-
-	/**
-	 * Gets or sets the position state of the Tabs.
-	 */
-	tabsPosition: 'top' | 'bottom';
-
-	/**
-	 * Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Defaults to "justified"
-	 * Valid values are:
-	 *  - leading
-	 *  - justified
-	 *  - center
-	 *  - centerSelected
-	 */
-	iOSTabBarItemsAlignment: IOSTabBarItemsAlignment;
-
-	/**
-	 * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
-	 */
-	android: any /* android.view.View */; //android.support.v4.view.ViewPager;
-
-	/**
-	 * Gets the native iOS [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) that represents the user interface for this component. Valid only when running on iOS.
-	 */
-	ios: any /* UITabBarController */;
-
-	/**
-	 * String value used when hooking to the selectedIndexChanged event.
-	 */
-	public static selectedIndexChangedEvent: string;
-
-	/**
-	 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-	 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
-	 * @param callback - Callback function which will be executed when event is raised.
-	 * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
-	 */
-	on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
-
-	/**
-	 * Raised when the selected index changes.
-	 */
-	on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
-}
-
-export const itemsProperty: Property<Tabs, TabContentItem[]>;
-export const tabStripProperty: Property<Tabs, TabStrip>;
-export const selectedIndexProperty: Property<Tabs, number>;
-
-/**
- * IOS Alignment of the Tabs TabStrip to use.
- *  - `leading` - tab items are aligned to the left
- *  - `justified` - tab strip is split equally to all the tab items
- *  - `center` - tabs items are aligned in the center
- *  - `centerSelected` - tab items move to make the selected tab in the center
- */
-export type IOSTabBarItemsAlignment = 'leading' | 'justified' | 'center' | 'centerSelected';
diff --git a/packages/core/ui/tabs/index.ios.ts b/packages/core/ui/tabs/index.ios.ts
deleted file mode 100644
index ae1f2932c..000000000
--- a/packages/core/ui/tabs/index.ios.ts
+++ /dev/null
@@ -1,1255 +0,0 @@
-// Types
-import { TabContentItem } from '../tab-navigation-base/tab-content-item';
-import { TabStrip } from '../tab-navigation-base/tab-strip';
-import { TabStripItem } from '../tab-navigation-base/tab-strip-item';
-import { Enums } from '../enums';
-
-// Requires
-import { Color } from '../../color';
-import { ImageSource } from '../../image-source';
-import { Device } from '../../platform';
-import { iOSNativeHelper, isFontIconURI, layout } from '../../utils';
-import { IOSHelper, View } from '../core/view';
-import { ViewBase } from '../core/view-base';
-import { Frame } from '../frame';
-import { Font } from '../styling/font';
-import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from '../tab-navigation-base/tab-navigation-base';
-import { swipeEnabledProperty, TabsBase, IOSTabBarItemsAlignment, iOSTabBarItemsAlignmentProperty } from './tabs-common';
-
-// TODO
-// import { profile } from "../../profiling";
-
-export * from './tabs-common';
-
-const majorVersion = iOSNativeHelper.MajorVersion;
-const isPhone = Device.deviceType === 'Phone';
-
-// Equivalent to dispatch_async(dispatch_get_main_queue(...)) call
-const invokeOnRunLoop = (function () {
-	const runloop = CFRunLoopGetMain();
-
-	return (action: () => any) => {
-		CFRunLoopPerformBlock(runloop, kCFRunLoopDefaultMode, action);
-		CFRunLoopWakeUp(runloop);
-	};
-})();
-
-@NativeClass
-class MDCTabBarDelegateImpl extends NSObject implements MDCTabBarDelegate {
-	public static ObjCProtocols = [MDCTabBarDelegate];
-
-	private _owner: WeakRef<Tabs>;
-
-	public static initWithOwner(owner: WeakRef<Tabs>): MDCTabBarDelegateImpl {
-		const delegate = <MDCTabBarDelegateImpl>MDCTabBarDelegateImpl.new();
-		delegate._owner = owner;
-
-		return delegate;
-	}
-
-	public tabBarShouldSelectItem(tabBar: MDCTabBar, item: UITabBarItem): boolean {
-		const owner = this._owner.get();
-		const shouldSelectItem = owner._canSelectItem;
-		const selectedIndex = owner.tabBarItems.indexOf(item);
-
-		if (owner.selectedIndex !== selectedIndex) {
-			owner._canSelectItem = false;
-		}
-
-		const tabStrip = owner.tabStrip;
-		const tabStripItems = tabStrip && tabStrip.items;
-
-		if (tabStripItems && tabStripItems[selectedIndex]) {
-			tabStripItems[selectedIndex]._emit(TabStripItem.tapEvent);
-			tabStrip.notify({
-				eventName: TabStrip.itemTapEvent,
-				object: tabStrip,
-				index: selectedIndex,
-			});
-		}
-
-		return shouldSelectItem;
-	}
-
-	public tabBarDidSelectItem(tabBar: MDCTabBar, selectedItem: UITabBarItem): void {
-		const owner = this._owner.get();
-		const tabBarItems = owner.tabBarItems;
-		const selectedIndex = tabBarItems.indexOf(selectedItem);
-
-		owner.selectedIndex = selectedIndex;
-	}
-}
-
-@NativeClass
-class BackgroundIndicatorTemplate extends NSObject implements MDCTabBarIndicatorTemplate {
-	public static ObjCProtocols = [MDCTabBarIndicatorTemplate];
-
-	public indicatorAttributesForContext(context: MDCTabBarIndicatorContext): MDCTabBarIndicatorAttributes {
-		const attributes = new MDCTabBarIndicatorAttributes();
-		attributes.path = UIBezierPath.bezierPathWithRect(context.bounds);
-
-		return attributes;
-	}
-}
-
-@NativeClass
-class UIPageViewControllerImpl extends UIPageViewController {
-	tabBar: MDCTabBar;
-	scrollView: UIScrollView;
-	tabBarDelegate: MDCTabBarDelegateImpl;
-
-	private _owner: WeakRef<Tabs>;
-
-	public static initWithOwner(owner: WeakRef<Tabs>): UIPageViewControllerImpl {
-		const handler = <UIPageViewControllerImpl>UIPageViewControllerImpl.alloc().initWithTransitionStyleNavigationOrientationOptions(UIPageViewControllerTransitionStyle.Scroll, UIPageViewControllerNavigationOrientation.Horizontal, null);
-		handler._owner = owner;
-
-		return handler;
-	}
-
-	public viewDidLoad(): void {
-		const owner = this._owner.get();
-
-		const tabBarItems = owner.tabBarItems;
-		const tabBar = MDCTabBar.alloc().initWithFrame(this.view.bounds);
-
-		if (tabBarItems && tabBarItems.length) {
-			tabBar.items = NSArray.arrayWithArray(tabBarItems);
-		}
-
-		tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner));
-
-		if (majorVersion <= 12 || !UIColor.labelColor) {
-			tabBar.tintColor = UIColor.blueColor;
-			tabBar.barTintColor = UIColor.whiteColor;
-			tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
-			tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
-		} else {
-			tabBar.tintColor = UIColor.systemBlueColor;
-			tabBar.barTintColor = UIColor.systemBackgroundColor;
-			tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Normal);
-			tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Selected);
-			tabBar.inkColor = UIColor.clearColor;
-		}
-
-		tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
-		tabBar.alignment = MDCTabBarAlignment.Justified;
-		tabBar.sizeToFit();
-
-		this.tabBar = tabBar;
-		this.view.addSubview(tabBar);
-	}
-
-	public viewWillAppear(animated: boolean): void {
-		super.viewWillAppear(animated);
-		const owner = this._owner.get();
-		if (!owner) {
-			return;
-		}
-
-		IOSHelper.updateAutoAdjustScrollInsets(this, owner);
-
-		// Tabs can be reset as a root view. Call loaded here in this scenario.
-		if (!owner.isLoaded) {
-			owner.callLoaded();
-		}
-	}
-
-	public viewDidLayoutSubviews(): void {
-		super.viewDidLayoutSubviews();
-		const owner = this._owner.get();
-		if (!owner) {
-			return;
-		}
-
-		let safeAreaInsetsBottom = 0;
-		let safeAreaInsetsTop = 0;
-
-		if (majorVersion > 10) {
-			safeAreaInsetsBottom = this.view.safeAreaInsets.bottom;
-			safeAreaInsetsTop = this.view.safeAreaInsets.top;
-		} else {
-			safeAreaInsetsTop = this.topLayoutGuide.length;
-		}
-
-		let conditionalSafeAreaBottom = owner.iosOverflowSafeArea ? safeAreaInsetsBottom : 0;
-		let scrollViewTop = 0;
-		let scrollViewHeight = this.view.bounds.size.height + conditionalSafeAreaBottom;
-
-		if (owner.tabStrip) {
-			const tabBarHeight = this.tabBar.frame.size.height;
-			let tabBarTop = safeAreaInsetsTop;
-
-			scrollViewTop = tabBarHeight;
-			scrollViewHeight = this.view.bounds.size.height - tabBarHeight + conditionalSafeAreaBottom;
-
-			const tabsPosition = owner.tabsPosition;
-			if (tabsPosition === 'bottom') {
-				tabBarTop = this.view.frame.size.height - tabBarHeight - safeAreaInsetsBottom;
-				scrollViewTop = this.view.frame.origin.y;
-				scrollViewHeight = this.view.frame.size.height - tabBarHeight;
-			}
-
-			let parent = owner.parent;
-
-			// Handle Angular scenario where Tabs is in a ProxyViewContainer
-			// It is possible to wrap components in ProxyViewContainers indefinitely
-			while (parent && !parent.nativeViewProtected) {
-				parent = parent.parent;
-			}
-
-			if (parent && majorVersion > 10) {
-				// TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
-				tabBarTop = Math.max(tabBarTop, parent.nativeView.safeAreaInsets.top);
-			}
-
-			this.tabBar.frame = CGRectMake(0, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
-		} else {
-			this.tabBar.hidden = true;
-		}
-
-		const subViews: NSArray<UIView> = this.view.subviews;
-		let scrollView: UIScrollView = null;
-
-		for (let i = 0; i < subViews.count; i++) {
-			const view: UIView = subViews[i];
-			if (view instanceof UIScrollView) {
-				scrollView = <UIScrollView>view;
-			}
-		}
-
-		if (scrollView) {
-			// The part of the UIPageViewController that is changing the pages is a UIScrollView
-			// We want to expand it to the size of the UIPageViewController as it is not so by default
-			this.scrollView = scrollView;
-
-			if (!owner.swipeEnabled) {
-				scrollView.scrollEnabled = false;
-			}
-
-			scrollView.frame = CGRectMake(0, scrollViewTop, this.view.bounds.size.width, scrollViewHeight); //this.view.bounds;
-		}
-	}
-
-	// Mind implementation for other controllers
-	public traitCollectionDidChange(previousTraitCollection: UITraitCollection): void {
-		super.traitCollectionDidChange(previousTraitCollection);
-
-		if (majorVersion >= 13) {
-			const owner = this._owner.get();
-			if (owner && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection(previousTraitCollection)) {
-				owner.notify({
-					eventName: IOSHelper.traitCollectionColorAppearanceChangedEvent,
-					object: owner,
-				});
-			}
-		}
-	}
-
-	public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void {
-		super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator);
-		coordinator.animateAlongsideTransitionCompletion(() => {
-			const owner = this._owner.get();
-			if (owner && owner.tabStrip && owner.tabStrip.items) {
-				const tabStrip = owner.tabStrip;
-				tabStrip.items.forEach((tabStripItem) => {
-					updateBackgroundPositions(tabStrip, tabStripItem, this.tabBar.alignment !== MDCTabBarAlignment.Justified || owner.selectedIndex !== tabStripItem._index ? owner._defaultItemBackgroundColor : null);
-
-					const index = tabStripItem._index;
-					const tabBarItemController = owner.viewControllers[index];
-					updateTitleAndIconPositions(tabStripItem, tabBarItemController.tabBarItem, tabBarItemController);
-				});
-			}
-		}, null);
-	}
-}
-
-@NativeClass
-class UIPageViewControllerDataSourceImpl extends NSObject implements UIPageViewControllerDataSource {
-	public static ObjCProtocols = [UIPageViewControllerDataSource];
-
-	private _owner: WeakRef<Tabs>;
-
-	public static initWithOwner(owner: WeakRef<Tabs>): UIPageViewControllerDataSourceImpl {
-		const dataSource = <UIPageViewControllerDataSourceImpl>UIPageViewControllerDataSourceImpl.new();
-		dataSource._owner = owner;
-
-		return dataSource;
-	}
-
-	public pageViewControllerViewControllerBeforeViewController(pageViewController: UIPageViewController, viewController: UIViewController): UIViewController {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
-		// }
-
-		const owner = this._owner.get();
-		let selectedIndex = owner.selectedIndex;
-
-		if (selectedIndex === 0) {
-			return null;
-		}
-
-		selectedIndex--;
-		const prevItem = owner.items[selectedIndex];
-		const prevViewController = (<any>prevItem).__controller;
-
-		// if (!prevViewController) {
-		//     prevViewController = owner.getViewController(prevItem);
-		// }
-
-		owner._setCanBeLoaded(selectedIndex);
-		owner._loadUnloadTabItems(selectedIndex);
-
-		return prevViewController;
-	}
-
-	public pageViewControllerViewControllerAfterViewController(pageViewController: UIPageViewController, viewController: UIViewController): UIViewController {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
-		// }
-
-		const owner = this._owner.get();
-		let selectedIndex = owner.selectedIndex;
-
-		if (selectedIndex === owner.items.length - 1) {
-			return null;
-		}
-
-		selectedIndex++;
-		const nextItem = owner.items[selectedIndex];
-		const nextViewController = (<any>nextItem).__controller;
-
-		// if (!nextViewController) {
-		//     nextViewController = owner.getViewController(nextItem);
-		// }
-
-		owner._setCanBeLoaded(selectedIndex);
-		owner._loadUnloadTabItems(selectedIndex);
-		// nextItem.loadView(nextItem.view);
-
-		return nextViewController;
-	}
-
-	public presentationCountForPageViewController(pageViewController: UIPageViewController): number {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
-		// }
-
-		return 0;
-	}
-
-	public presentationIndexForPageViewController(pageViewController: UIPageViewController): number {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
-		// }
-
-		return 0;
-	}
-}
-
-@NativeClass
-class UIPageViewControllerDelegateImpl extends NSObject implements UIPageViewControllerDelegate {
-	public static ObjCProtocols = [UIPageViewControllerDelegate];
-
-	private _owner: WeakRef<Tabs>;
-
-	public static initWithOwner(owner: WeakRef<Tabs>): UIPageViewControllerDelegateImpl {
-		const delegate = <UIPageViewControllerDelegateImpl>UIPageViewControllerDelegateImpl.new();
-		delegate._owner = owner;
-
-		return delegate;
-	}
-
-	public pageViewControllerWillTransitionToViewControllers(pageViewController: UIPageViewController, viewControllers: NSArray<UIViewController>): void {
-		// const owner = this._owner.get();
-		// const ownerViewControllers = owner.viewControllers;
-		// const selectedIndex = owner.selectedIndex;
-		// const nextViewController = viewControllers[0];
-		// const nextViewControllerIndex = ownerViewControllers.indexOf(nextViewController);
-		// if (selectedIndex > nextViewControllerIndex) {
-		//     owner.selectedIndex--;
-		// } else {
-		//     owner.selectedIndex++;
-		// }
-	}
-
-	public pageViewControllerDidFinishAnimatingPreviousViewControllersTransitionCompleted(pageViewController: UIPageViewController, didFinishAnimating: boolean, previousViewControllers: NSArray<UIViewController>, transitionCompleted: boolean): void {
-		if (!transitionCompleted) {
-			return;
-		}
-
-		const owner = this._owner.get();
-		const ownerViewControllers = owner.viewControllers;
-		const selectedIndex = owner.selectedIndex;
-		const nextViewController = pageViewController.viewControllers[0];
-		const nextViewControllerIndex = ownerViewControllers.indexOf(nextViewController);
-
-		if (selectedIndex !== nextViewControllerIndex) {
-			owner.selectedIndex = nextViewControllerIndex;
-			owner._canSelectItem = true;
-		}
-	}
-}
-
-function iterateIndexRange(index: number, eps: number, lastIndex: number, callback: (i) => void) {
-	const rangeStart = Math.max(0, index - eps);
-	const rangeEnd = Math.min(index + eps, lastIndex);
-	for (let i = rangeStart; i <= rangeEnd; i++) {
-		callback(i);
-	}
-}
-
-function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripItem, color: UIColor = null) {
-	let bgView = (<any>tabStripItem).bgView;
-	const index = tabStripItem._index;
-	const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length;
-	const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width);
-	if (!bgView) {
-		bgView = UIView.alloc().initWithFrame(frame);
-		tabStrip.nativeView.insertSubviewAtIndex(bgView, 0);
-		(<any>tabStripItem).bgView = bgView;
-	} else {
-		bgView.frame = frame;
-	}
-
-	const backgroundColor = tabStripItem.style.backgroundColor;
-	bgView.backgroundColor = color || (backgroundColor instanceof Color ? backgroundColor.ios : backgroundColor);
-}
-
-function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UITabBarItem, controller: UIViewController) {
-	if (!tabStripItem || !tabBarItem) {
-		return;
-	}
-
-	// For iOS <11 icon is *always* above the text.
-	// For iOS 11 icon is above the text *only* on phones in portrait mode.
-	const orientation = controller.interfaceOrientation;
-	const isPortrait = orientation !== UIInterfaceOrientation.LandscapeLeft && orientation !== UIInterfaceOrientation.LandscapeRight;
-	const isIconAboveTitle = majorVersion < 11 || (isPhone && isPortrait);
-
-	if (!tabStripItem.iconSource) {
-		if (isIconAboveTitle) {
-			tabBarItem.titlePositionAdjustment = {
-				horizontal: 0,
-				vertical: -20,
-			};
-		} else {
-			tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 };
-		}
-	}
-
-	if (!tabStripItem.title) {
-		if (isIconAboveTitle) {
-			tabBarItem.imageInsets = new UIEdgeInsets({
-				top: 6,
-				left: 0,
-				bottom: -6,
-				right: 0,
-			});
-		} else {
-			tabBarItem.imageInsets = new UIEdgeInsets({
-				top: 0,
-				left: 0,
-				bottom: 0,
-				right: 0,
-			});
-		}
-	}
-}
-
-export class Tabs extends TabsBase {
-	public nativeViewProtected: UIView;
-	public selectedIndex: number;
-	// public swipeEnabled: boolean;
-	// public offscreenTabLimit: number;
-	// public tabsPosition: "top" | "bottom";
-	public _canSelectItem: boolean;
-	// @ts-ignore
-	public isLoaded: boolean;
-	public viewController: UIPageViewControllerImpl;
-	public items: TabContentItem[];
-	public _ios: UIPageViewControllerImpl;
-	public viewControllers: UIViewController[];
-	public tabBarItems: UITabBarItem[];
-	private _currentNativeSelectedIndex: number;
-	private _dataSource: UIPageViewControllerDataSourceImpl;
-	private _delegate: UIPageViewControllerDelegateImpl;
-	// private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
-	private _iconsCache = {};
-	private _backgroundIndicatorColor: UIColor;
-	public _defaultItemBackgroundColor: UIColor;
-	private _selectedItemColor: Color;
-	private _unSelectedItemColor: Color;
-	public animationEnabled: boolean;
-
-	constructor() {
-		super();
-
-		this.viewController = this._ios = <UIPageViewControllerImpl>UIPageViewControllerImpl.initWithOwner(new WeakRef(this)); //alloc().initWithTransitionStyleNavigationOrientationOptions(UIPageViewControllerTransitionStyle.Scroll, UIPageViewControllerNavigationOrientation.Horizontal, null);;
-	}
-
-	createNativeView() {
-		return this._ios.view;
-	}
-
-	initNativeView() {
-		super.initNativeView();
-		this._dataSource = UIPageViewControllerDataSourceImpl.initWithOwner(new WeakRef(this));
-		this._delegate = UIPageViewControllerDelegateImpl.initWithOwner(new WeakRef(this));
-	}
-
-	disposeNativeView() {
-		this._dataSource = null;
-		this._delegate = null;
-		this._ios.tabBarDelegate = null;
-		this._ios.tabBar = null;
-		super.disposeNativeView();
-	}
-
-	// TODO
-	// @profile()
-	public onLoaded() {
-		super.onLoaded();
-
-		this.setViewControllers(this.items);
-
-		const selectedIndex = this.selectedIndex;
-		const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
-		if (selectedView instanceof Frame) {
-			selectedView._pushInFrameStackRecursive();
-		}
-
-		this._ios.dataSource = this._dataSource;
-		this._ios.delegate = this._delegate;
-	}
-
-	public onUnloaded() {
-		this._ios.dataSource = null;
-		this._ios.delegate = null;
-		super.onUnloaded();
-	}
-
-	// @ts-ignore
-	get ios(): UIPageViewController {
-		return this._ios;
-	}
-
-	public layoutNativeView(left: number, top: number, right: number, bottom: number): void {
-		//
-	}
-
-	public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
-		//
-	}
-
-	public onSelectedIndexChanged(oldIndex: number, newIndex: number): void {
-		const items = this.items;
-		if (!items) {
-			return;
-		}
-
-		const oldItem = items[oldIndex];
-		if (oldItem) {
-			oldItem.canBeLoaded = false;
-			oldItem.unloadView(oldItem.content);
-		}
-
-		const newItem = items[newIndex];
-		if (newItem && this.isLoaded) {
-			const selectedView = items[newIndex].content;
-			if (selectedView instanceof Frame) {
-				selectedView._pushInFrameStackRecursive();
-			}
-
-			newItem.canBeLoaded = true;
-			newItem.loadView(newItem.content);
-		}
-
-		const tabStripItems = this.tabStrip && this.tabStrip.items;
-		if (tabStripItems) {
-			if (tabStripItems[newIndex]) {
-				tabStripItems[newIndex]._emit(TabStripItem.selectEvent);
-				this.updateItemColors(tabStripItems[newIndex]);
-			}
-
-			if (tabStripItems[oldIndex]) {
-				tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent);
-				this.updateItemColors(tabStripItems[oldIndex]);
-			}
-		}
-
-		this._loadUnloadTabItems(newIndex);
-
-		super.onSelectedIndexChanged(oldIndex, newIndex);
-	}
-
-	public _loadUnloadTabItems(newIndex: number) {
-		const items = this.items;
-		if (!items) {
-			return;
-		}
-
-		const lastIndex = items.length - 1;
-		const offsideItems = this.offscreenTabLimit;
-
-		const toUnload = [];
-		const toLoad = [];
-
-		iterateIndexRange(newIndex, offsideItems, lastIndex, (i) => toLoad.push(i));
-
-		items.forEach((item, i) => {
-			const indexOfI = toLoad.indexOf(i);
-			if (indexOfI < 0) {
-				toUnload.push(i);
-			}
-		});
-
-		toUnload.forEach((index) => {
-			const item = items[index];
-			if (items[index]) {
-				item.unloadView(item.content);
-			}
-		});
-
-		const newItem = items[newIndex];
-		const selectedView = newItem && newItem.content;
-		if (selectedView instanceof Frame) {
-			selectedView._pushInFrameStackRecursive();
-		}
-
-		toLoad.forEach((index) => {
-			const item = items[index];
-			if (this.isLoaded && items[index]) {
-				item.loadView(item.content);
-			}
-		});
-	}
-
-	public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-		const width = layout.getMeasureSpecSize(widthMeasureSpec);
-		const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
-
-		const height = layout.getMeasureSpecSize(heightMeasureSpec);
-		const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
-
-		const widthAndState = View.resolveSizeAndState(width, width, widthMode, 0);
-		const heightAndState = View.resolveSizeAndState(height, height, heightMode, 0);
-
-		this.setMeasuredDimension(widthAndState, heightAndState);
-	}
-
-	public _onViewControllerShown(viewController: UIViewController) {
-		// This method could be called with the moreNavigationController or its list controller, so we have to check.
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView._onViewControllerShown(" + viewController + ");", Trace.categories.Debug);
-		// }
-		if (this._ios.viewControllers && this._ios.viewControllers.containsObject(viewController)) {
-			this.selectedIndex = this._ios.viewControllers.indexOfObject(viewController);
-		} else {
-			// TODO
-			// if (Trace.isEnabled()) {
-			//     Trace.write("TabView._onViewControllerShown: viewController is not one of our viewControllers", Trace.categories.Debug);
-			// }
-		}
-	}
-
-	private getViewController(item: TabContentItem): UIViewController {
-		let newController: UIViewController = item.content ? item.content.viewController : null;
-
-		if (newController) {
-			(<any>item).setViewController(newController, newController.view);
-
-			return newController;
-		}
-
-		if (item.content.ios instanceof UIViewController) {
-			newController = item.content.ios;
-			(<any>item).setViewController(newController, newController.view);
-		} else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
-			newController = item.content.ios.controller;
-			(<any>item).setViewController(newController, newController.view);
-		} else {
-			newController = IOSHelper.UILayoutViewController.initWithOwner(new WeakRef(item.content)) as UIViewController;
-			newController.view.addSubview(item.content.nativeViewProtected);
-			item.content.viewController = newController;
-			(<any>item).setViewController(newController, item.content.nativeViewProtected);
-		}
-
-		return newController;
-	}
-
-	public _setCanBeLoaded(index: number) {
-		const items = this.items;
-		if (!this.items) {
-			return;
-		}
-
-		const lastIndex = items.length - 1;
-		const offsideItems = this.offscreenTabLimit;
-
-		iterateIndexRange(index, offsideItems, lastIndex, (i) => {
-			if (items[i]) {
-				(<TabContentItem>items[i]).canBeLoaded = true;
-			}
-		});
-	}
-
-	private setViewControllers(items: TabContentItem[]) {
-		const length = items ? items.length : 0;
-		if (length === 0) {
-			this.viewControllers = null;
-
-			return;
-		}
-
-		const viewControllers = [];
-		const tabBarItems = [];
-
-		if (this.tabStrip) {
-			this.tabStrip.setNativeView(this._ios.tabBar);
-		}
-
-		const tabStripItems = this.tabStrip && this.tabStrip.items;
-		if (tabStripItems) {
-			if (tabStripItems[this.selectedIndex]) {
-				tabStripItems[this.selectedIndex]._emit(TabStripItem.selectEvent);
-			}
-		}
-
-		items.forEach((item, i) => {
-			const controller = this.getViewController(item);
-
-			if (this.tabStrip && this.tabStrip.items && this.tabStrip.items[i]) {
-				const tabStripItem = <TabStripItem>this.tabStrip.items[i];
-				const tabBarItem = this.createTabBarItem(tabStripItem, i);
-				updateTitleAndIconPositions(tabStripItem, tabBarItem, controller);
-
-				this.setViewTextAttributes(tabStripItem.label, i === this.selectedIndex);
-
-				controller.tabBarItem = tabBarItem;
-				tabStripItem._index = i;
-				tabBarItems.push(tabBarItem);
-				tabStripItem.setNativeView(tabBarItem);
-			}
-
-			item.canBeLoaded = true;
-			viewControllers.push(controller);
-		});
-
-		this.setItemImages();
-
-		this.viewControllers = viewControllers;
-		this.tabBarItems = tabBarItems;
-
-		if (this.viewController && this.viewController.tabBar) {
-			this.viewController.tabBar.itemAppearance = this.getTabBarItemAppearance();
-			this.viewController.tabBar.items = NSArray.arrayWithArray(this.tabBarItems);
-			// TODO: investigate why this call is necessary to actually toggle item appearance
-			this.viewController.tabBar.sizeToFit();
-			if (this.selectedIndex) {
-				this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[this.selectedIndex], false);
-			}
-		}
-	}
-
-	private setItemImages() {
-		if (this._selectedItemColor || this._unSelectedItemColor) {
-			if (this.tabStrip && this.tabStrip.items) {
-				this.tabStrip.items.forEach((item) => {
-					if (this._unSelectedItemColor && item.nativeView) {
-						item.nativeView.image = this.getIcon(item, this._unSelectedItemColor);
-					}
-					if (this._selectedItemColor && item.nativeView) {
-						if (this.selectedIndex === item._index) {
-							item.nativeView.image = this.getIcon(item, this._selectedItemColor);
-						}
-					}
-				});
-			}
-		}
-	}
-
-	private updateAllItemsColors() {
-		this._defaultItemBackgroundColor = null;
-		this.setItemColors();
-		if (this.tabStrip && this.tabStrip.items) {
-			this.tabStrip.items.forEach((tabStripItem) => {
-				this.updateItemColors(tabStripItem);
-			});
-		}
-	}
-
-	private updateItemColors(tabStripItem: TabStripItem): void {
-		updateBackgroundPositions(this.tabStrip, tabStripItem);
-		this.setIconColor(tabStripItem, true);
-	}
-
-	private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
-		let image: UIImage;
-		let title: string;
-
-		if (item.isLoaded) {
-			image = this.getIcon(item);
-			title = item.label.text;
-
-			if (!this.tabStrip._hasImage) {
-				this.tabStrip._hasImage = !!image;
-			}
-
-			if (!this.tabStrip._hasTitle) {
-				this.tabStrip._hasTitle = !!title;
-			}
-		}
-
-		const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index);
-
-		return tabBarItem;
-	}
-
-	private getTabBarItemAppearance(): MDCTabBarItemAppearance {
-		let itemAppearance;
-		if (this.tabStrip && this.tabStrip._hasImage && this.tabStrip._hasTitle) {
-			itemAppearance = MDCTabBarItemAppearance.TitledImages;
-		} else if (this.tabStrip && this.tabStrip._hasImage) {
-			itemAppearance = MDCTabBarItemAppearance.Images;
-		} else {
-			itemAppearance = MDCTabBarItemAppearance.Titles;
-		}
-
-		return itemAppearance;
-	}
-
-	private getIconRenderingMode(): UIImageRenderingMode {
-		switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
-			case 'alwaysOriginal':
-				return UIImageRenderingMode.AlwaysOriginal;
-			case 'alwaysTemplate':
-				return UIImageRenderingMode.AlwaysTemplate;
-			case 'automatic':
-			default:
-				const hasItemColor = this._selectedItemColor || this._unSelectedItemColor;
-
-				return hasItemColor ? UIImageRenderingMode.AlwaysTemplate : UIImageRenderingMode.AlwaysOriginal;
-		}
-	}
-
-	private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage {
-		// Image and Label children of TabStripItem
-		// take priority over its `iconSource` and `title` properties
-		const iconSource = tabStripItem.image && tabStripItem.image.src;
-		if (!iconSource) {
-			return null;
-		}
-
-		const target = tabStripItem.image;
-		const font = target.style.fontInternal || Font.default;
-		if (!color) {
-			color = target.style.color;
-		}
-		const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(';');
-
-		let isFontIcon = false;
-		let image: UIImage = this._iconsCache[iconTag];
-		if (!image) {
-			let is = new ImageSource();
-			if (isFontIconURI(iconSource)) {
-				isFontIcon = true;
-				const fontIconCode = iconSource.split('//')[1];
-				is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
-			} else {
-				is = ImageSource.fromFileOrResourceSync(iconSource);
-			}
-
-			if (is && is.ios) {
-				image = is.ios;
-
-				if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
-					image = this.getFixedSizeIcon(image);
-				}
-
-				let renderingMode: UIImageRenderingMode = UIImageRenderingMode.Automatic;
-				if (!isFontIcon) {
-					renderingMode = this.getIconRenderingMode();
-				}
-				const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
-				this._iconsCache[iconTag] = originalRenderedImage;
-				image = originalRenderedImage;
-			}
-		}
-
-		return image;
-	}
-
-	private getFixedSizeIcon(image: UIImage): UIImage {
-		const inWidth = image.size.width;
-		const inHeight = image.size.height;
-
-		const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
-
-		const widthPts = iconSpecSize.width;
-		const heightPts = iconSpecSize.height;
-
-		UIGraphicsBeginImageContextWithOptions({ width: widthPts, height: heightPts }, false, layout.getDisplayDensity());
-		image.drawInRect(CGRectMake(0, 0, widthPts, heightPts));
-		const resultImage = UIGraphicsGetImageFromCurrentImageContext();
-		UIGraphicsEndImageContext();
-
-		return resultImage;
-	}
-
-	public getTabBarBackgroundColor(): UIColor {
-		return this._ios.tabBar.barTintColor;
-	}
-
-	public setTabBarBackgroundColor(value: UIColor | Color): void {
-		this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
-		this.updateAllItemsColors();
-	}
-
-	public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
-		tabStripItem.nativeView.title = value;
-	}
-
-	private equalUIColor(first: UIColor, second: UIColor): boolean {
-		if (!first && !second) {
-			return true;
-		}
-		if (!first || !second) {
-			return false;
-		}
-		const firstComponents = CGColorGetComponents(first.CGColor);
-		const secondComponents = CGColorGetComponents(second.CGColor);
-
-		return firstComponents[0] === secondComponents[0] && firstComponents[1] === secondComponents[1] && firstComponents[2] === secondComponents[2] && firstComponents[3] === secondComponents[3];
-	}
-
-	private isSelectedAndHightlightedItem(tabStripItem: TabStripItem): boolean {
-		// to find out whether the current tab strip item is active (has style with :active selector applied)
-		// we need to check whether its _visualState is equal to "highlighted" as when changing tabs
-		// we first go through setTabBarItemBackgroundColor thice, once before setting the "highlighted" state
-		// and once after that, but if the "highlighted" state is not set we cannot get the backgroundColor
-		// set using :active selector
-		return tabStripItem._index === this.selectedIndex && tabStripItem['_visualState'] === 'highlighted';
-	}
-
-	public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		if (!this.tabStrip || !tabStripItem) {
-			return;
-		}
-
-		const newColor = value instanceof Color ? value.ios : value;
-		const itemSelectedAndHighlighted = this.isSelectedAndHightlightedItem(tabStripItem);
-
-		// As we cannot implement selected item background color in Tabs we are using the Indicator for this
-		// To be able to detect that there are two different background colors (one for selected and one for not selected item)
-		// we are checking whether the current item is not selected and higlighted and we store the value of its
-		// background color to _defaultItemBackgroundColor and later if we need to process a selected and highlighted item
-		// we are comparing it's backgroun color to the default one and if there's a difference
-		// we are changing the selectionIndicatorTemplate from underline to the whole item
-		// in that mode we are not able to show the indicator as it is used for the background of the selected item
-
-		if (!this._defaultItemBackgroundColor && !itemSelectedAndHighlighted) {
-			this._defaultItemBackgroundColor = newColor;
-		}
-
-		if (this.viewController.tabBar.alignment !== MDCTabBarAlignment.Justified && itemSelectedAndHighlighted && !this.equalUIColor(this._defaultItemBackgroundColor, newColor)) {
-			if (!this._backgroundIndicatorColor) {
-				this._backgroundIndicatorColor = newColor;
-				this._ios.tabBar.selectionIndicatorTemplate = new BackgroundIndicatorTemplate();
-				this._ios.tabBar.tintColor = newColor;
-			}
-		} else {
-			updateBackgroundPositions(this.tabStrip, tabStripItem, newColor);
-		}
-	}
-
-	public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		this.setViewTextAttributes(tabStripItem.label);
-	}
-
-	private setItemColors(): void {
-		if (this._selectedItemColor) {
-			this.viewController.tabBar.selectedItemTintColor = this._selectedItemColor.ios;
-		}
-		if (this._unSelectedItemColor) {
-			this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
-		}
-	}
-
-	private setIconColor(tabStripItem: TabStripItem, forceReload = false): void {
-		// if there is no change in the css color and there is no item color set
-		// we don't need to reload the icon
-		if (!forceReload && !this._selectedItemColor && !this._unSelectedItemColor) {
-			return;
-		}
-
-		let image: UIImage;
-
-		// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
-		const tabStripColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
-		image = this.getIcon(tabStripItem, tabStripColor);
-
-		tabStripItem.nativeView.image = image;
-	}
-
-	public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		this.setIconColor(tabStripItem, true);
-	}
-
-	public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
-		this.updateItemColors(tabStripItem);
-	}
-
-	public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
-		this.setViewTextAttributes(tabStripItem.label);
-	}
-
-	public getTabBarFontInternal(): UIFont {
-		return this._ios.tabBar.unselectedItemTitleFont;
-	}
-
-	public setTabBarFontInternal(value: Font): void {
-		const defaultTabItemFontSize = 10;
-		const tabItemFontSize = this.tabStrip.style.fontSize || defaultTabItemFontSize;
-		const font: UIFont = (this.tabStrip.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
-
-		this._ios.tabBar.unselectedItemTitleFont = font;
-		this._ios.tabBar.selectedItemTitleFont = font;
-	}
-
-	public getTabBarTextTransform(): Enums.TextTransformType {
-		switch (this._ios.tabBar.titleTextTransform) {
-			case MDCTabBarTextTransform.None:
-				return 'none';
-			case MDCTabBarTextTransform.Automatic:
-				return 'initial';
-			case MDCTabBarTextTransform.Uppercase:
-			default:
-				return 'uppercase';
-		}
-	}
-
-	public setTabBarTextTransform(value: Enums.TextTransformType): void {
-		if (value === 'none') {
-			this._ios.tabBar.titleTextTransform = MDCTabBarTextTransform.None;
-		} else if (value === 'uppercase') {
-			this._ios.tabBar.titleTextTransform = MDCTabBarTextTransform.Uppercase;
-		} else if (value === 'initial') {
-			this._ios.tabBar.titleTextTransform = MDCTabBarTextTransform.Automatic;
-		}
-	}
-
-	public getTabBarColor(): UIColor {
-		return this._ios.tabBar.titleColorForState(MDCTabBarItemState.Normal);
-	}
-
-	public setTabBarColor(value: UIColor | Color): void {
-		const nativeColor = value instanceof Color ? value.ios : value;
-		this._ios.tabBar.setTitleColorForState(nativeColor, MDCTabBarItemState.Normal);
-		this._ios.tabBar.setTitleColorForState(nativeColor, MDCTabBarItemState.Selected);
-	}
-
-	public getTabBarHighlightColor(): UIColor {
-		return this._ios.tabBar.tintColor;
-	}
-
-	public setTabBarHighlightColor(value: UIColor | Color) {
-		const nativeColor = value instanceof Color ? value.ios : value;
-		this._ios.tabBar.tintColor = nativeColor;
-	}
-
-	public getTabBarSelectedItemColor(): Color {
-		return this._selectedItemColor;
-	}
-
-	public setTabBarSelectedItemColor(value: Color) {
-		this._selectedItemColor = value;
-		this.updateAllItemsColors();
-	}
-
-	public getTabBarUnSelectedItemColor(): Color {
-		return this._unSelectedItemColor;
-	}
-
-	public setTabBarUnSelectedItemColor(value: Color) {
-		this._unSelectedItemColor = value;
-		this.updateAllItemsColors();
-	}
-
-	private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {
-		if (view instanceof Frame) {
-			operation(view);
-		}
-		view.eachChild((child) => {
-			this.visitFrames(child, operation);
-
-			return true;
-		});
-	}
-
-	[selectedIndexProperty.setNative](value: number) {
-		// TODO
-		// if (Trace.isEnabled()) {
-		//     Trace.write("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", Trace.categories.Debug);
-		// }
-
-		if (value > -1) {
-			const item = this.items[value];
-			const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(1);
-
-			const itemController = (<any>item).__controller;
-
-			// if (!itemController) {
-			//     itemController = this.getViewController(item);
-			// }
-
-			controllers.addObject(itemController);
-
-			let navigationDirection = UIPageViewControllerNavigationDirection.Forward;
-
-			if (this._currentNativeSelectedIndex && this._currentNativeSelectedIndex > value) {
-				navigationDirection = UIPageViewControllerNavigationDirection.Reverse;
-			}
-
-			this._currentNativeSelectedIndex = value;
-
-			// do not make layout changes while the animation is in progress https://stackoverflow.com/a/47031524/613113
-			this.visitFrames(item, (frame) => (frame._animationInProgress = true));
-
-			const doneAnimating = () => {
-				this.visitFrames(item, (frame) => (frame._animationInProgress = false));
-
-				this._canSelectItem = true;
-				this._setCanBeLoaded(value);
-				this._loadUnloadTabItems(value);
-			};
-
-			invokeOnRunLoop(() =>
-				this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, this.animationEnabled, (finished: boolean) => {
-					if (finished) {
-						if (this.animationEnabled) {
-							// HACK: UIPageViewController fix; see https://stackoverflow.com/a/17330606
-							// Prior Hack fails on iOS 10.3 during tests with v8 engine...
-							// Leaving the above link in case we need to special case this for only iOS > 10.3?
-
-							// HACK: UIPageViewController fix; see https://stackoverflow.com/questions/15325891
-							invokeOnRunLoop(() => {
-								this.viewController.dataSource = null;
-								(<any>this.viewController).dataSource = this.viewController;
-								doneAnimating();
-							});
-						} else {
-							doneAnimating();
-						}
-					}
-				})
-			);
-
-			if (this.tabBarItems && this.tabBarItems.length && this.viewController && this.viewController.tabBar) {
-				this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[value], this.animationEnabled);
-			}
-			// TODO:
-			// (<any>this._ios)._willSelectViewController = this._ios.viewControllers[value];
-			// this._ios.selectedIndex = value;
-		}
-	}
-
-	[itemsProperty.getDefault](): TabContentItem[] {
-		return null;
-	}
-	[itemsProperty.setNative](value: TabContentItem[]) {
-		if (value) {
-			value.forEach((item: TabContentItem, i) => {
-				(<any>item).index = i;
-			});
-		}
-
-		this.setViewControllers(value);
-		selectedIndexProperty.coerce(this);
-	}
-
-	[tabStripProperty.getDefault](): TabStrip {
-		return null;
-	}
-	[tabStripProperty.setNative](value: TabStrip) {
-		this.setViewControllers(this.items);
-		selectedIndexProperty.coerce(this);
-	}
-
-	[swipeEnabledProperty.getDefault](): boolean {
-		return true;
-	}
-	[swipeEnabledProperty.setNative](value: boolean) {
-		if (this.viewController && this.viewController.scrollView) {
-			this.viewController.scrollView.scrollEnabled = value;
-		}
-	}
-
-	[iOSTabBarItemsAlignmentProperty.getDefault](): IOSTabBarItemsAlignment {
-		if (!this.viewController || !this.viewController.tabBar) {
-			return 'justified';
-		}
-
-		const alignment = this.viewController.tabBar.alignment.toString();
-
-		return <any>(alignment.charAt(0).toLowerCase() + alignment.substring(1));
-	}
-	[iOSTabBarItemsAlignmentProperty.setNative](value: IOSTabBarItemsAlignment) {
-		if (!this.viewController || !this.viewController.tabBar) {
-			return;
-		}
-
-		let alignment = MDCTabBarAlignment.Justified;
-		switch (value) {
-			case 'leading':
-				alignment = MDCTabBarAlignment.Leading;
-				break;
-			case 'center':
-				alignment = MDCTabBarAlignment.Center;
-				break;
-			case 'centerSelected':
-				alignment = MDCTabBarAlignment.CenterSelected;
-				break;
-		}
-
-		this.viewController.tabBar.alignment = alignment;
-	}
-
-	private setViewTextAttributes(view: View, setSelected = false): any {
-		if (!view) {
-			return null;
-		}
-
-		const defaultTabItemFontSize = 10;
-		const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize;
-		const font: UIFont = (view.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
-
-		this.viewController.tabBar.unselectedItemTitleFont = font;
-		this.viewController.tabBar.selectedItemTitleFont = font;
-
-		const tabItemTextColor = view.style.color;
-		const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
-
-		if (textColor) {
-			this.viewController.tabBar.setTitleColorForState(textColor, MDCTabBarItemState.Normal);
-			this.viewController.tabBar.setImageTintColorForState(textColor, MDCTabBarItemState.Normal);
-
-			if (setSelected) {
-				this.viewController.tabBar.setTitleColorForState(textColor, MDCTabBarItemState.Selected);
-				this.viewController.tabBar.setImageTintColorForState(textColor, MDCTabBarItemState.Selected);
-			}
-		}
-
-		if (this._selectedItemColor) {
-			this.viewController.tabBar.selectedItemTintColor = this._selectedItemColor.ios;
-		}
-		if (this._unSelectedItemColor) {
-			this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
-		}
-	}
-}
diff --git a/packages/core/ui/tabs/tabs-common.ts b/packages/core/ui/tabs/tabs-common.ts
deleted file mode 100644
index efca84bbe..000000000
--- a/packages/core/ui/tabs/tabs-common.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// Types
-import { Tabs as TabsDefinition } from '.';
-
-// Requires
-import { TabNavigationBase } from '../tab-navigation-base/tab-navigation-base';
-import { CSSType } from '../core/view';
-import { booleanConverter } from '../core/view-base';
-import { Property } from '../core/properties';
-
-export * from '../tab-navigation-base/tab-content-item';
-export * from '../tab-navigation-base/tab-navigation-base';
-export * from '../tab-navigation-base/tab-strip';
-export * from '../tab-navigation-base/tab-strip-item';
-
-export const traceCategory = 'Tabs';
-
-@CSSType('Tabs')
-export class TabsBase extends TabNavigationBase implements TabsDefinition {
-	public swipeEnabled: boolean;
-	public offscreenTabLimit: number;
-	public tabsPosition: 'top' | 'bottom';
-	public iOSTabBarItemsAlignment: IOSTabBarItemsAlignment;
-}
-
-// TODO: Add Unit tests
-export const swipeEnabledProperty = new Property<TabsBase, boolean>({
-	name: 'swipeEnabled',
-	defaultValue: true,
-	valueConverter: booleanConverter,
-});
-swipeEnabledProperty.register(TabsBase);
-
-// TODO: Add Unit tests
-// TODO: Coerce to max number of items?
-export const offscreenTabLimitProperty = new Property<TabsBase, number>({
-	name: 'offscreenTabLimit',
-	defaultValue: 1,
-	valueConverter: (v) => parseInt(v),
-});
-offscreenTabLimitProperty.register(TabsBase);
-
-export const tabsPositionProperty = new Property<TabsBase, 'top' | 'bottom'>({
-	name: 'tabsPosition',
-	defaultValue: 'top',
-});
-tabsPositionProperty.register(TabsBase);
-
-export type IOSTabBarItemsAlignment = 'leading' | 'justified' | 'center' | 'centerSelected';
-export const iOSTabBarItemsAlignmentProperty = new Property<TabsBase, IOSTabBarItemsAlignment>({ name: 'iOSTabBarItemsAlignment', defaultValue: 'justified' });
-iOSTabBarItemsAlignmentProperty.register(TabsBase);
-
-export const animationEnabledProperty = new Property<TabsBase, boolean>({ name: 'animationEnabled', defaultValue: true, valueConverter: booleanConverter });
-animationEnabledProperty.register(TabsBase);