From 24c6e49b179a57026a9b97655fb4d50cd3ab07ca Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Mon, 28 Oct 2024 10:53:34 +0530 Subject: [PATCH 1/6] feat: added active indicator color option --- android/src/main/java/com/rcttabview/RCTTabView.kt | 4 ++++ .../src/main/java/com/rcttabview/RCTTabViewViewManager.kt | 7 +++++++ example/src/Examples/NativeBottomTabs.tsx | 1 + src/TabView.tsx | 4 ++++ src/TabViewNativeComponent.ts | 1 + 5 files changed, 17 insertions(+) diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt index 49717e24..fc3cdc18 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: Int) { + itemActiveIndicatorColor = ColorStateList.valueOf(Color.BLUE) + } + 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/RCTTabViewViewManager.kt b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt index 3fb3546f..86b160fb 100644 --- a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt +++ b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt @@ -92,6 +92,13 @@ class RCTTabViewViewManager : view.setInactiveTintColor(color) } + @ReactProp(name = "activeIndicatorColor", customType = "Color") + fun setActiveIndicatorColor(view: ReactBottomNavigationView, color: Int?) { + if (color != null) { + view.setActiveIndicatorColor(color) + } + } + public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView { eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher val view = ReactBottomNavigationView(context) diff --git a/example/src/Examples/NativeBottomTabs.tsx b/example/src/Examples/NativeBottomTabs.tsx index 965b5273..759adf26 100644 --- a/example/src/Examples/NativeBottomTabs.tsx +++ b/example/src/Examples/NativeBottomTabs.tsx @@ -13,6 +13,7 @@ function NativeBottomTabs() { { */ 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 ead05779..fa7e9b74 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'); From 4baeec7638ecd8475cab53552528e502731a3804 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Mon, 28 Oct 2024 15:40:56 +0530 Subject: [PATCH 2/6] feat: added support for new arch --- android/src/main/java/com/rcttabview/RCTTabView.kt | 4 ++-- .../src/main/java/com/rcttabview/RCTTabViewImpl.kt | 7 +++++++ android/src/newarch/RCTTabViewManager.kt | 5 +++++ android/src/oldarch/RCTTabViewManager.kt | 12 +++++------- 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt index fc3cdc18..984417f3 100644 --- a/android/src/main/java/com/rcttabview/RCTTabView.kt +++ b/android/src/main/java/com/rcttabview/RCTTabView.kt @@ -193,8 +193,8 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context updateTintColors() } - fun setActiveIndicatorColor(color: Int) { - itemActiveIndicatorColor = ColorStateList.valueOf(Color.BLUE) + fun setActiveIndicatorColor(color: ColorStateList) { + itemActiveIndicatorColor = color } private fun updateTintColors(item: MenuItem? = null) { 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 0f6f5cea..71da3181 100644 --- a/android/src/oldarch/RCTTabViewManager.kt +++ b/android/src/oldarch/RCTTabViewManager.kt @@ -24,13 +24,6 @@ class RCTTabViewManager(context: ReactApplicationContext) : SimpleViewManager Date: Mon, 28 Oct 2024 15:43:16 +0530 Subject: [PATCH 3/6] feat: added example --- example/src/App.tsx | 8 ++++++++ example/src/Examples/FourTabs.tsx | 3 +++ 2 files changed, 11 insertions(+) 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} /> ); } From b61de371de71004a5aa1da3855d2af4127aa875e Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Mon, 28 Oct 2024 15:45:19 +0530 Subject: [PATCH 4/6] fix: removed color fro native bottom tabs --- example/src/Examples/NativeBottomTabs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/example/src/Examples/NativeBottomTabs.tsx b/example/src/Examples/NativeBottomTabs.tsx index 759adf26..965b5273 100644 --- a/example/src/Examples/NativeBottomTabs.tsx +++ b/example/src/Examples/NativeBottomTabs.tsx @@ -13,7 +13,6 @@ function NativeBottomTabs() { Date: Mon, 28 Oct 2024 16:36:10 +0530 Subject: [PATCH 5/6] feat: doc updated --- docs/docs/docs/guides/usage-with-react-navigation.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index d3f05dab..0c093d0c 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/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` + +Color of tab indicator. + #### `translucent` A Boolean value that indicates whether the tab bar is translucent. From 7c011fd8312888b09243c3406497a7e9f6098670 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Mon, 28 Oct 2024 17:05:55 +0530 Subject: [PATCH 6/6] feat: doc updated --- docs/docs/docs/guides/usage-with-react-navigation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index 0c093d0c..eaef98f2 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/docs/docs/docs/guides/usage-with-react-navigation.mdx @@ -79,7 +79,7 @@ Background color of the tab bar. #### `activeIndicatorColor` -Color of tab indicator. +Color of tab indicator. This option is only compatible with Material3 themes. #### `translucent`