From 5a3b9d5e16c801c4eb005c81c3c30d16d4e17499 Mon Sep 17 00:00:00 2001
From: Martin Guillon <martin.guillon@akylas.fr>
Date: Sat, 12 Sep 2020 15:18:08 +0200
Subject: [PATCH] finish removal of Tabs component

---
 apps/automated/src/test-runner.ts             |   9 -
 .../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 -----------------
 .../tabs/tabs-tests.e2e-spec.ts               | 370 ------------------
 .../tabs/tabs-view-base-page.ts               |  39 --
 apps/ui/src/bottom-navigation/events-page.ts  |   8 +-
 apps/ui/src/main-page.ts                      |   1 -
 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   |   3 -
 .../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.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                 |  38 --
 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.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/ui/index.ts                     |   1 -
 .../tab-strip-item/index.ts                   |   2 -
 67 files changed, 4 insertions(+), 2881 deletions(-)
 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/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/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.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.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

diff --git a/apps/automated/src/test-runner.ts b/apps/automated/src/test-runner.ts
index 015b82477..06d046475 100644
--- a/apps/automated/src/test-runner.ts
+++ b/apps/automated/src/test-runner.ts
@@ -200,15 +200,6 @@ export function isRunningOnEmulator(): boolean {
 // TODO: uncomment this
 // allTests["BOTTOM-NAVIGATION-NAVIGATION"] = bottomNavigationNavigationTests;
 
-	import * as tabsTests from './ui/tabs/tabs-tests';
-	allTests['TABS'] = tabsTests;
-
-	import * as tabsTestsNew from './ui/tabs/tabs-tests-new';
-	allTests['TABS-NEW'] = tabsTestsNew;
-
-	import * as tabsNavigationTests from './ui/tabs/tabs-navigation-tests';
-	allTests['TABS-NAVIGATION'] = tabsNavigationTests;
-
 	import * as tabViewTests from './ui/tab-view/tab-view-tests';
 	allTests['TAB-VIEW'] = tabViewTests;
 
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/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/events-page.ts b/apps/ui/src/bottom-navigation/events-page.ts
index 3d02e8cf5..2e02b7bb0 100644
--- a/apps/ui/src/bottom-navigation/events-page.ts
+++ b/apps/ui/src/bottom-navigation/events-page.ts
@@ -1,25 +1,25 @@
 import { EventData } from '@nativescript/core/data/observable';
 import { Page } from '@nativescript/core/ui/page';
-import { Tabs, SelectedIndexChangedEventData } from '@nativescript/core/ui/tabs';
+import { BottomNavigation, SelectedIndexChangedEventData } from '@nativescript/core/ui/bottom-navigation';
 
 export function goToFirst(args: EventData) {
 	console.log('---> goToFirst');
 	const page = <Page>(<any>args.object).page;
-	const bottomNav = <Tabs>page.getViewById('bottomNav');
+	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 = <Tabs>page.getViewById('bottomNav');
+	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 = <Tabs>page.getViewById('bottomNav');
+	const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
 	bottomNav.selectedIndex = 2;
 }
 
diff --git a/apps/ui/src/main-page.ts b/apps/ui/src/main-page.ts
index ac8e02958..ce4b0a356 100644
--- a/apps/ui/src/main-page.ts
+++ b/apps/ui/src/main-page.ts
@@ -12,7 +12,6 @@ export function pageLoaded(args: EventData) {
 	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 f0c7c0c06..000000000
--- a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
+++ /dev/null
@@ -1,3 +0,0 @@
-<Page class="page" >
-    <Label text="Inner label 1" backgroundColor="blue"/>
-</Page>
\ No newline at end of file
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.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 df5477457..000000000
--- a/apps/ui/src/tabs/main-page.ts
+++ /dev/null
@@ -1,38 +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('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.xml b/apps/ui/src/tabs/swipe-disabled-page.xml
deleted file mode 100644
index 5799d7393..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>
-      <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 914d7755c..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>
-      <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/ui/index.ts b/packages/core/ui/index.ts
index 4304ae45c..8a0795a2e 100644
--- a/packages/core/ui/index.ts
+++ b/packages/core/ui/index.ts
@@ -73,7 +73,6 @@ export { TabStrip } from './tab-navigation-base/tab-strip';
 export type { TabStripItemEventData } from './tab-navigation-base/tab-strip';
 export { TabStripItem } from './tab-navigation-base/tab-strip-item';
 export { TabView, TabViewItem } from './tab-view';
-export { Tabs } from './tabs';
 export { TextBase, getTransformedText, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, whiteSpaceProperty, lineHeightProperty } from './text-base';
 export type { TextTransform } from './text-base';
 export { FormattedString } from './text-base/formatted-string';
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
index 32a555709..54b1b727a 100644
--- a/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts
+++ b/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts
@@ -246,8 +246,6 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
 			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 {