feat: add background color css to tab strip (#7414)

tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts

@@ -5,7 +5,7 @@ import { TabContentItem } from "../tab-navigation-base/tab-content-item";
 
 // Requires
 import { TabNavigationBase, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
-import { CSSType } from "../core/view";
+import { CSSType, Color } from "../core/view";
 import { Frame } from "../frame";
 import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
 import { fromFileOrResource } from "../../image-source";
@@ -352,6 +352,11 @@ export class BottomNavigation extends TabNavigationBase {
             });
 
             this._bottomNavigationBar.setItems(tabItems);
+            this.tabStrip.setNativeView(this._bottomNavigationBar);
+            this.tabStrip.items.forEach((item, i, arr) => {
+                const tv = this._bottomNavigationBar.getTextViewForItemAt(i);
+                item.setNativeView(tv);
+            });
         }
     }
 
@@ -359,6 +364,18 @@ export class BottomNavigation extends TabNavigationBase {
         this._bottomNavigationBar.updateItemAt(index, spec);
     }
 
+    public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
+        return this._bottomNavigationBar.getBackground();
+    }
+
+    public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
+        if (value instanceof Color) {
+            this._bottomNavigationBar.setBackgroundColor(value.android);
+        } else {
+            this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+        }
+    }
+
     [selectedIndexProperty.setNative](value: number) {
         // const smoothScroll = false;
 
@@ -383,3 +400,14 @@ export class BottomNavigation extends TabNavigationBase {
         this.setAdapterItems([]);
     }
 }
+
+function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
+    if (value) {
+        const constantState = value.getConstantState();
+        if (constantState) {
+            return constantState.newDrawable(resources);
+        }
+    }
+
+    return value;
+}

tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts

@@ -277,6 +277,14 @@ export class BottomNavigation extends TabNavigationBase {
         super.onSelectedIndexChanged(oldIndex, newIndex);
     }
 
+    public getTabBarBackgroundColor(): UIColor {
+        return this._ios.tabBar.barTintColor;
+    }
+
+    public setTabBarBackgroundColor(value: UIColor | Color): void {
+        this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+    }
+
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
         const width = layout.getMeasureSpecSize(widthMeasureSpec);
         const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -384,6 +392,10 @@ export class BottomNavigation extends TabNavigationBase {
         const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
         const states = getTitleAttributesForStates(this);
 
+        if (this.tabStrip) {
+            this.tabStrip.setNativeView(this._ios.tabBar);
+        }
+
         items.forEach((item, i) => {
             const controller = this.getViewController(item);
 
@@ -401,6 +413,7 @@ export class BottomNavigation extends TabNavigationBase {
                 applyStatesToItem(tabBarItem, states);
 
                 controller.tabBarItem = tabBarItem;
+                tabStripItem.setNativeView(tabBarItem);
             }
 
             controllers.addObject(controller);

tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts

@@ -82,6 +82,18 @@ export class TabNavigationBase extends View {
      * Method is intended to be overridden by inheritors and used as "protected"
      */
     onSelectedIndexChanged(oldIndex: number, newIndex: number): void;
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarBackgroundColor(): any
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarBackgroundColor(value: any): void
 }
 
 export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>;

tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts

@@ -34,9 +34,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
             }
             this.items.push(<TabContentItem>value);
             this._addView(value);
-            selectedIndexProperty.coerce(this);
+            // selectedIndexProperty.coerce(this);
         } else if (name === "TabStrip") {
             this.tabStrip = value;
+            this._addView(value);
         }
     }
 
@@ -59,6 +60,11 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
                 callback(item);
             });
         }
+
+        const tabStrip = this.tabStrip;
+        if (tabStrip) {
+            callback(tabStrip);
+        }
     }
 
     public eachChildView(callback: (child: View) => boolean) {
@@ -102,6 +108,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         // to be overridden in platform specific files
         this.notify(<SelectedIndexChangedEventData>{ eventName: TabNavigationBase.selectedIndexChangedEvent, object: this, oldIndex, newIndex });
     }
+
+    public getTabBarBackgroundColor(): any {
+        // overridden by inheritors
+        return null;
+    }
+
+    public setTabBarBackgroundColor(value: any): void {
+        // overridden by inheritors
+    }
 }
 
 export interface TabNavigationBase {

tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts

@@ -3,13 +3,15 @@
  * @module "ui/tab-navigation/tab-strip"
  */ /** */
 
-import { ViewBase, Property } from "../../core/view";
+import { View, Property } from "../../core/view";
+import { Color } from "../../../color";
 import { TabStripItem } from "../tab-strip-item";
 
 /**
  * Represents a tab strip.
  */
-export class TabStrip extends ViewBase {
+export class TabStrip extends View {
+
     /**
      * Gets or sets the items of the tab strip.
      */

tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts

@@ -1,15 +1,17 @@
-// Types
+// Types
 import { TabStrip as TabStripDefinition } from ".";
 import { TabStripItem } from "../tab-strip-item";
+import { TabNavigationBase } from "../tab-navigation-base";
+import { Color } from "../../../color";
 import { AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
 
 // Requires
-import { ViewBase, Property, CSSType } from "../../core/view";
+import { View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty } from "../../core/view";
 
 export const traceCategory = "TabView";
 
 @CSSType("TabStrip")
-export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
+export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
     public items: TabStripItem[];
     public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
 
@@ -29,7 +31,25 @@ export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFr
             // selectedIndexProperty.coerce(this);
         }
     }
-}
+
+    [backgroundColorProperty.getDefault](): Color {
+        const parent = <TabNavigationBase>this.parent;
+
+        return parent && parent.getTabBarBackgroundColor();
+    }
+    [backgroundColorProperty.setNative](value: Color) {
+        const parent = <TabNavigationBase>this.parent;
+        
+        return parent && parent.setTabBarBackgroundColor(value);
+    }
+
+    [backgroundInternalProperty.getDefault](): any {
+        return null;
+    }
+    [backgroundInternalProperty.setNative](value: any) {
+        // disable the background CSS properties
+    }
+} 
 
 export const iosIconRenderingModeProperty = new Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "automatic" });
 iosIconRenderingModeProperty.register(TabStrip);

tns-core-modules/ui/tabs/tabs.android.ts

@@ -7,6 +7,7 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
 import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
 import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
 import { Frame } from "../frame";
+import { Color } from "../core/view";
 import { fromFileOrResource } from "../../image-source";
 import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
 import * as application from "../../application";
@@ -529,6 +530,7 @@ export class Tabs extends TabsBase {
 
         const tabLayout = this._tabLayout;
         tabLayout.setItems(tabItems, this._viewPager);
+        this.tabStrip.setNativeView(tabLayout);
         items.forEach((item, i, arr) => {
             const tv = tabLayout.getTextViewForItemAt(i);
             item.setNativeView(tv);
@@ -569,6 +571,18 @@ export class Tabs extends TabsBase {
         this._tabLayout.updateItemAt(index, spec);
     }
 
+    public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
+        return this._tabLayout.getBackground();
+    }
+
+    public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
+        if (value instanceof Color) {
+            this._tabLayout.setBackgroundColor(value.android);
+        } else {
+            this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
+        }
+    }
+
     [selectedIndexProperty.setNative](value: number) {
         const smoothScroll = true;
 
@@ -610,3 +624,14 @@ export class Tabs extends TabsBase {
         this._viewPager.setOffscreenPageLimit(value);
     }
 }
+
+function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
+    if (value) {
+        const constantState = value.getConstantState();
+        if (constantState) {
+            return constantState.newDrawable(resources);
+        }
+    }
+
+    return value;
+}

tns-core-modules/ui/tabs/tabs.ios.ts

@@ -8,6 +8,7 @@ import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-n
 import { TabsBase, swipeEnabledProperty } from "./tabs-common";
 import { Frame } from "../frame";
 import { ios as iosView, View } from "../core/view";
+import { Color } from "../../color";
 import { /*ios as iosUtils,*/ layout } from "../../utils/utils";
 // import { device } from "../../platform";
 import { fromFileOrResource } from "../../image-source";
@@ -845,11 +846,13 @@ export class Tabs extends TabsBase {
         items.forEach((item: TabStripItem, i, arr) => {
             const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0);
             tabBarItems.push(tabBarItem);
+            item.setNativeView(tabBarItem);
         });
         this.tabBarItems = tabBarItems;
 
         if (this.viewController && this.viewController.tabBar) {
             this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems);
+            this.tabStrip.setNativeView(this.viewController.tabBar);
         }
 
         // tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
@@ -934,6 +937,14 @@ export class Tabs extends TabsBase {
     //     this._updateIOSTabBarColorsAndFonts();
     // }
 
+    public getTabBarBackgroundColor(): UIColor {
+        return this._ios.tabBar.barTintColor;
+    }
+
+    public setTabBarBackgroundColor(value: UIColor | Color): void {
+        this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+    }
+
     [selectedIndexProperty.setNative](value: number) {
         // TODO
         // if (traceEnabled()) {