Fix/ TabBar backgroundColor (#2014)

Author: lidord-wix

src/components/tabController/TabBar.tsx

@@ -5,7 +5,13 @@ import _ from 'lodash';
 
 import TabBarContext from './TabBarContext';
 import TabBarItem, {TabControllerItemProps} from './TabBarItem';
-import {Constants, asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
+import {
+  Constants,
+  asBaseComponent,
+  forwardRef,
+  BaseComponentInjectedProps,
+  ForwardRefInjectedProps
+} from '../../commons/new';
 import View from '../view';
 import {Colors, Spacings, Typography} from '../../style';
 import FadedScrollView from '../fadedScrollView';
@@ -210,6 +216,7 @@ const TabBar = (props: Props) => {
           uppercase={uppercase}
           iconColor={iconColor}
           selectedIconColor={selectedIconColor}
+          backgroundColor={backgroundColor}
           activeBackgroundColor={activeBackgroundColor}
           {...item}
           {...context}
@@ -228,6 +235,7 @@ const TabBar = (props: Props) => {
     uppercase,
     iconColor,
     selectedIconColor,
+    backgroundColor,
     activeBackgroundColor,
     centerSelected,
     onItemLayout

src/components/tabController/TabBarItem.tsx

@@ -78,6 +78,10 @@ export interface TabControllerItemProps {
    * The active opacity when pressing a tab
    */
   activeOpacity?: number;
+  /**
+   * Apply background color for the tab bar item
+   */
+  backgroundColor?: string;
   /**
    * TODO: rename to feedbackColor
    * Apply background color on press for TouchableOpacity
@@ -118,6 +122,7 @@ export default function TabBarItem({
   trailingAccessory,
   uppercase,
   activeOpacity = 0.9,
+  backgroundColor = Colors.$backgroundElevated,
   activeBackgroundColor,
   testID,
   ignore,
@@ -192,8 +197,8 @@ export default function TabBarItem({
       // @ts-expect-error
       ref={itemRef}
       style={_style}
-      bg-$backgroundElevated
       onLayout={onLayout}
+      backgroundColor={backgroundColor}
       activeBackgroundColor={activeBackgroundColor}
       activeOpacity={activeOpacity}
       onPress={onPress}

src/components/tabController/apis/tabBarItem.api.json

@@ -9,7 +9,12 @@
     {"name": "labelStyle;", "type": "TextStyle", "description": "Custom label style"},
     {"name": "selectedLabelStyle", "type": "TextStyle", "description": "Custom selected label style"},
     {"name": "labelColor", "type": "string", "description": "The default label color", "default": "Colors.black"},
-    {"name": "selectedLabelColor", "type": "string", "description": "The selected label color", "default": "Colors.primary"},
+    {
+      "name": "selectedLabelColor",
+      "type": "string",
+      "description": "The selected label color",
+      "default": "Colors.primary"
+    },
     {"name": "icon", "type": "number", "description": "Icon of the tab"},
     {"name": "iconColor", "type": "string", "description": "Icon tint color"},
     {"name": "selectedIconColor", "type": "string", "description": "Icon selected tint color"},
@@ -21,6 +26,11 @@
     {"name": "onPress", "type": "(index: number) => void", "description": "Callback for when pressing a tab"},
     {"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
     {"name": "activeOpacity", "type": "number", "description": "The active opacity when pressing a tab"},
+    {
+      "name": "backgroundColor",
+      "type": "string",
+      "description": " Apply background color for the tab bar item"
+    },
     {
       "name": "activeBackgroundColor",
       "type": "string",
@@ -29,7 +39,5 @@
     {"name": "style", "type": "ViewStyle", "description": "Pass custom style"},
     {"name": "testID", "type": "string", "description": "Used as a testing identifier"}
   ],
-  "snippet": [
-    "<TabBarItem label={$1}/>"
-  ]
+  "snippet": ["<TabBarItem label={$1}/>"]
 }