diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
index b59f0414b..093888465 100644
--- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
+++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
@@ -166,8 +166,6 @@ function initializeNativeClasses() {
             if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
                 tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
             }
-
-            owner.selectedIndex = position;
         }
 
         public onTap(position: number): boolean {
@@ -249,6 +247,8 @@ export class BottomNavigation extends TabNavigationBase {
     private _attachedToWindow = false;
     public _originalBackground: any;
     private _textTransform: TextTransform = "none";
+    private _selectedItemColor: Color;
+    private _unSelectedItemColor: Color;
 
     constructor() {
         super();
@@ -521,6 +521,7 @@ export class BottomNavigation extends TabNavigationBase {
             }
 
             this._currentFragment = fragment;
+            this.selectedIndex = position;
 
             const tabItems = this.items;
             const tabItem = tabItems ? tabItems[position] : null;
@@ -597,10 +598,11 @@ export class BottomNavigation extends TabNavigationBase {
             tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
 
             // COLOR
-            const color = titleLabel.style.color;
-            if (color) {
-                tabItemSpec.color = color.android;
+            let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
+            if (!color) {
+                color = titleLabel.style.color;
             }
+            tabItemSpec.color = color && color.android;
 
             // FONT
             const fontInternal = titleLabel.style.fontInternal;
@@ -612,7 +614,7 @@ export class BottomNavigation extends TabNavigationBase {
             // ICON
             const iconSource = tabStripItem.image && tabStripItem.image.src;
             if (iconSource) {
-                const iconInfo = this.getIconInfo(tabStripItem);
+                const iconInfo = this.getIconInfo(tabStripItem, color);
 
                 if (iconInfo) {
                     // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
@@ -629,7 +631,7 @@ export class BottomNavigation extends TabNavigationBase {
         return tabItemSpec;
     }
 
-    private getOriginalIcon(tabStripItem: TabStripItem): android.graphics.Bitmap {
+    private getOriginalIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.Bitmap {
         const iconSource = tabStripItem.image && tabStripItem.image.src;
         if (!iconSource) {
             return null;
@@ -640,7 +642,9 @@ export class BottomNavigation extends TabNavigationBase {
             const fontIconCode = iconSource.split("//")[1];
             const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
             const font = target.style.fontInternal;
-            const color = target.style.color;
+            if (!color) {
+                color = target.style.color;
+            }
             is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
         } else {
             is = ImageSource.fromFileOrResourceSync(iconSource);
@@ -666,8 +670,8 @@ export class BottomNavigation extends TabNavigationBase {
         return new IconInfo();
     }
 
-    private getIconInfo(tabStripItem: TabStripItem): IconInfo {
-        let originalIcon = this.getOriginalIcon(tabStripItem);
+    private getIconInfo(tabStripItem: TabStripItem, color?: Color): IconInfo {
+        let originalIcon = this.getOriginalIcon(tabStripItem, color);
 
         return this.getDrawableInfo(originalIcon);
     }
@@ -702,6 +706,22 @@ export class BottomNavigation extends TabNavigationBase {
         }
     }
 
+    public getTabBarSelectedItemColor(): Color {
+        return this._selectedItemColor;
+    }
+
+    public setTabBarSelectedItemColor(value: Color) {
+        this._selectedItemColor = value;
+    }
+
+    public getTabBarUnSelectedItemColor(): Color {
+        return this._unSelectedItemColor;
+    }
+
+    public setTabBarUnSelectedItemColor(value: Color) {
+        this._unSelectedItemColor = value;
+    }
+
     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);
@@ -717,6 +737,14 @@ export class BottomNavigation extends TabNavigationBase {
     }
 
     public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
+        // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
+        const isSelected = (tabStripItem._index === this.selectedIndex);
+        if (isSelected) {
+            value = this._selectedItemColor || value;
+        } else {
+            value = this._unSelectedItemColor || value;
+        }
+
         if (typeof value === "number") {
             tabStripItem.nativeViewProtected.setTextColor(value);
         } else {
@@ -728,7 +756,9 @@ export class BottomNavigation extends TabNavigationBase {
         const index = tabStripItem._index;
         const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
         const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
-        const drawableInfo = this.getIconInfo(tabStripItem);
+
+        const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
+        const drawableInfo = this.getIconInfo(tabStripItem, color);
 
         imgView.setImageDrawable(drawableInfo.drawable);
     }
diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
index d19f2b19a..ec77d262f 100644
--- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
+++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
@@ -257,7 +257,6 @@ export class BottomNavigation extends TabNavigationBase {
     private _delegate: UITabBarControllerDelegateImpl;
     private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
     private _iconsCache = {};
-
     private _selectedItemColor: Color;
     private _unSelectedItemColor: Color;
 
@@ -743,6 +742,7 @@ export class BottomNavigation extends TabNavigationBase {
         const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
         let attributes: any = { [NSFontAttributeName]: font };
 
+        // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
         if (!this._selectedItemColor && !this._unSelectedItemColor) {
             if (textColor) {
                 attributes[UITextAttributeTextColor] = textColor;
diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts
index afdbab527..7db51d008 100644
--- a/nativescript-core/ui/tabs/tabs.android.ts
+++ b/nativescript-core/ui/tabs/tabs.android.ts
@@ -374,6 +374,8 @@ export class Tabs extends TabsBase {
     private _androidViewId: number = -1;
     public _originalBackground: any;
     private _textTransform: TextTransform = "uppercase";
+    private _selectedItemColor: Color;
+    private _unSelectedItemColor: Color;
 
     constructor() {
         super();
@@ -667,11 +669,13 @@ export class Tabs extends TabsBase {
             tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
 
             // COLOR
-            const color = nestedLabel.style.color;
-            if (color) {
-                tabItemSpec.color = color.android;
+            let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
+            if (!color) {
+                color = nestedLabel.style.color;
             }
 
+            tabItemSpec.color = color && color.android;
+
             // FONT
             const fontInternal = nestedLabel.style.fontInternal;
             if (fontInternal) {
@@ -682,7 +686,7 @@ export class Tabs extends TabsBase {
             // ICON
             const iconSource = tabStripItem.image && tabStripItem.image.src;
             if (iconSource) {
-                const icon = this.getIcon(tabStripItem);
+                const icon = this.getIcon(tabStripItem, color);
 
                 if (icon) {
                     // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
@@ -698,7 +702,7 @@ export class Tabs extends TabsBase {
         return tabItemSpec;
     }
 
-    private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
+    private getIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.drawable.BitmapDrawable {
         const iconSource = tabStripItem.image && tabStripItem.image.src;
         if (!iconSource) {
             return null;
@@ -709,7 +713,9 @@ export class Tabs extends TabsBase {
             const fontIconCode = iconSource.split("//")[1];
             const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
             const font = target.style.fontInternal;
-            const color = target.style.color;
+            if (!color) {
+                color = target.style.color;
+            }
             is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
         } else {
             is = ImageSource.fromFileOrResourceSync(iconSource);
@@ -801,6 +807,22 @@ export class Tabs extends TabsBase {
         this._tabsBar.setSelectedIndicatorColors([color]);
     }
 
+    public getTabBarSelectedItemColor(): Color {
+        return this._selectedItemColor;
+    }
+
+    public setTabBarSelectedItemColor(value: Color) {
+        this._selectedItemColor = value;
+    }
+
+    public getTabBarUnSelectedItemColor(): Color {
+        return this._unSelectedItemColor;
+    }
+
+    public setTabBarUnSelectedItemColor(value: Color) {
+        this._unSelectedItemColor = value;
+    }
+
     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);
@@ -816,6 +838,14 @@ export class Tabs extends TabsBase {
     }
 
     public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
+        // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
+        const isSelected = (tabStripItem._index === this.selectedIndex);
+        if (isSelected) {
+            value = this._selectedItemColor || value;
+        } else {
+            value = this._unSelectedItemColor || value;
+        }
+
         if (typeof value === "number") {
             tabStripItem.nativeViewProtected.setTextColor(value);
         } else {
@@ -827,7 +857,9 @@ export class Tabs extends TabsBase {
         const index = tabStripItem._index;
         const tabBarItem = this._tabsBar.getViewForItemAt(index);
         const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
-        const drawable = this.getIcon(tabStripItem);
+
+        const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
+        const drawable = this.getIcon(tabStripItem, color);
 
         imgView.setImageDrawable(drawable);
     }
diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts
index 8098b3b5e..64b2ce3b3 100644
--- a/nativescript-core/ui/tabs/tabs.ios.ts
+++ b/nativescript-core/ui/tabs/tabs.ios.ts
@@ -461,7 +461,6 @@ export class Tabs extends TabsBase {
     private _iconsCache = {};
     private _backgroundIndicatorColor: UIColor;
     public _defaultItemBackgroundColor: UIColor;
-
     private _selectedItemColor: Color;
     private _unSelectedItemColor: Color;
 
@@ -916,12 +915,9 @@ export class Tabs extends TabsBase {
     public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
         let image: UIImage;
 
-        if (!this._unSelectedItemColor && !this._selectedItemColor) {
-            image = this.getIcon(tabStripItem);
-        } else {
-            const isSelected = this.isSelectedAndHightlightedItem(tabStripItem);
-            image = this.getIcon(tabStripItem, isSelected ? this._selectedItemColor : this._unSelectedItemColor);
-        }
+        // 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;
+        image = this.getIcon(tabStripItem, tabStripColor);
 
         tabStripItem.nativeView.image = image;
     }