fix: barTintColor → backgroundColor

Author: szymonrybczak

apps/example/src/App.tsx

@@ -52,8 +52,8 @@ const FourTabsOpaqueScrollEdgeAppearance = () => {
   return <FourTabs scrollEdgeAppearance="opaque" />;
 };
 
-const FourTabsWithBarTintColor = () => {
-  return <FourTabs barTintColor={'#87CEEB'} />;
+const FourTabsWithBackgroundColor = () => {
+  return <FourTabs backgroundColor={'#87CEEB'} />;
 };
 
 const FourTabsTranslucent = () => {
@@ -108,7 +108,7 @@ const examples = [
     platform: 'ios',
   },
   {
-    component: FourTabsWithBarTintColor,
+    component: FourTabsWithBackgroundColor,
     name: 'Four Tabs - Custom Background Color of Tabs',
   },
   {

apps/example/src/Examples/FourTabs.tsx

@@ -10,7 +10,7 @@ interface Props {
   ignoresTopSafeArea?: boolean;
   disablePageAnimations?: boolean;
   scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
-  barTintColor?: ColorValue;
+  backgroundColor?: ColorValue;
   translucent?: boolean;
   hideOneTab?: boolean;
   rippleColor?: ColorValue;
@@ -21,7 +21,7 @@ export default function FourTabs({
   ignoresTopSafeArea = false,
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
-  barTintColor,
+  backgroundColor,
   translucent = true,
   hideOneTab = false,
   rippleColor,
@@ -71,7 +71,7 @@ export default function FourTabs({
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
-      tabBarStyle={{ barTintColor: barTintColor }}
+      tabBarStyle={{ backgroundColor }}
       translucent={translucent}
       rippleColor={rippleColor}
       activeIndicatorColor={activeIndicatorColor}

apps/example/src/Examples/NativeBottomTabs.tsx

@@ -16,7 +16,7 @@ function NativeBottomTabs() {
       tabBarInactiveTintColor="#C57B57"
       tabBarActiveTintColor="#F7DBA7"
       tabBarStyle={{
-        barTintColor: '#1E2D2F',
+        backgroundColor: '#1E2D2F',
       }}
       rippleColor="#F7DBA7"
       tabLabelStyle={{

docs/docs/docs/guides/standalone-usage.md

@@ -165,7 +165,7 @@ Object containing styles for the tab bar.
 
 Supported properties:
 
-- `barTintColor`: Background color of the tab bar.
+- `backgroundColor`: Background color of the tab bar.
 
 #### `translucent` <Badge text="iOS" type="info" />
 

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -96,6 +96,7 @@ It supports the following values:
 #### `labeled`
 
 Whether to show labels in tabs.
+
 - Type: `boolean`
 - Default <Badge text="iOS" type="info" />: `true`
 - Default <Badge text="Android" type="info" />: `false`
@@ -130,9 +131,13 @@ Color for the active tab.
 
 Color for the inactive tabs.
 
-#### `barTintColor`
+#### `tabBarStyle`
+
+Object containing styles for the tab bar.
+
+Supported properties:
 
-Background color of the tab bar.
+- `backgroundColor`: Background color of the tab bar.
 
 #### `activeIndicatorColor` <Badge text="android" type="info" />
 

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -120,7 +120,7 @@ interface Props<Route extends BaseRoute> {
     /**
      * Background color of the tab bar.
      */
-    barTintColor?: ColorValue;
+    backgroundColor?: ColorValue;
   };
 
   /**