From 43534502f906682abd82f0ce80c8ffe4e2f94c68 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Fri, 28 Jun 2019 10:07:33 +0300
Subject: [PATCH] feat: add background color css to tab strip (#7414)

---
 .../background-color-page.css                 |  7 ++
 .../background-color-page.xml                 |  6 +-
 .../app/bottom-navigation/color-page.xml      | 16 ++--
 .../app/bottom-navigation/icon-change-page.ts |  2 +-
 .../bottom-navigation/icon-change-page.xml    |  2 +-
 .../icon-title-placement-page.xml             |  6 +-
 .../app/bottom-navigation/issue-5470-page.xml |  2 +-
 .../app/tabs/background-color-page.css        |  7 ++
 .../app/tabs/background-color-page.xml        | 22 ++---
 e2e/ui-tests-app/app/tabs/color-page.xml      | 22 ++---
 e2e/ui-tests-app/app/tabs/default-page.ts     | 10 +--
 e2e/ui-tests-app/app/tabs/default-page.xml    |  4 +-
 e2e/ui-tests-app/app/tabs/icon-change-page.ts |  8 +-
 .../app/tabs/icon-change-page.xml             |  8 +-
 .../app/tabs/icon-title-placement-page.xml    | 30 +++----
 e2e/ui-tests-app/app/tabs/issue-5470-page.xml |  8 +-
 e2e/ui-tests-app/app/tabs/main-page.ts        | 14 +--
 e2e/ui-tests-app/app/tabs/tabs-page.ts        | 17 ++++
 e2e/ui-tests-app/app/tabs/tabs-page.xml       | 89 +++++++++++++++++++
 .../bottom-navigation.android.ts              | 30 ++++++-
 .../bottom-navigation.ios.ts                  | 13 +++
 .../tab-navigation-base.d.ts                  | 12 +++
 .../tab-navigation-base.ts                    | 17 +++-
 .../tab-strip/tab-strip.d.ts                  |  6 +-
 .../tab-strip/tab-strip.ts                    | 28 +++++-
 tns-core-modules/ui/tabs/tabs.android.ts      | 25 ++++++
 tns-core-modules/ui/tabs/tabs.ios.ts          | 11 +++
 27 files changed, 334 insertions(+), 88 deletions(-)
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/background-color-page.css
 create mode 100644 e2e/ui-tests-app/app/tabs/background-color-page.css
 create mode 100644 e2e/ui-tests-app/app/tabs/tabs-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/tabs-page.xml

diff --git a/e2e/ui-tests-app/app/bottom-navigation/background-color-page.css b/e2e/ui-tests-app/app/bottom-navigation/background-color-page.css
new file mode 100644
index 000000000..27ce526db
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/background-color-page.css
@@ -0,0 +1,7 @@
+BottomNavigation {
+  background-color: gold;
+}
+
+TabStrip {
+  background-color: skyblue;
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml b/e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
index a931de491..8c771d54f 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
@@ -3,7 +3,7 @@
   <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation style="background-color: green;">
+  <BottomNavigation>
     <TabStrip>
         <TabStripItem title="First"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>
@@ -11,13 +11,13 @@
 
     <TabContentItem>
         <GridLayout>
-          <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          <Label text="First View" />
         </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
         <GridLayout>
-          <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          <Label text="Second View" />
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/color-page.xml b/e2e/ui-tests-app/app/bottom-navigation/color-page.xml
index b174dcfba..ea3ab58d7 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/color-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/color-page.xml
@@ -4,20 +4,20 @@
 
   <BottomNavigation style="color: green;">
     <TabStrip>
-        <TabStripItem title="First"></TabStripItem>
-        <TabStripItem title="Second"></TabStripItem>
+      <TabStripItem title="First"></TabStripItem>
+      <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="First View" />
+      </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="Second View" />
+      </GridLayout>
     </TabContentItem>
   </BottomNavigation>
 </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts b/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
index 5301c28e9..199c5c566 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
+++ b/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
@@ -1,7 +1,7 @@
 import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
 
 export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-    const bottomNav = args.object as BottomNavigation;
+    const bottomNav = <BottomNavigation>args.object;
     
     const newItem = bottomNav.tabStrip.items[args.newIndex];
     if (newItem) {
diff --git a/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml b/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
index 4b77e353a..014b9a249 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
@@ -1,4 +1,4 @@
- <Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
     <ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
     </ActionBar>
 
diff --git a/e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml b/e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml
index 36b74e3f0..d3b604304 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml
@@ -11,19 +11,19 @@
 
     <TabContentItem>
         <GridLayout>
-          <Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
+          <Label text="Title and icon" />
         </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
         <GridLayout>
-          <Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
+          <Label text="Only icon" />
         </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
         <GridLayout>
-          <Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
+          <Label text="Only title" />
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml b/e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml
index c1f8d3785..c5993a4d8 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml
@@ -23,5 +23,5 @@
             </GridLayout>
         </TabContentItem>
     </BottomNavigation>
-    
+
 </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/background-color-page.css b/e2e/ui-tests-app/app/tabs/background-color-page.css
new file mode 100644
index 000000000..6c53c0e65
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/background-color-page.css
@@ -0,0 +1,7 @@
+Tabs {
+  background-color: gold;
+}
+
+TabStrip {
+  background-color: skyblue;
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/background-color-page.xml b/e2e/ui-tests-app/app/tabs/background-color-page.xml
index a931de491..12860bc43 100644
--- a/e2e/ui-tests-app/app/tabs/background-color-page.xml
+++ b/e2e/ui-tests-app/app/tabs/background-color-page.xml
@@ -1,24 +1,24 @@
 <Page class="page">
 
-  <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
+  <ActionBar title="Tabs background-color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation style="background-color: green;">
+  <Tabs>
     <TabStrip>
-        <TabStripItem title="First"></TabStripItem>
-        <TabStripItem title="Second"></TabStripItem>
+      <TabStripItem title="First"></TabStripItem>
+      <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="First View" />
+      </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="Second View" />
+      </GridLayout>
     </TabContentItem>
-  </BottomNavigation>
+  </Tabs>
 </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/color-page.xml b/e2e/ui-tests-app/app/tabs/color-page.xml
index b174dcfba..a0dfb57aa 100644
--- a/e2e/ui-tests-app/app/tabs/color-page.xml
+++ b/e2e/ui-tests-app/app/tabs/color-page.xml
@@ -1,23 +1,23 @@
 <Page class="page">
-  <ActionBar title="BottomNavigation color" icon="" class="action-bar">
+  <ActionBar title="Tabs color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation style="color: green;">
+  <Tabs style="color: green;">
     <TabStrip>
-        <TabStripItem title="First"></TabStripItem>
-        <TabStripItem title="Second"></TabStripItem>
+      <TabStripItem title="First"></TabStripItem>
+      <TabStripItem title="Second"></TabStripItem>
     </TabStrip>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="First View" />
+      </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="Second View" />
+      </GridLayout>
     </TabContentItem>
-  </BottomNavigation>
+  </Tabs>
 </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/default-page.ts b/e2e/ui-tests-app/app/tabs/default-page.ts
index 6ef17fcfa..50e5c8233 100644
--- a/e2e/ui-tests-app/app/tabs/default-page.ts
+++ b/e2e/ui-tests-app/app/tabs/default-page.ts
@@ -1,17 +1,17 @@
 import { EventData } from "tns-core-modules/data/observable";
 import { Page } from "tns-core-modules/ui/page";
-import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
+import { Tabs } from "tns-core-modules/ui/tabs";
 
 export function goToFirst(args: EventData) {
     const page = <Page>(<any>args.object).page;
-    const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+    const tabsNav = <Tabs>page.getViewById("tabsNav");
 
-    bottomNav.selectedIndex = 0;
+    tabsNav.selectedIndex = 0;
 }
 
 export function goToSecond(args: EventData) {
   const page = <Page>(<any>args.object).page;
-  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
 
-  bottomNav.selectedIndex = 1;
+  tabsNav.selectedIndex = 1;
 }
diff --git a/e2e/ui-tests-app/app/tabs/default-page.xml b/e2e/ui-tests-app/app/tabs/default-page.xml
index 260450593..396478113 100644
--- a/e2e/ui-tests-app/app/tabs/default-page.xml
+++ b/e2e/ui-tests-app/app/tabs/default-page.xml
@@ -1,6 +1,6 @@
 <Page>
 
-  <ActionBar title="BottomNavigation" icon="" class="action-bar">
+  <ActionBar title="Tabs" icon="" class="action-bar">
   </ActionBar>
 
   <!-- w/o TabStrip -->
@@ -18,7 +18,7 @@
   </BottomNavigation> -->
 
   <!-- w/ TabStrip -->
-  <Tabs id="bottomNav">
+  <Tabs id="tabsNav">
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
diff --git a/e2e/ui-tests-app/app/tabs/icon-change-page.ts b/e2e/ui-tests-app/app/tabs/icon-change-page.ts
index 5301c28e9..1a466d6a6 100644
--- a/e2e/ui-tests-app/app/tabs/icon-change-page.ts
+++ b/e2e/ui-tests-app/app/tabs/icon-change-page.ts
@@ -1,14 +1,14 @@
-import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
+import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
 
 export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
-    const bottomNav = args.object as BottomNavigation;
+    const tabsNav = <Tabs>args.object;
     
-    const newItem = bottomNav.tabStrip.items[args.newIndex];
+    const newItem = tabsNav.tabStrip.items[args.newIndex];
     if (newItem) {
         newItem.iconSource = "res://icon";
     }
 
-    const oldItem = bottomNav.tabStrip.items[args.oldIndex];
+    const oldItem = tabsNav.tabStrip.items[args.oldIndex];
     if (oldItem) {
         oldItem.iconSource = "res://testlogo";
     }
diff --git a/e2e/ui-tests-app/app/tabs/icon-change-page.xml b/e2e/ui-tests-app/app/tabs/icon-change-page.xml
index 4b77e353a..e6ddb809f 100644
--- a/e2e/ui-tests-app/app/tabs/icon-change-page.xml
+++ b/e2e/ui-tests-app/app/tabs/icon-change-page.xml
@@ -1,8 +1,8 @@
- <Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
-    <ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
+    <ActionBar title="Tabs icon change" icon="" class="action-bar">
     </ActionBar>
 
-    <BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
+    <Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
         <TabStrip>
             <TabStripItem iconSource="res://icon"></TabStripItem>
             <TabStripItem iconSource="res://testlogo"></TabStripItem>
@@ -19,5 +19,5 @@
                 <Label text="second tab"/>
             </GridLayout>
         </TabContentItem>
-    </BottomNavigation>
+    </Tabs>
 </Page> 
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml b/e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml
index 36b74e3f0..4caed0e7e 100644
--- a/e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml
+++ b/e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml
@@ -1,30 +1,30 @@
 <Page class="page">
-  <ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
+  <ActionBar title="Tabs icon title placement" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <Tabs>
     <TabStrip>
-        <TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
-        <TabStripItem iconSource="res://add_to_fav"></TabStripItem>
-        <TabStripItem title="Title"></TabStripItem>
+      <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" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="Title and icon" />
+      </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="Only icon" />
+      </GridLayout>
     </TabContentItem>
 
     <TabContentItem>
-        <GridLayout>
-          <Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
-        </GridLayout>
+      <GridLayout>
+        <Label text="Only title" />
+      </GridLayout>
     </TabContentItem>
-  </BottomNavigation>
+  </Tabs>
 </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/issue-5470-page.xml b/e2e/ui-tests-app/app/tabs/issue-5470-page.xml
index c1f8d3785..a47f48d18 100644
--- a/e2e/ui-tests-app/app/tabs/issue-5470-page.xml
+++ b/e2e/ui-tests-app/app/tabs/issue-5470-page.xml
@@ -1,9 +1,9 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
 
-    <ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
+    <ActionBar title="Tabs issue 5470" icon="" class="action-bar">
     </ActionBar>
 
-    <BottomNavigation>
+    <Tabs>
         <TabStrip>
             <TabStripItem title="Tab1"></TabStripItem>
             <TabStripItem title="Tab2"></TabStripItem>
@@ -22,6 +22,6 @@
                 <StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
             </GridLayout>
         </TabContentItem>
-    </BottomNavigation>
-    
+    </Tabs>
+
 </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
index d34357eec..b7d492781 100644
--- a/e2e/ui-tests-app/app/tabs/main-page.ts
+++ b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -11,14 +11,14 @@ export function pageLoaded(args: EventData) {
 
 export function loadExamples() {
     const examples = new Map<string, string>();    
-    examples.set("default", "tabs/default-page");
-    examples.set("issue-5470", "tabs/issue-5470-page");
+    examples.set("tabs", "tabs/tabs-page");
+    examples.set("issue-5470", "tabs/issue-5470");
     examples.set("background-color", "tabs/background-color-page");
-    examples.set("color", "tabs/color-page");
-    examples.set("icon-title-placement", "tabs/icon-title-placement-page");
-    examples.set("icon-change", "tabs/icon-change-page");
-    examples.set("swipe-enabled", "tabs/swipe-enabled-page");
-    examples.set("tabs-position", "tabs/tabs-position-page");
+    examples.set("color", "tabs/color");
+    examples.set("icon-title-placement", "tabs/icon-title-placement");
+    examples.set("icon-change", "tabs/icon-change");
+    examples.set("swipe-enabled", "tabs/swipe-enabled");
+    examples.set("tabs-position", "tabs/tabs-position");
     
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/tabs/tabs-page.ts b/e2e/ui-tests-app/app/tabs/tabs-page.ts
new file mode 100644
index 000000000..50e5c8233
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/tabs-page.ts
@@ -0,0 +1,17 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Tabs } from "tns-core-modules/ui/tabs";
+
+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/e2e/ui-tests-app/app/tabs/tabs-page.xml b/e2e/ui-tests-app/app/tabs/tabs-page.xml
new file mode 100644
index 000000000..396478113
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/tabs-page.xml
@@ -0,0 +1,89 @@
+<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">
+    <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>
\ No newline at end of file
diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
index b6a823cee..11d7d7ce6 100644
--- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
+++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
@@ -5,7 +5,7 @@ import { TabContentItem } from "../tab-navigation-base/tab-content-item";
 
 // Requires
 import { TabNavigationBase, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
-import { CSSType } from "../core/view";
+import { CSSType, Color } from "../core/view";
 import { Frame } from "../frame";
 import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
 import { fromFileOrResource } from "../../image-source";
@@ -352,6 +352,11 @@ export class BottomNavigation extends TabNavigationBase {
             });
 
             this._bottomNavigationBar.setItems(tabItems);
+            this.tabStrip.setNativeView(this._bottomNavigationBar);
+            this.tabStrip.items.forEach((item, i, arr) => {
+                const tv = this._bottomNavigationBar.getTextViewForItemAt(i);
+                item.setNativeView(tv);
+            });
         }
     }
 
@@ -359,6 +364,18 @@ export class BottomNavigation extends TabNavigationBase {
         this._bottomNavigationBar.updateItemAt(index, spec);
     }
 
+    public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
+        return this._bottomNavigationBar.getBackground();
+    }
+
+    public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
+        if (value instanceof Color) {
+            this._bottomNavigationBar.setBackgroundColor(value.android);
+        } else {
+            this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+        }
+    }
+
     [selectedIndexProperty.setNative](value: number) {
         // const smoothScroll = false;
 
@@ -383,3 +400,14 @@ export class BottomNavigation extends TabNavigationBase {
         this.setAdapterItems([]);
     }
 }
+
+function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
+    if (value) {
+        const constantState = value.getConstantState();
+        if (constantState) {
+            return constantState.newDrawable(resources);
+        }
+    }
+
+    return value;
+}
diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
index c46f61a2f..c24dbb48f 100644
--- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
+++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
@@ -277,6 +277,14 @@ export class BottomNavigation extends TabNavigationBase {
         super.onSelectedIndexChanged(oldIndex, newIndex);
     }
 
+    public getTabBarBackgroundColor(): UIColor {
+        return this._ios.tabBar.barTintColor;
+    }
+
+    public setTabBarBackgroundColor(value: UIColor | Color): void {
+        this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+    }
+
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
         const width = layout.getMeasureSpecSize(widthMeasureSpec);
         const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -384,6 +392,10 @@ export class BottomNavigation extends TabNavigationBase {
         const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
         const states = getTitleAttributesForStates(this);
 
+        if (this.tabStrip) {
+            this.tabStrip.setNativeView(this._ios.tabBar);
+        }
+
         items.forEach((item, i) => {
             const controller = this.getViewController(item);
 
@@ -401,6 +413,7 @@ export class BottomNavigation extends TabNavigationBase {
                 applyStatesToItem(tabBarItem, states);
 
                 controller.tabBarItem = tabBarItem;
+                tabStripItem.setNativeView(tabBarItem);
             }
 
             controllers.addObject(controller);
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts b/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
index c98ef710f..30642fb96 100644
--- a/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
+++ b/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
@@ -82,6 +82,18 @@ export class TabNavigationBase extends View {
      * Method is intended to be overridden by inheritors and used as "protected"
      */
     onSelectedIndexChanged(oldIndex: number, newIndex: number): void;
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarBackgroundColor(): any
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarBackgroundColor(value: any): void
 }
 
 export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>;
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
index de86890cf..b85c6f944 100644
--- a/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
+++ b/tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
@@ -34,9 +34,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
             }
             this.items.push(<TabContentItem>value);
             this._addView(value);
-            selectedIndexProperty.coerce(this);
+            // selectedIndexProperty.coerce(this);
         } else if (name === "TabStrip") {
             this.tabStrip = value;
+            this._addView(value);
         }
     }
 
@@ -59,6 +60,11 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
                 callback(item);
             });
         }
+
+        const tabStrip = this.tabStrip;
+        if (tabStrip) {
+            callback(tabStrip);
+        }
     }
 
     public eachChildView(callback: (child: View) => boolean) {
@@ -102,6 +108,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         // to be overridden in platform specific files
         this.notify(<SelectedIndexChangedEventData>{ eventName: TabNavigationBase.selectedIndexChangedEvent, object: this, oldIndex, newIndex });
     }
+
+    public getTabBarBackgroundColor(): any {
+        // overridden by inheritors
+        return null;
+    }
+
+    public setTabBarBackgroundColor(value: any): void {
+        // overridden by inheritors
+    }
 }
 
 export interface TabNavigationBase {
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts
index f6a043a1c..d6b5dc041 100644
--- a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts
+++ b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts
@@ -3,13 +3,15 @@
  * @module "ui/tab-navigation/tab-strip"
  */ /** */
 
-import { ViewBase, Property } from "../../core/view";
+import { View, Property } from "../../core/view";
+import { Color } from "../../../color";
 import { TabStripItem } from "../tab-strip-item";
 
 /**
  * Represents a tab strip.
  */
-export class TabStrip extends ViewBase {
+export class TabStrip extends View {
+
     /**
      * Gets or sets the items of the tab strip.
      */
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
index 2be31d8b5..9146370da 100644
--- a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
+++ b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
@@ -1,15 +1,17 @@
-// Types
+// Types
 import { TabStrip as TabStripDefinition } from ".";
 import { TabStripItem } from "../tab-strip-item";
+import { TabNavigationBase } from "../tab-navigation-base";
+import { Color } from "../../../color";
 import { AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
 
 // Requires
-import { ViewBase, Property, CSSType } from "../../core/view";
+import { View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty } from "../../core/view";
 
 export const traceCategory = "TabView";
 
 @CSSType("TabStrip")
-export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
+export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
     public items: TabStripItem[];
     public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
 
@@ -29,7 +31,25 @@ export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFr
             // selectedIndexProperty.coerce(this);
         }
     }
-}
+
+    [backgroundColorProperty.getDefault](): Color {
+        const parent = <TabNavigationBase>this.parent;
+
+        return parent && parent.getTabBarBackgroundColor();
+    }
+    [backgroundColorProperty.setNative](value: Color) {
+        const parent = <TabNavigationBase>this.parent;
+        
+        return parent && parent.setTabBarBackgroundColor(value);
+    }
+
+    [backgroundInternalProperty.getDefault](): any {
+        return null;
+    }
+    [backgroundInternalProperty.setNative](value: any) {
+        // disable the background CSS properties
+    }
+} 
 
 export const iosIconRenderingModeProperty = new Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "automatic" });
 iosIconRenderingModeProperty.register(TabStrip);
diff --git a/tns-core-modules/ui/tabs/tabs.android.ts b/tns-core-modules/ui/tabs/tabs.android.ts
index 84c886231..d521b0b47 100644
--- a/tns-core-modules/ui/tabs/tabs.android.ts
+++ b/tns-core-modules/ui/tabs/tabs.android.ts
@@ -7,6 +7,7 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
 import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
 import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
 import { Frame } from "../frame";
+import { Color } from "../core/view";
 import { fromFileOrResource } from "../../image-source";
 import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
 import * as application from "../../application";
@@ -529,6 +530,7 @@ export class Tabs extends TabsBase {
 
         const tabLayout = this._tabLayout;
         tabLayout.setItems(tabItems, this._viewPager);
+        this.tabStrip.setNativeView(tabLayout);
         items.forEach((item, i, arr) => {
             const tv = tabLayout.getTextViewForItemAt(i);
             item.setNativeView(tv);
@@ -569,6 +571,18 @@ export class Tabs extends TabsBase {
         this._tabLayout.updateItemAt(index, spec);
     }
 
+    public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
+        return this._tabLayout.getBackground();
+    }
+
+    public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
+        if (value instanceof Color) {
+            this._tabLayout.setBackgroundColor(value.android);
+        } else {
+            this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+        }
+    }
+
     [selectedIndexProperty.setNative](value: number) {
         const smoothScroll = true;
 
@@ -610,3 +624,14 @@ export class Tabs extends TabsBase {
         this._viewPager.setOffscreenPageLimit(value);
     }
 }
+
+function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
+    if (value) {
+        const constantState = value.getConstantState();
+        if (constantState) {
+            return constantState.newDrawable(resources);
+        }
+    }
+
+    return value;
+}
diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts
index 1fbffb373..eb245cc5e 100644
--- a/tns-core-modules/ui/tabs/tabs.ios.ts
+++ b/tns-core-modules/ui/tabs/tabs.ios.ts
@@ -8,6 +8,7 @@ import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-n
 import { TabsBase, swipeEnabledProperty } from "./tabs-common";
 import { Frame } from "../frame";
 import { ios as iosView, View } from "../core/view";
+import { Color } from "../../color";
 import { /*ios as iosUtils,*/ layout } from "../../utils/utils";
 // import { device } from "../../platform";
 import { fromFileOrResource } from "../../image-source";
@@ -845,11 +846,13 @@ export class Tabs extends TabsBase {
         items.forEach((item: TabStripItem, i, arr) => {
             const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0);
             tabBarItems.push(tabBarItem);
+            item.setNativeView(tabBarItem);
         });
         this.tabBarItems = tabBarItems;
 
         if (this.viewController && this.viewController.tabBar) {
             this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems);
+            this.tabStrip.setNativeView(this.viewController.tabBar);
         }
 
         // tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
@@ -934,6 +937,14 @@ export class Tabs extends TabsBase {
     //     this._updateIOSTabBarColorsAndFonts();
     // }
 
+    public getTabBarBackgroundColor(): UIColor {
+        return this._ios.tabBar.barTintColor;
+    }
+
+    public setTabBarBackgroundColor(value: UIColor | Color): void {
+        this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+    }
+
     [selectedIndexProperty.setNative](value: number) {
         // TODO
         // if (traceEnabled()) {