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

@@ -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

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;

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;
 }

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>

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;

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;
 }

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" >
+        <Tabs automationText="tabNavigation" id="tabs" >
-            <TabStrip class="defaultCssClass">
+            <TabStrip class="tabsClass0">
                 <TabStripItem>
                     <Label text="Home"></Label>
                     <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>

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();
     });

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();
     });

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
+        this.updateItem(tabStripItem);
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
     }
 
     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
+        this.updateItem(tabStripItem);
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
     }
 
     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);

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 {
+    private setItemColors(): void {
-        if (!this._unSelectedItemColor && !this._selectedItemColor) {
+        if (this._selectedItemColor) {
-            const image = this.getIcon(tabStripItem);
+            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;

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"

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;

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);
     }

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()));
         }
     }
 

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
+        this.updateItem(tabStripItem);
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
     }
 
     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);

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) => {}) {