Added activeIndicator color in android (#83)

* feat: added active indicator color option

* feat: added support for new arch

* feat: added example

* fix: removed color fro native bottom tabs

* feat: doc updated

* feat: doc updated

Author: shubhamguptadream11

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

@@ -193,6 +193,10 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     updateTintColors()
   }
 
+  fun setActiveIndicatorColor(color: ColorStateList) {
+    itemActiveIndicatorColor = color
+  }
+
   private fun updateTintColors(item: MenuItem? = null) {
     // First let's check current item color.
     val currentItemTintColor = items?.find { it.title == item?.title }?.activeTintColor

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

@@ -62,6 +62,13 @@ class RCTTabViewImpl {
     }
   }
 
+  fun setActiveIndicatorColor(view: ReactBottomNavigationView, color: Int?) {
+    if (color != null) {
+      val color = ColorStateList.valueOf(color)
+      view.setActiveIndicatorColor(color)
+    }
+  }
+
   fun setActiveTintColor(view: ReactBottomNavigationView, color: Int?) {
     view.setActiveTintColor(color)
   }

android/src/newarch/RCTTabViewManager.kt

@@ -89,6 +89,11 @@ class RCTTabViewManager(context: ReactApplicationContext) :
       tabViewImpl.setInactiveTintColor(view, value)
   }
 
+  override fun setActiveIndicatorColor(view: ReactBottomNavigationView?, value: Int?) {
+    if (view != null && value != null)
+      tabViewImpl.setActiveIndicatorColor(view, value)
+  }
+
   override fun getDelegate(): ViewManagerDelegate<ReactBottomNavigationView> {
     return delegate
   }

android/src/oldarch/RCTTabViewManager.kt

@@ -90,6 +90,11 @@ class RCTTabViewManager(context: ReactApplicationContext) : SimpleViewManager<Re
     tabViewImpl.setInactiveTintColor(view, color)
   }
 
+  @ReactProp(name = "activeIndicatorColor", customType = "Color")
+  fun setActiveIndicatorColor(view: ReactBottomNavigationView, color: Int?) {
+    tabViewImpl.setActiveIndicatorColor(view, color)
+  }
+
   // iOS Props
 
   @ReactProp(name = "sidebarAdaptable")

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

@@ -77,6 +77,10 @@ Color for the inactive tabs.
 
 Background color of the tab bar.
 
+#### `activeIndicatorColor` <Badge text="android" type="info" />
+
+Color of tab indicator. This option is only compatible with Material3 themes.
+
 #### `translucent` <Badge text="iOS" type="info" />
 
 A Boolean value that indicates whether the tab bar is translucent.

example/src/App.tsx

@@ -54,6 +54,10 @@ const FourTabsTranslucent = () => {
   return <FourTabs translucent={false} />;
 };
 
+const FourTabsActiveIndicatorColor = () => {
+  return <FourTabs activeIndicatorColor={'#87CEEB'} />;
+};
+
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
@@ -81,6 +85,10 @@ const examples = [
     component: FourTabsTranslucent,
     name: 'Four Tabs - Translucent tab bar',
   },
+  {
+    component: FourTabsActiveIndicatorColor,
+    name: 'Four Tabs - Active Indicator color',
+  },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {

example/src/Examples/FourTabs.tsx

@@ -13,6 +13,7 @@ interface Props {
   barTintColor?: ColorValue;
   translucent?: boolean;
   rippleColor?: ColorValue;
+  activeIndicatorColor?: ColorValue;
 }
 
 export default function FourTabs({
@@ -22,6 +23,7 @@ export default function FourTabs({
   barTintColor,
   translucent = true,
   rippleColor,
+  activeIndicatorColor,
 }: Props) {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
@@ -69,6 +71,7 @@ export default function FourTabs({
       barTintColor={barTintColor}
       translucent={translucent}
       rippleColor={rippleColor}
+      activeIndicatorColor={activeIndicatorColor}
     />
   );
 }

src/TabView.tsx

@@ -110,6 +110,10 @@ interface Props<Route extends BaseRoute> {
    */
   translucent?: boolean;
   rippleColor?: ColorValue;
+  /**
+   * Color of tab indicator. (Android only)
+   */
+  activeIndicatorColor?: ColorValue;
 }
 
 const ANDROID_MAX_TABS = 6;

src/TabViewNativeComponent.ts

@@ -32,6 +32,7 @@ export interface TabViewProps extends ViewProps {
   inactiveTintColor?: ColorValue;
   ignoresTopSafeArea?: boolean;
   disablePageAnimations?: boolean;
+  activeIndicatorColor?: ColorValue;
 }
 
 export default codegenNativeComponent<TabViewProps>('RNCTabView', {