feat(breaking): create tabBarStyle (#239)

Author: szymonrybczak

.changeset/rare-berries-rush.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': minor
+---
+
+feat!: add tabBarStyle, remove barTintColor prop

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}
-      barTintColor={barTintColor}
+      tabBarStyle={{ backgroundColor }}
       translucent={translucent}
       rippleColor={rippleColor}
       activeIndicatorColor={activeIndicatorColor}

apps/example/src/Examples/NativeBottomTabs.tsx

@@ -15,7 +15,9 @@ function NativeBottomTabs() {
       hapticFeedbackEnabled={false}
       tabBarInactiveTintColor="#C57B57"
       tabBarActiveTintColor="#F7DBA7"
-      barTintColor="#1E2D2F"
+      tabBarStyle={{
+        backgroundColor: '#1E2D2F',
+      }}
       rippleColor="#F7DBA7"
       tabLabelStyle={{
         fontFamily: 'Avenir',

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

@@ -156,12 +156,16 @@ Color for the active tab.
 #### `tabBarInactiveTintColor`
 
 Color for inactive tabs.
+
 - Type: `ColorValue`
 
-#### `barTintColor`
+#### `tabBarStyle`
 
-Background color of the tab bar.
-- Type: `ColorValue`
+Object containing styles for the tab bar.
+
+Supported properties:
+
+- `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

@@ -116,10 +116,13 @@ interface Props<Route extends BaseRoute> {
    */
   getTestID?: (props: { route: Route }) => string | undefined;
 
-  /**
-   * Background color of the tab bar.
-   */
-  barTintColor?: ColorValue;
+  tabBarStyle?: {
+    /**
+     * Background color of the tab bar.
+     */
+    backgroundColor?: ColorValue;
+  };
+
   /**
    * A Boolean value that indicates whether the tab bar is translucent. (iOS only)
    */
@@ -166,10 +169,10 @@ const TabView = <Route extends BaseRoute>({
         ? route.focusedIcon
         : route.unfocusedIcon
       : route.focusedIcon,
-  barTintColor,
   getHidden = ({ route }: { route: Route }) => route.hidden,
   getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor,
   getTestID = ({ route }: { route: Route }) => route.testID,
+  tabBarStyle,
   hapticFeedbackEnabled = false,
   tabLabelStyle,
   ...props
@@ -290,7 +293,7 @@ const TabView = <Route extends BaseRoute>({
         hapticFeedbackEnabled={hapticFeedbackEnabled}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
-        barTintColor={barTintColor}
+        barTintColor={tabBarStyle?.backgroundColor}
         rippleColor={rippleColor}
       >
         {trimmedRoutes.map((route) => {