feat: create tabBarStyle

Author: szymonrybczak

apps/example/src/Examples/FourTabs.tsx

@@ -71,7 +71,7 @@ export default function FourTabs({
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
-      barTintColor={barTintColor}
+      tabBarStyle={{ barTintColor: barTintColor }}
       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={{
+        barTintColor: '#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:
+
+- `barTintColor`: Background color of the tab bar.
 
 #### `translucent` <Badge text="iOS" 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.
+     */
+    barTintColor?: 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?.barTintColor}
         rippleColor={rippleColor}
       >
         {trimmedRoutes.map((route) => {