diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt index 49717e24..984417f3 100644 --- a/android/src/main/java/com/rcttabview/RCTTabView.kt +++ b/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 diff --git a/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt b/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt index 35bc825d..3f1f2cff 100644 --- a/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt +++ b/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) } diff --git a/android/src/newarch/RCTTabViewManager.kt b/android/src/newarch/RCTTabViewManager.kt index b71e9c0a..b254d445 100644 --- a/android/src/newarch/RCTTabViewManager.kt +++ b/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 { return delegate } diff --git a/android/src/oldarch/RCTTabViewManager.kt b/android/src/oldarch/RCTTabViewManager.kt index 41b582b1..71da3181 100644 --- a/android/src/oldarch/RCTTabViewManager.kt +++ b/android/src/oldarch/RCTTabViewManager.kt @@ -90,6 +90,11 @@ class RCTTabViewManager(context: ReactApplicationContext) : SimpleViewManager + +Color of tab indicator. This option is only compatible with Material3 themes. + #### `translucent` A Boolean value that indicates whether the tab bar is translucent. diff --git a/example/src/App.tsx b/example/src/App.tsx index b5108066..77783365 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -54,6 +54,10 @@ const FourTabsTranslucent = () => { return ; }; +const FourTabsActiveIndicatorColor = () => { + return ; +}; + 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' }, { diff --git a/example/src/Examples/FourTabs.tsx b/example/src/Examples/FourTabs.tsx index 5c474c7a..abd92e86 100644 --- a/example/src/Examples/FourTabs.tsx +++ b/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} /> ); } diff --git a/src/TabView.tsx b/src/TabView.tsx index 9b1ec637..9b2677ef 100644 --- a/src/TabView.tsx +++ b/src/TabView.tsx @@ -110,6 +110,10 @@ interface Props { */ translucent?: boolean; rippleColor?: ColorValue; + /** + * Color of tab indicator. (Android only) + */ + activeIndicatorColor?: ColorValue; } const ANDROID_MAX_TABS = 6; diff --git a/src/TabViewNativeComponent.ts b/src/TabViewNativeComponent.ts index ce7bf364..42b5c9ac 100644 --- a/src/TabViewNativeComponent.ts +++ b/src/TabViewNativeComponent.ts @@ -32,6 +32,7 @@ export interface TabViewProps extends ViewProps { inactiveTintColor?: ColorValue; ignoresTopSafeArea?: boolean; disablePageAnimations?: boolean; + activeIndicatorColor?: ColorValue; } export default codegenNativeComponent('RNCTabView', {