From fc8f7696e6931553bd0cb83ba3cdd1e93e3c469e Mon Sep 17 00:00:00 2001
From: Vasil Trifonov <v.trifonov@gmail.com>
Date: Thu, 2 Apr 2020 11:59:19 +0300
Subject: [PATCH] fix(tabs): dynamic styling fixes (#8479)

* fix(tabs): dynamic styling fixes - iconSource
selectedItemColor and unSelectedItemColor

* fix(tabs): bottom nav item color fix

* chore: remove unneeded method calls

* chore: remove unneeded console.log

* fix: fixing build

* fix(tabs): resources passing

* fix(tabs): setting item colors

* test: updated dynamic color tests

* chore: fix automationText
---
 api-reports/NativeScript.api.md               |  2 +
 .../dynamic-color-change-page.css             |  7 ++-
 .../dynamic-color-change-page.ts              | 31 ++++++++++++-
 .../dynamic-color-change-page.xml             |  3 +-
 .../app/tabs/dynamic-color-change-page.css    |  7 ++-
 .../app/tabs/dynamic-color-change-page.ts     | 33 +++++++++++++-
 .../app/tabs/dynamic-color-change-page.xml    |  5 ++-
 .../bottom-navigation.e2e-spec.ts             | 21 ++++++++-
 .../tabs/tabs-tests.e2e-spec.ts               | 21 ++++++++-
 .../bottom-navigation.android.ts              | 33 ++++++++------
 .../bottom-navigation.ios.ts                  | 43 +++++++++++++++++--
 .../tab-navigation-base.d.ts                  |  6 +++
 .../tab-navigation-base.ts                    |  4 ++
 .../tab-strip-item/tab-strip-item.ts          |  2 +-
 .../ui/tab-view/tab-view.android.ts           |  2 +-
 nativescript-core/ui/tabs/tabs.android.ts     | 17 +++++---
 nativescript-core/ui/tabs/tabs.ios.ts         | 28 ++++++++++--
 17 files changed, 224 insertions(+), 41 deletions(-)

diff --git a/api-reports/NativeScript.api.md b/api-reports/NativeScript.api.md
index 4689936ad..f8662a406 100644
--- a/api-reports/NativeScript.api.md
+++ b/api-reports/NativeScript.api.md
@@ -2258,6 +2258,8 @@ export class TabNavigationBase extends View {
 
     setTabBarIconColor(tabStripItem: TabStripItem, value: any): void
 
+    setTabBarIconSource(tabStripItem: TabStripItem, value: any): void
+
     setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: any): void
 
     setTabBarItemColor(tabStripItem: TabStripItem, value: any): void
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
index 46d672d3e..7b8624417 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
@@ -10,14 +10,17 @@ TabStripItem:active {
     background-color: magenta;
 }
 
-.defaultCssClass {
+.tabsClass0 {
+}
+
+.tabsClass1 {
     background-color: #79d2a6;
     highlight-color: green;
     selected-item-color: yellow;
     un-selected-item-color: blue;
 }
 
-.newTabsClass {
+.tabsClass2 {
     background-color: orangered;
     highlight-color: lightgreen;
     selected-item-color: whitesmoke;
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
index a815c39a3..30fa51567 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
@@ -6,5 +6,34 @@ export function onButtonTap(args) {
     const page = <Page>(<View>args.object).page;
     const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
 
-    bottomNavigation.tabStrip.className = "newTabsClass";
+    switch (bottomNavigation.tabStrip.className) {
+        case "tabsClass0":
+            bottomNavigation.tabStrip.className = "tabsClass1";
+            break;
+        case "tabsClass1":
+            bottomNavigation.tabStrip.className = "tabsClass2";
+            break;
+        case "tabsClass2":
+            bottomNavigation.tabStrip.className = "tabsClass0";
+            break;
+    }
+}
+
+export function onChangeIconSourceTap(args) {
+    const page = <Page>(<View>args.object).page;
+    const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
+
+    const tabStripItem0 = bottomNavigation.tabStrip.items[0];
+    const tabStripItem1 = bottomNavigation.tabStrip.items[1];
+    const tabStripItem2 = bottomNavigation.tabStrip.items[2];
+
+    const iconSource0 = tabStripItem0.iconSource;
+
+    tabStripItem0.iconSource = tabStripItem1.iconSource;
+
+    tabStripItem1.iconClass = "font-awesome font-size";
+    tabStripItem1.iconSource = tabStripItem2.iconSource;
+
+    tabStripItem2.iconClass = "font-awesome font-size";
+    tabStripItem2.iconSource = iconSource0;
 }
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
index f76227b01..989fab9ed 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
@@ -2,10 +2,11 @@
   <GridLayout rows="auto,*">
     <StackLayout row="0" >
         <Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
+        <Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
     </StackLayout>
     <GridLayout row="1">
         <BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
-            <TabStrip class="defaultCssClass">
+            <TabStrip class="tabsClass0">
                 <TabStripItem>
                     <Label text="Home"></Label>
                     <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
index 46d672d3e..7b8624417 100644
--- a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
@@ -10,14 +10,17 @@ TabStripItem:active {
     background-color: magenta;
 }
 
-.defaultCssClass {
+.tabsClass0 {
+}
+
+.tabsClass1 {
     background-color: #79d2a6;
     highlight-color: green;
     selected-item-color: yellow;
     un-selected-item-color: blue;
 }
 
-.newTabsClass {
+.tabsClass2 {
     background-color: orangered;
     highlight-color: lightgreen;
     selected-item-color: whitesmoke;
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
index 3e22ffbc3..bf15cc6a2 100644
--- a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
@@ -4,7 +4,36 @@ import { Tabs } from "tns-core-modules/ui/tabs";
 
 export function onButtonTap(args) {
     const page = <Page>(<View>args.object).page;
-    const bottomNavigation = <Tabs>(page.getViewById("bottomNavigation"));
+    const tabs = <Tabs>(page.getViewById("tabs"));
 
-    bottomNavigation.tabStrip.className = "newTabsClass";
+    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;
 }
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
index 8001f3494..add2637ab 100644
--- a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
@@ -2,10 +2,11 @@
   <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="bottomNavigation" >
-            <TabStrip class="defaultCssClass">
+        <Tabs automationText="tabNavigation" id="tabs" >
+            <TabStrip class="tabsClass0">
                 <TabStripItem>
                     <Label text="Home"></Label>
                     <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
index 973c9bacd..beecb78bb 100644
--- a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
+++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
@@ -335,17 +335,36 @@ describe(`${suite}-${spec}-suite`, async function () {
         await bottomNavigationBasePage.tabOnItem(0);
         await driver.imageHelper.compareScreen();
 
+        // change icon sources and check the result
+        const changeIconSource = await driver.waitForElement("changeIconSource");
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
         const changeStyleBtn = await driver.waitForElement("changeStyle");
-        console.log(changeStyleBtn);
         await changeStyleBtn.click();
         await driver.imageHelper.compareScreen();
 
+        // change icon sources again
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
         await bottomNavigationBasePage.tabOnItem(1);
         await driver.imageHelper.compareScreen();
 
+        // change style again
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
         await bottomNavigationBasePage.tabOnItem(2);
         await driver.imageHelper.compareScreen();
 
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
+        // change style again
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
index b5f334468..ec078107b 100644
--- a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
+++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
@@ -334,17 +334,36 @@ describe(`${imagePrefix}-suite`, async function () {
         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");
-        console.log(changeStyleBtn);
         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/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
index beef55fa5..26e4a4989 100644
--- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
+++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
@@ -169,13 +169,13 @@ function initializeNativeClasses() {
 
             if (position >= 0 && tabStripItems && tabStripItems[position]) {
                 tabStripItems[position]._emit(TabStripItem.selectEvent);
-                owner._setItemColor(tabStripItems[position]);
             }
 
             if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
                 tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
-                owner._setItemColor(tabStripItems[prevPosition]);
             }
+
+            owner._setItemsColors(owner.tabStrip.items);
         }
 
         public onTap(position: number): boolean {
@@ -711,7 +711,7 @@ export class BottomNavigation extends TabNavigationBase {
         if (value instanceof Color) {
             this._bottomNavigationBar.setBackgroundColor(value.android);
         } else {
-            this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+            this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
         }
 
         this.updateTabStripItems();
@@ -726,7 +726,7 @@ export class BottomNavigation extends TabNavigationBase {
         });
     }
 
-    private setItemsColors(items: Array<TabStripItem>): void {
+    public _setItemsColors(items: Array<TabStripItem>): void {
         items.forEach((item) => {
             if (item.nativeView) {
                 this._setItemColor(item);
@@ -740,7 +740,7 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
-        this.setItemsColors(this.tabStrip.items);
+        this._setItemsColors(this.tabStrip.items);
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -749,21 +749,22 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
-        this.setItemsColors(this.tabStrip.items);
+        this._setItemsColors(this.tabStrip.items);
+    }
+
+    private updateItem(tabStripItem: TabStripItem): void {
+        // TODO: Should figure out a way to do it directly with the the nativeView
+        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
+        const tabItemSpec = this.createTabItemSpec(tabStripItem);
+        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
     }
 
     public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
-        // TODO: Should figure out a way to do it directly with the the nativeView
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
+        this.updateItem(tabStripItem);
     }
 
     public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
-        // TODO: Should figure out a way to do it directly with the the nativeView
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
+        this.updateItem(tabStripItem);
     }
 
     public _setItemColor(tabStripItem: TabStripItem) {
@@ -813,6 +814,10 @@ export class BottomNavigation extends TabNavigationBase {
         this.setIconColor(tabStripItem);
     }
 
+    public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
+        this.updateItem(tabStripItem);
+    }
+
     public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
         if (value.fontSize) {
             tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
index 666b4e0ae..e57f718d7 100644
--- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
+++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
@@ -359,6 +359,7 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarBackgroundColor(value: UIColor | Color): void {
         this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+        this.updateAllItemsColors();
     }
 
     public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
@@ -377,15 +378,35 @@ export class BottomNavigation extends TabNavigationBase {
         this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
     }
 
-    public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
-        if (!this._unSelectedItemColor && !this._selectedItemColor) {
-            const image = this.getIcon(tabStripItem);
+    private setItemColors(): void {
+        if (this._selectedItemColor) {
+            this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor.ios;
+        }
+        if (this._unSelectedItemColor) {
+            this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
+        }
+    }
+
+    private setIconColor(tabStripItem: TabStripItem, forceReload: boolean = false): void {
+        if (forceReload || (!this._unSelectedItemColor && !this._selectedItemColor)) {
+            // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
+            const tabStripColor = (this.selectedIndex === tabStripItem._index) ? this._selectedItemColor : this._unSelectedItemColor;
+
+            const image = this.getIcon(tabStripItem, tabStripColor);
 
             tabStripItem.nativeView.image = image;
             tabStripItem.nativeView.selectedImage = image;
         }
     }
 
+    public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
+        this.setIconColor(tabStripItem);
+    }
+
+    public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
+        this.updateItemColors(tabStripItem);
+    }
+
     public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
         this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
     }
@@ -410,6 +431,7 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
+        this.updateAllItemsColors();
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -418,6 +440,7 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        this.updateAllItemsColors();
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
@@ -577,6 +600,20 @@ export class BottomNavigation extends TabNavigationBase {
         }
     }
 
+    public updateAllItemsColors() {
+        this.setItemColors();
+        if (this.tabStrip && this.tabStrip.items) {
+            this.tabStrip.items.forEach(tabStripItem => {
+                this.updateItemColors(tabStripItem);
+            });
+        }
+    }
+
+    private updateItemColors(tabStripItem: TabStripItem): void {
+        updateBackgroundPositions(this.tabStrip, tabStripItem);
+        this.setIconColor(tabStripItem, true);
+    }
+
     private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
         let image: UIImage;
         let title: string;
diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
index 8d623e7d0..54f9ecdf3 100644
--- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
+++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts
@@ -210,6 +210,12 @@ export class TabNavigationBase extends View {
      */
     setTabBarIconColor(tabStripItem: TabStripItem, value: any): void
 
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarIconSource(tabStripItem: TabStripItem, value: any): void
+
     /**
      * @private
      * Method is intended to be overridden by inheritors and used as "protected"
diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
index 09d8b2dd2..c48a3522b 100644
--- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
+++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
@@ -203,6 +203,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         // overridden by inheritors
     }
 
+    public setTabBarIconSource(tabStripItem: TabStripItem, value: any): void {
+        // overridden by inheritors
+    }
+
     public getTabBarItemFontSize(tabStripItem: TabStripItem): any {
         // overridden by inheritors
         return null;
diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
index d5d6db68c..40018cc8f 100644
--- a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
+++ b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
@@ -162,7 +162,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
             const parent = <TabStrip>this.parent;
             const tabStripParent = parent && <TabNavigationBase>parent.parent;
 
-            return tabStripParent && tabStripParent.setTabBarIconColor(this, args.value);
+            return tabStripParent && tabStripParent.setTabBarIconSource(this, args.value);
         });
         this.image.on("srcChange", this._imageSrcHandler);
     }
diff --git a/nativescript-core/ui/tab-view/tab-view.android.ts b/nativescript-core/ui/tab-view/tab-view.android.ts
index 600046f90..073afae6b 100644
--- a/nativescript-core/ui/tab-view/tab-view.android.ts
+++ b/nativescript-core/ui/tab-view/tab-view.android.ts
@@ -733,7 +733,7 @@ export class TabView extends TabViewBase {
         if (value instanceof Color) {
             this._tabLayout.setBackgroundColor(value.android);
         } else {
-            this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+            this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
         }
     }
 
diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts
index 5dde7d49a..8fc36ef26 100644
--- a/nativescript-core/ui/tabs/tabs.android.ts
+++ b/nativescript-core/ui/tabs/tabs.android.ts
@@ -794,7 +794,7 @@ export class Tabs extends TabsBase {
         if (value instanceof Color) {
             this._tabsBar.setBackgroundColor(value.android);
         } else {
-            this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+            this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
         }
 
         this.updateTabStripItems();
@@ -844,18 +844,19 @@ export class Tabs extends TabsBase {
         this.setItemsColors(this.tabStrip.items);
     }
 
-    public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
+    private updateItem(tabStripItem: TabStripItem): void {
         // TODO: Should figure out a way to do it directly with the the nativeView
         const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
         const tabItemSpec = this.createTabItemSpec(tabStripItem);
         this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
     }
 
+    public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
+        this.updateItem(tabStripItem);
+    }
+
     public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
-        // TODO: Should figure out a way to do it directly with the the nativeView
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
+        this.updateItem(tabStripItem);
     }
 
     public _setItemColor(tabStripItem: TabStripItem) {
@@ -905,6 +906,10 @@ export class Tabs extends TabsBase {
         this.setIconColor(tabStripItem);
     }
 
+    public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
+        this.updateItem(tabStripItem);
+    }
+
     public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
         if (value.fontSize) {
             tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts
index 43fd51461..15c81af55 100644
--- a/nativescript-core/ui/tabs/tabs.ios.ts
+++ b/nativescript-core/ui/tabs/tabs.ios.ts
@@ -550,12 +550,12 @@ export class Tabs extends TabsBase {
         if (tabStripItems) {
             if (tabStripItems[newIndex]) {
                 tabStripItems[newIndex]._emit(TabStripItem.selectEvent);
-                this.setIconColor(tabStripItems[newIndex]);
+                this.updateItemColors(tabStripItems[newIndex]);
             }
 
             if (tabStripItems[oldIndex]) {
                 tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent);
-                this.setIconColor(tabStripItems[oldIndex]);
+                this.updateItemColors(tabStripItems[oldIndex]);
             }
         }
 
@@ -751,6 +751,21 @@ export class Tabs extends TabsBase {
         }
     }
 
+    private updateAllItemsColors() {
+        this._defaultItemBackgroundColor = null;
+        this.setItemColors();
+        if (this.tabStrip && this.tabStrip.items) {
+            this.tabStrip.items.forEach(tabStripItem => {
+                this.updateItemColors(tabStripItem);
+            });
+        }
+    }
+
+    private updateItemColors(tabStripItem: TabStripItem): void {
+        updateBackgroundPositions(this.tabStrip, tabStripItem);
+        this.setIconColor(tabStripItem, true);
+    }
+
     private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
         let image: UIImage;
         let title: string;
@@ -870,6 +885,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarBackgroundColor(value: UIColor | Color): void {
         this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+        this.updateAllItemsColors();
     }
 
     public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
@@ -966,6 +982,10 @@ export class Tabs extends TabsBase {
         this.setIconColor(tabStripItem, true);
     }
 
+    public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
+        this.updateItemColors(tabStripItem);
+    }
+
     public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
         this.setViewTextAttributes(tabStripItem.label);
     }
@@ -1030,7 +1050,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
-        this.setItemColors();
+        this.updateAllItemsColors();
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -1039,7 +1059,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
-        this.setItemColors();
+        this.updateAllItemsColors();
     }
 
     private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {