Added support for barTintColor in android ios

android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -2,10 +2,13 @@ package com.rcttabview
 
 import android.content.Context
 import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
+import android.util.TypedValue
 import android.net.Uri
 import android.view.Choreographer
 import android.view.MenuItem
+import androidx.appcompat.content.res.AppCompatResources
 import com.facebook.common.references.CloseableReference
 import com.facebook.datasource.DataSources
 import com.facebook.drawee.backends.pipeline.Fresco
@@ -25,6 +28,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
   var items: MutableList<TabInfo>? = null
   var onTabSelectedListener: ((WritableMap) -> Unit)? = null
   private var isAnimating = false
+  private var barTintColor : Int? = null
 
   private val layoutCallback = Choreographer.FrameCallback {
     isLayoutEnqueued = false
@@ -140,4 +144,29 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     super.onDetachedFromWindow()
     isAnimating = false
   }
+
+  fun setBarTintColor(color: Int?) {
+    barTintColor = color
+    updateBackgroundColors()
+  }
+
+  private fun updateBackgroundColors() {
+    // Set the color, either using the active background color or a default color.
+    val backgroundColor = barTintColor ?: getDefaultColorFor(android.R.attr.colorPrimary) ?: return
+
+    // Apply the same color to both active and inactive states
+    val colorDrawable = ColorDrawable(backgroundColor)
+
+    itemBackground = colorDrawable
+  }
+
+
+  private fun getDefaultColorFor(baseColorThemeAttr: Int): Int? {
+    val value = TypedValue()
+    if (!context.theme.resolveAttribute(baseColorThemeAttr, value, true)) {
+      return null
+    }
+    val baseColor = AppCompatResources.getColorStateList(context, value.resourceId)
+    return baseColor.defaultColor
+  }
 }

android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt

@@ -67,6 +67,11 @@ class RCTTabViewViewManager :
     view.setIcons(icons)
   }
 
+  @ReactProp(name = "barTintColor")
+  fun setBarTintColor(view: ReactBottomNavigationView, color: Int?) {
+    view.setBarTintColor(color)
+  }
+
   public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView {
     eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     val view = ReactBottomNavigationView(context)

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

@@ -51,6 +51,10 @@ Default options to use for the screens in the navigator.
 
 Whether to show labels in tabs. Defaults to true.
 
+#### `barTintColor`
+
+Background color of the tab bar.
+
 #### `disablePageAnimations`
 
 Whether to disable page animations between tabs. (iOS only)

example/src/App.tsx

@@ -35,6 +35,10 @@
   return <FourTabs scrollEdgeAppearance="transparent" />;
 };
 
+const FourTabsWithBarTintColor = () => {
+  return <FourTabs barTintColor={'#87CEEB'} />;
+};
+
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
@@ -50,6 +54,10 @@
     component: FourTabsTransparentScrollEdgeAppearance,
     name: 'Four Tabs - Transparent scroll edge appearance',
   },
+  {
+    component: FourTabsWithBarTintColor,
+    name: 'Four Tabs - Custom Background Color of Tabs',
+  },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {
@@ -96,7 +104,7 @@
             name="BottomTabs Example"
             component={App}
             options={{
               headerRight: () => (
                 <Button
                   onPress={() =>
                     Alert.alert(

example/src/Examples/FourTabs.tsx

@@ -4,17 +4,20 @@ import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
+import { ColorValue } from 'react-native';
 
 interface Props {
   ignoresTopSafeArea?: boolean;
   disablePageAnimations?: boolean;
   scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  barTintColor?: ColorValue;
 }
 
 export default function FourTabs({
   ignoresTopSafeArea = false,
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
+  barTintColor,
 }: Props) {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
@@ -59,6 +62,7 @@ export default function FourTabs({
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
+      barTintColor={barTintColor}
     />
   );
 }

ios/RCTTabViewViewManager.mm

@@ -32,5 +32,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(ignoresTopSafeArea, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(disablePageAnimations, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(scrollEdgeAppearance, NSString)
+RCT_EXPORT_VIEW_PROPERTY(barTintColor, NSNumber)
 
 @end

ios/TabViewImpl.swift

@@ -15,6 +15,7 @@ class TabViewProps: ObservableObject {
   @Published var ignoresTopSafeArea: Bool?
   @Published var disablePageAnimations: Bool = false
   @Published var scrollEdgeAppearance: String?
+  @Published var barTintColor: UIColor?
 }
 
 /**
@@ -76,6 +77,9 @@ struct TabViewImpl: View {
         UITabBar.appearance().scrollEdgeAppearance = configureAppearance(for: newValue ?? "")
       }
     }
+    .onAppear {
+        updateTabBarAppearance(with: props.barTintColor)
+    }
   }
 }
 
@@ -94,6 +98,20 @@ private func configureAppearance(for appearanceType: String) -> UITabBarAppearan
   return appearance
 }
 
+// Helper function to update the tab bar appearance
+private func updateTabBarAppearance(with barTintColor: UIColor?) {
+
+  if #available(iOS 15.0, *) {
+    let appearance = UITabBarAppearance()
+
+    appearance.backgroundColor = barTintColor
+    UITabBar.appearance().standardAppearance = appearance
+    UITabBar.appearance().scrollEdgeAppearance = appearance
+  } else {
+    UITabBar.appearance().barTintColor = barTintColor
+  }
+}
+
 struct TabItem: View {
   var title: String?
   var icon: UIImage?

ios/TabViewProvider.swift

@@ -70,6 +70,12 @@ struct TabData: Codable {
       props.items = parseTabData(from: items)
     }
   }
+
+  @objc var barTintColor: NSNumber? {
+    didSet {
+      props.barTintColor = RCTConvert.uiColor(barTintColor)
+    }
+  }
 
   @objc public convenience init(eventDispatcher: RCTEventDispatcherProtocol, imageLoader: RCTImageLoader) {
     self.init()

src/TabView.tsx

@@ -1,5 +1,12 @@
 import type { TabViewItems } from './TabViewNativeComponent';
-import { Image, Platform, StyleSheet, View } from 'react-native';
+import {
+  ColorValue,
+  Image,
+  Platform,
+  StyleSheet,
+  View,
+  processColor,
+} from 'react-native';
 
 //@ts-ignore
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
@@ -77,6 +84,11 @@ interface Props<Route extends BaseRoute> {
     route: Route;
     focused: boolean;
   }) => ImageSource | undefined;
+
+  /**
+   * Background color of the tab bar.
+   */
+  barTintColor?: ColorValue;
 }
 
 const ANDROID_MAX_TABS = 6;
@@ -93,6 +105,7 @@ const TabView = <Route extends BaseRoute>({
         ? route.focusedIcon
         : route.unfocusedIcon
       : route.focusedIcon,
+  barTintColor,
   ...props
 }: Props<Route>) => {
   // @ts-ignore
@@ -179,6 +192,7 @@ const TabView = <Route extends BaseRoute>({
       onPageSelected={({ nativeEvent: { key } }) => {
         jumpTo(key);
       }}
+      barTintColor={processColor(barTintColor)}
       {...props}
     >
       {trimmedRoutes.map((route) => {

src/TabViewNativeComponent.ts

@@ -1,5 +1,5 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native';
+import type { ProcessedColorValue, ViewProps } from 'react-native';
 import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 //@ts-ignore
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
@@ -23,6 +23,7 @@ export interface TabViewProps extends ViewProps {
   labeled?: boolean;
   sidebarAdaptable?: boolean;
   scrollEdgeAppearance?: string;
+  barTintColor?: ProcessedColorValue | null;
 }
 
 export default codegenNativeComponent<TabViewProps>('RCTTabView');