fix(tabs): dynamic styling colors fixed (#8460)

* fix(tabs): dynamic styling colors fixed

* test(tabs): adding dynamic color change test

e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css

@@ -0,0 +1,25 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+.font-size {
+    font-size: 36;
+}
+
+TabStripItem:active {
+    background-color: magenta;
+}
+
+.defaultCssClass {
+    background-color: #79d2a6;
+    highlight-color: green;
+    selected-item-color: yellow;
+    un-selected-item-color: blue;
+}
+
+.newTabsClass {
+    background-color: orangered;
+    highlight-color: lightgreen;
+    selected-item-color: whitesmoke;
+    un-selected-item-color: pink;
+}

e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts

@@ -0,0 +1,10 @@
+import { View } from "tns-core-modules/ui/core/view";
+import { Page } from "tns-core-modules/ui/page";
+import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
+
+export function onButtonTap(args) {
+    const page = <Page>(<View>args.object).page;
+    const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
+
+    bottomNavigation.tabStrip.className = "newTabsClass";
+}

e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml

@@ -0,0 +1,43 @@
+<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" />
+    </StackLayout>
+    <GridLayout row="1">
+        <BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
+            <TabStrip class="defaultCssClass">
+                <TabStripItem>
+                    <Label text="Home"></Label>
+                    <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
+                </TabStripItem>
+                <TabStripItem>
+                    <Label text="Favorites"></Label>
+                    <Image src="res://add_to_fav"></Image>
+                </TabStripItem>
+                <TabStripItem>
+                    <Label text="Up"></Label>
+                    <Image src="res://up"></Image>
+                </TabStripItem>
+            </TabStrip>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Home Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Favorites Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Up Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+        </BottomNavigation>
+    </GridLayout>
+  </GridLayout>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/main-page.ts

@@ -27,6 +27,7 @@ export function loadExamples() {
     examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
     examples.set("reselect", "bottom-navigation/reselect-page");
     examples.set("item-color", "bottom-navigation/item-color-page");
+    examples.set("dynamic-color-change", "bottom-navigation/dynamic-color-change-page");
 
     return examples;
 }

e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css

@@ -0,0 +1,25 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+.font-size {
+    font-size: 36;
+}
+
+TabStripItem:active {
+    background-color: magenta;
+}
+
+.defaultCssClass {
+    background-color: #79d2a6;
+    highlight-color: green;
+    selected-item-color: yellow;
+    un-selected-item-color: blue;
+}
+
+.newTabsClass {
+    background-color: orangered;
+    highlight-color: lightgreen;
+    selected-item-color: whitesmoke;
+    un-selected-item-color: pink;
+}

e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts

@@ -0,0 +1,10 @@
+import { View } from "tns-core-modules/ui/core/view";
+import { Page } from "tns-core-modules/ui/page";
+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"));
+
+    bottomNavigation.tabStrip.className = "newTabsClass";
+}

e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml

@@ -0,0 +1,43 @@
+<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" />
+    </StackLayout>
+    <GridLayout row="1">
+        <Tabs automationText="tabNavigation" id="bottomNavigation" >
+            <TabStrip class="defaultCssClass">
+                <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>

e2e/ui-tests-app/app/tabs/main-page.ts

@@ -34,6 +34,7 @@ export function loadExamples() {
     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;
 }

e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts

@@ -319,4 +319,34 @@ describe(`${suite}-${spec}-suite`, async function () {
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
+
+    it(`${spec}-dynamic-color-change`, async function () {
+        await bottomNavigationBasePage.navigateToSample("dynamic-color-change");
+        await bottomNavigationBasePage.refreshTabItems();
+        await driver.imageHelper.compareScreen();
+
+        // go through the tabs and check that they are loaded
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(0);
+        await driver.imageHelper.compareScreen();
+
+        const changeStyleBtn = await driver.waitForElement("changeStyle");
+        console.log(changeStyleBtn);
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
 });

e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts

@@ -318,4 +318,34 @@ describe(`${imagePrefix}-suite`, async function () {
         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();
+
+        const changeStyleBtn = await driver.waitForElement("changeStyle");
+        console.log(changeStyleBtn);
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
 });

nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts

@@ -713,6 +713,25 @@ export class BottomNavigation extends TabNavigationBase {
         } else {
             this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
         }
+
+        this.updateTabStripItems();
+    }
+
+    private updateTabStripItems(): void {
+        this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
+            if (tabStripItem.nativeView) {
+                const tabItemSpec = this.createTabItemSpec(tabStripItem);
+                this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
+            }
+        });
+    }
+
+    private setItemsColors(items: Array<TabStripItem>): void {
+        items.forEach((item) => {
+            if (item.nativeView) {
+                this._setItemColor(item);
+            }
+        });
     }
 
     public getTabBarSelectedItemColor(): Color {
@@ -721,6 +740,7 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
+        this.setItemsColors(this.tabStrip.items);
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -729,6 +749,7 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        this.setItemsColors(this.tabStrip.items);
     }
 
     public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {

nativescript-core/ui/tabs/tabs.android.ts

@@ -796,6 +796,17 @@ export class Tabs extends TabsBase {
         } else {
             this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
         }
+
+        this.updateTabStripItems();
+    }
+
+    private updateTabStripItems(): void {
+        this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
+            if (tabStripItem.nativeView) {
+                const tabItemSpec = this.createTabItemSpec(tabStripItem);
+                this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
+            }
+        });
     }
 
     public getTabBarHighlightColor(): number {
@@ -807,12 +818,21 @@ export class Tabs extends TabsBase {
         this._tabsBar.setSelectedIndicatorColors([color]);
     }
 
+    private setItemsColors(items: Array<TabStripItem>): void {
+        items.forEach((item) => {
+            if (item.nativeView) {
+                this._setItemColor(item);
+            }
+        });
+    }
+
     public getTabBarSelectedItemColor(): Color {
         return this._selectedItemColor;
     }
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
+        this.setItemsColors(this.tabStrip.items);
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -821,6 +841,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        this.setItemsColors(this.tabStrip.items);
     }
 
     public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {

nativescript-core/ui/tabs/tabs.ios.ts

@@ -1030,6 +1030,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
+        this.setItemColors();
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -1038,6 +1039,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        this.setItemColors();
     }
 
     private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {