From 2327dfd8356b4db757b5dd35815f6810708c6c50 Mon Sep 17 00:00:00 2001 From: Josh Kelly Date: Mon, 1 Dec 2025 05:42:04 +0400 Subject: [PATCH 1/2] fix(android): add missing badgeBackgroundColor and badgeTextColor to TabInfo The TabInfo data class was missing badgeBackgroundColor and badgeTextColor properties that RCTTabView.kt expects when applying badge colors. This caused Android builds to fail with: - Unresolved reference 'badgeBackgroundColor' - Unresolved reference 'badgeTextColor' - Unresolved reference 'colorError' Changes: - Add badgeBackgroundColor and badgeTextColor properties to TabInfo data class - Populate them from JS bridge in setItems() - Simplify badge color application to let Material use default theme colors when custom colors are not provided (avoids colorError resolution issues) Fixes #481 --- .../main/java/com/rcttabview/RCTTabView.kt | 28 ++----------------- .../java/com/rcttabview/RCTTabViewManager.kt | 4 +++ 2 files changed, 7 insertions(+), 25 deletions(-) diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt index 9ed6de7a..23cd8759 100644 --- a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt +++ b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt @@ -256,31 +256,9 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) { if (item.badge != " ") { badge.text = item.badge } - // Apply badge colors if provided, or reset to theme defaults if null - if (item.badgeBackgroundColor != null) { - badge.backgroundColor = item.badgeBackgroundColor - } else { - // Reset to theme default color by resolving the colorError attribute - val typedValue = TypedValue() - context.theme.resolveAttribute( - com.google.android.material.R.attr.colorError, - typedValue, - true - ) - badge.backgroundColor = typedValue.data - } - if (item.badgeTextColor != null) { - badge.badgeTextColor = item.badgeTextColor - } else { - // Reset to theme default text color by resolving the colorOnError attribute - val typedValue = TypedValue() - context.theme.resolveAttribute( - com.google.android.material.R.attr.colorOnError, - typedValue, - true - ) - badge.badgeTextColor = typedValue.data - } + // Apply badge colors if provided (Material will use its default theme colors otherwise) + item.badgeBackgroundColor?.let { badge.backgroundColor = it } + item.badgeTextColor?.let { badge.badgeTextColor = it } } else { bottomNavigation.removeBadge(index) } diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt index d2b97dc1..dad16c28 100644 --- a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt +++ b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt @@ -21,6 +21,8 @@ data class TabInfo( val key: String, val title: String, val badge: String?, + val badgeBackgroundColor: Int?, + val badgeTextColor: Int?, val activeTintColor: Int?, val hidden: Boolean, val testID: String? @@ -99,6 +101,8 @@ class RCTTabViewManager(context: ReactApplicationContext) : key = item.getString("key") ?: "", title = item.getString("title") ?: "", badge = if (item.hasKey("badge")) item.getString("badge") else null, + badgeBackgroundColor = if (item.hasKey("badgeBackgroundColor")) item.getInt("badgeBackgroundColor") else null, + badgeTextColor = if (item.hasKey("badgeTextColor")) item.getInt("badgeTextColor") else null, activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null, hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false, testID = item.getString("testID") From 3e269c15b80856772a009ccbfc556b472fa92876 Mon Sep 17 00:00:00 2001 From: Josh Kelly Date: Mon, 1 Dec 2025 05:43:27 +0400 Subject: [PATCH 2/2] chore: add changeset --- .changeset/fix-android-badge-colors.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fix-android-badge-colors.md diff --git a/.changeset/fix-android-badge-colors.md b/.changeset/fix-android-badge-colors.md new file mode 100644 index 00000000..9fdd545f --- /dev/null +++ b/.changeset/fix-android-badge-colors.md @@ -0,0 +1,5 @@ +--- +"react-native-bottom-tabs": patch +--- + +fix(android): add missing badgeBackgroundColor and badgeTextColor to TabInfo data class