Merge branch 'release'

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [6.5.1](https://github.com/NativeScript/NativeScript/compare/6.5.0...6.5.1) (2020-03-30)
+
+
+### Bug Fixes
+
+* **tabs:** dynamic styling colors fixed ([#8460](https://github.com/NativeScript/NativeScript/issues/8460)) ([0a7bee6](https://github.com/NativeScript/NativeScript/commit/0a7bee6))
+
+
+
 # [6.5.0](https://github.com/NativeScript/NativeScript/compare/6.4.2...6.5.0) (2020-03-18)
 
 

api-reports/NativeScript.api.md

@@ -2262,6 +2262,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

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

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

@@ -0,0 +1,39 @@
+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"));
+
+    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

@@ -0,0 +1,44 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+  <GridLayout rows="auto,*">
+    <StackLayout row="0" >
+        <Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
+        <Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
+    </StackLayout>
+    <GridLayout row="1">
+        <BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
+            <TabStrip class="tabsClass0">
+                <TabStripItem>
+                    <Label text="Home"></Label>
+                    <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
+                </TabStripItem>
+                <TabStripItem>
+                    <Label text="Favorites"></Label>
+                    <Image src="res://add_to_fav"></Image>
+                </TabStripItem>
+                <TabStripItem>
+                    <Label text="Up"></Label>
+                    <Image src="res://up"></Image>
+                </TabStripItem>
+            </TabStrip>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Home Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Favorites Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Up Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+        </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,28 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+.font-size {
+    font-size: 36;
+}
+
+TabStripItem:active {
+    background-color: magenta;
+}
+
+.tabsClass0 {
+}
+
+.tabsClass1 {
+    background-color: #79d2a6;
+    highlight-color: green;
+    selected-item-color: yellow;
+    un-selected-item-color: blue;
+}
+
+.tabsClass2 {
+    background-color: orangered;
+    highlight-color: lightgreen;
+    selected-item-color: whitesmoke;
+    un-selected-item-color: pink;
+}

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

@@ -0,0 +1,39 @@
+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 tabs = <Tabs>(page.getViewById("tabs"));
+
+    switch (tabs.tabStrip.className) {
+        case "tabsClass0":
+            tabs.tabStrip.className = "tabsClass1";
+            break;
+        case "tabsClass1":
+            tabs.tabStrip.className = "tabsClass2";
+            break;
+        case "tabsClass2":
+            tabs.tabStrip.className = "tabsClass0";
+            break;
+    }
+}
+
+export function onChangeIconSourceTap(args) {
+    const page = <Page>(<View>args.object).page;
+    const tabs = <Tabs>(page.getViewById("tabs"));
+
+    const tabStripItem0 = tabs.tabStrip.items[0];
+    const tabStripItem1 = tabs.tabStrip.items[1];
+    const tabStripItem2 = tabs.tabStrip.items[2];
+
+    const iconSource0 = tabStripItem0.iconSource;
+
+    tabStripItem0.iconSource = tabStripItem1.iconSource;
+
+    tabStripItem1.iconClass = "font-awesome font-size";
+    tabStripItem1.iconSource = tabStripItem2.iconSource;
+
+    tabStripItem2.iconClass = "font-awesome font-size";
+    tabStripItem2.iconSource = iconSource0;
+}

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

@@ -0,0 +1,44 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+  <GridLayout rows="auto,*">
+    <StackLayout row="0" >
+        <Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
+        <Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
+    </StackLayout>
+    <GridLayout row="1">
+        <Tabs automationText="tabNavigation" id="tabs" >
+            <TabStrip class="tabsClass0">
+                <TabStripItem>
+                    <Label text="Home"></Label>
+                    <Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
+                </TabStripItem>
+                <TabStripItem>
+                    <Label text="Favorites"></Label>
+                    <Image src="res://add_to_fav"></Image>
+                </TabStripItem>
+                <TabStripItem>
+                    <Label text="Up"></Label>
+                    <Image src="res://up"></Image>
+                </TabStripItem>
+            </TabStrip>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Home Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Favorites Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+            <TabContentItem>
+                <GridLayout>
+                    <Label text="Up Page" class="h2 text-center">
+                    </Label>
+                </GridLayout>
+            </TabContentItem>
+        </Tabs>
+    </GridLayout>
+  </GridLayout>
+</Page>

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,53 @@ 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();
+
+        // change icon sources and check the result
+        const changeIconSource = await driver.waitForElement("changeIconSource");
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
+        const changeStyleBtn = await driver.waitForElement("changeStyle");
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
+        // change icon sources again
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
+        await 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

@@ -318,4 +318,53 @@ 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();
+
+        // change icon sources and check the result
+        const changeIconSource = await driver.waitForElement("changeIconSource");
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
+        const changeStyleBtn = await driver.waitForElement("changeStyle");
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
+        // change icon sources again
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        // change style again
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        await changeIconSource.click();
+        await driver.imageHelper.compareScreen();
+
+        // change style again
+        await changeStyleBtn.click();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
 });

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,8 +711,27 @@ 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();
+    }
+
+    private updateTabStripItems(): void {
+        this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
+            if (tabStripItem.nativeView) {
+                const tabItemSpec = this.createTabItemSpec(tabStripItem);
+                this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
+            }
+        });
+    }
+
+    public _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,20 +749,22 @@ export class BottomNavigation extends TabNavigationBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        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) {
@@ -792,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,8 +794,19 @@ 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();
+    }
+
+    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,20 +841,22 @@ export class Tabs extends TabsBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        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) {
@@ -884,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,6 +1050,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarSelectedItemColor(value: Color) {
         this._selectedItemColor = value;
+        this.updateAllItemsColors();
     }
 
     public getTabBarUnSelectedItemColor(): Color {
@@ -1038,6 +1059,7 @@ export class Tabs extends TabsBase {
 
     public setTabBarUnSelectedItemColor(value: Color) {
         this._unSelectedItemColor = value;
+        this.updateAllItemsColors();
     }
 
     private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {