fix(bottom-navigation): iOS TabStrip. color not applied #464

Author: farfromrefug

src/bottom-navigation/index.ios.ts

@@ -6,16 +6,15 @@ import { TabStrip } from '@nativescript-community/ui-material-core-tabs/tab-stri
 import { TabStripItem } from '@nativescript-community/ui-material-core-tabs/tab-strip-item';
 // Types
 // Requires
-import { CSSType, Color, CoreTypes, Device, Font, Frame, IOSHelper, ImageSource, ImageAsset, Property, Utils, View, booleanConverter } from '@nativescript/core';
+import { CSSType, Color, CoreTypes, Device, Font, Frame, IOSHelper, ImageAsset, ImageSource, Property, Utils, View, booleanConverter } from '@nativescript/core';
 import { getTransformedText } from '@nativescript/core/ui/text-base';
-import { iOSNativeHelper } from '@nativescript/core/utils';
+import { SDK_VERSION } from '@nativescript/core/utils';
 export { TabContentItem, TabStrip, TabStripItem };
 
 // TODO:
 // import { profile } from "../../profiling";
 
 const maxTabsCount = 5;
-const majorVersion = iOSNativeHelper.MajorVersion;
 const isPhone = Device.deviceType === 'Phone';
 
 @NativeClass
@@ -29,8 +28,11 @@ class MDTabBarControllerImpl extends UITabBarController {
         return handler;
     }
 
-    // TODO
-    // @profile
+    public viewDidLoad() {
+        super.viewDidLoad();
+        this.tabBar.backgroundColor = new Color('#fff').ios;
+    }
+
     public viewWillAppear(animated: boolean): void {
         super.viewWillAppear(animated);
         const owner = this._owner.get();
@@ -48,8 +50,6 @@ class MDTabBarControllerImpl extends UITabBarController {
         }
     }
 
-    // TODO
-    // @profile
     public viewDidDisappear(animated: boolean): void {
         super.viewDidDisappear(animated);
 
@@ -80,7 +80,7 @@ class MDTabBarControllerImpl extends UITabBarController {
     public traitCollectionDidChange(previousTraitCollection: UITraitCollection): void {
         super.traitCollectionDidChange(previousTraitCollection);
 
-        if (majorVersion >= 13) {
+        if (SDK_VERSION >= 13) {
             const owner = this._owner.get();
             if (
                 owner &&
@@ -224,7 +224,7 @@ function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripIte
     } else {
         // always default to at least a solid white background as fallback
         // building with Xcode 13 causes bgView with no background to be fully transparent unless a css background-color is set - this allows original default behavior to work as it always did
-        bgView.backgroundColor = new Color('#fff').ios;
+        bgView.backgroundColor = null;
     }
 }
 
@@ -237,7 +237,7 @@ function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UIT
     // For iOS 11 icon is above the text *only* on phones in portrait mode.
     const orientation = controller.interfaceOrientation;
     const isPortrait = orientation !== UIInterfaceOrientation.LandscapeLeft && orientation !== UIInterfaceOrientation.LandscapeRight;
-    const isIconAboveTitle = majorVersion < 11 || (isPhone && isPortrait);
+    const isIconAboveTitle = SDK_VERSION < 11 || (isPhone && isPortrait);
 
     if (!tabStripItem.iconSource) {
         if (isIconAboveTitle) {
@@ -392,7 +392,7 @@ export class BottomNavigation extends TabNavigationBase {
     }
 
     public setTabBarBackgroundColor(value: UIColor | Color): void {
-        this.viewController.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+        this.viewController.tabBar.backgroundColor = this.viewController.tabBar.barTintColor = value instanceof Color ? value.ios : value;
         this.updateAllItemsColors();
     }
 
@@ -840,7 +840,7 @@ export class BottomNavigation extends TabNavigationBase {
         // to fix the above issue we are applying the selected fix only for the case, when there is no background set
         // in that case we have the following known issue:
         // // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items
-        if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && majorVersion > 9) {
+        if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && SDK_VERSION > 9) {
             this.viewController.tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor];
         }
     }

src/core-tabs/tab-navigation/index.android.ts

@@ -119,7 +119,10 @@ function initializeNativeClasses() {
 
     @NativeClass
     class FragmentPagerAdapter extends androidx.viewpager2.adapter.FragmentStateAdapter {
-        constructor(public owner: WeakRef<TabNavigation>, fragmentActivity: androidx.fragment.app.FragmentActivity) {
+        constructor(
+            public owner: WeakRef<TabNavigation>,
+            fragmentActivity: androidx.fragment.app.FragmentActivity
+        ) {
             super(fragmentActivity);
             return global.__native(this);
         }

src/core-tabs/tab-navigation/index.ios.ts

@@ -906,7 +906,7 @@ export abstract class TabNavigation<
         });
     }
 
-    public setTabBarRippleColor(value: Color, alpha?:number) {
+    public setTabBarRippleColor(value: Color, alpha?: number) {
         this.mRippleColor = value;
         this.viewController.tabBar.rippleColor = getRippleColor(value, alpha);
     }

src/core-tabs/tab-strip-item/index.ts

@@ -258,16 +258,12 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
     }
 
     [backgroundColorProperty.getDefault](): Color {
-        const parent = this.parent as TabStrip;
-        const tabStripParent = parent && (parent.parent as TabNavigationBase);
-
-        return tabStripParent && tabStripParent.getTabBarBackgroundColor();
+        const tabStripParent = (this.parent as TabStrip)?.parent as TabNavigationBase;
+        return tabStripParent?.getTabBarBackgroundColor();
     }
     [backgroundColorProperty.setNative](value: Color) {
-        const parent = this.parent as TabStrip;
-        const tabStripParent = parent && (parent.parent as TabNavigationBase);
-
-        return tabStripParent && tabStripParent.setTabBarItemBackgroundColor(this, value);
+        const tabStripParent = (this.parent as TabStrip)?.parent as TabNavigationBase;
+        return tabStripParent?.setTabBarItemBackgroundColor(this, value);
     }
 
     [textTransformProperty.getDefault](): CoreTypes.TextTransformType {

src/core-tabs/tab-strip/index.ts

@@ -92,12 +92,15 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     [backgroundColorProperty.getDefault](): Color {
         const parent = this.parent as TabNavigationBase;
 
-        return parent && parent.getTabBarBackgroundColor();
+        return parent?.getTabBarBackgroundColor();
+        // always default to at least a solid white background as fallback
+        // building with Xcode 13 causes bgView with no background to be fully transparent unless a css background-color is set - this allows original default behavior to work as it always did
+        // bgView.backgroundColor = new Color('#fff').ios;;
     }
     [backgroundColorProperty.setNative](value: Color) {
         const parent = this.parent as TabNavigationBase;
 
-        return parent && parent.setTabBarBackgroundColor(value);
+        return parent?.setTabBarBackgroundColor(value);
     }
 
     [backgroundInternalProperty.getDefault](): any {

src/tabs/index.ios.ts

@@ -266,7 +266,7 @@ class UIPageViewControllerImpl extends UIPageViewController {
     }
 }
 
-export class Tabs extends TabNavigation<UIPageViewControllerImpl> {
+export class Tabs extends TabNavigation {
     protected createViewController() {
         return UIPageViewControllerImpl.initWithOwner(new WeakRef(this));
     }