[Android] Build fails with Unresolved reference 'badgeBackgroundColor' in v1.0.4

[joshkeldam]

Description

Android build fails with Kotlin compilation errors in react-native-bottom-tabs@1.0.4:

e: RCTTabView.kt:260:48 Unresolved reference 'badgeBackgroundColor'.
e: RCTTabView.kt:272:48 Unresolved reference 'badgeTextColor'.
e: RCTTabView.kt:266:48 Unresolved reference 'colorError'.

Root Cause

RCTTabView.kt (lines 260-283) accesses item.badgeBackgroundColor and item.badgeTextColor, but these properties are missing from the TabInfo data class in RCTTabViewManager.kt.

The TabInfo data class currently has:

data class TabInfo(
  val key: String,
  val title: String,
  val badge: String?,
  val activeTintColor: Int?,
  val hidden: Boolean,
  val testID: String?
)

But RCTTabView.kt expects:

• item.badgeBackgroundColor
• item.badgeTextColor

Additionally, com.google.android.material.R.attr.colorError is unresolved, likely due to Material library version compatibility.

Steps to Reproduce

1. Install react-native-bottom-tabs@1.0.4
2. Run Android build: ./gradlew assembleDebug
3. Build fails with the above errors

Environment

• react-native-bottom-tabs: 1.0.4
• React Native: 0.82.1
• Gradle: 9.0.0

Suggested Fix

1. Add missing properties to TabInfo data class:

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?
)

2. Populate them in setItems():

badgeBackgroundColor = if (item.hasKey("badgeBackgroundColor")) item.getInt("badgeBackgroundColor") else null,
badgeTextColor = if (item.hasKey("badgeTextColor")) item.getInt("badgeTextColor") else null,

3. Simplify badge color application to avoid colorError resolution:

item.badgeBackgroundColor?.let { badge.backgroundColor = it }
item.badgeTextColor?.let { badge.badgeTextColor = it }

I'm happy to submit a PR with these fixes.

[valerioceniccola]

Same, waiting for an official solution.

[kshitijsubedi]

Got same issue.

[joshkeldam]

You'll have to patch it for now until my PR is merged.

// react-native-bottom-tabs.patch
diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt
index 9ed6de7adbae78cdb2722f87aba6f47f5f11cc72..524517e83a3d330c393c56b964c1fce22823f076 100644
--- a/android/src/main/java/com/rcttabview/RCTTabView.kt
+++ b/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 (let Material use its default colors otherwise)
+        item.badgeBackgroundColor?.let { badge.backgroundColor = it }
+        item.badgeTextColor?.let { badge.badgeTextColor = it }
       } else {
         bottomNavigation.removeBadge(index)
       }
diff --git a/android/src/main/java/com/rcttabview/RCTTabViewManager.kt b/android/src/main/java/com/rcttabview/RCTTabViewManager.kt
index d2b97dc10a416eb02a4e872c73b778a2da35266f..dad16c28cb24ffa425b8b863177371a8acf1a3d1 100644
--- a/android/src/main/java/com/rcttabview/RCTTabViewManager.kt
+++ b/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")

[kshitijsubedi]

@joshkeldam Thank you it works with patch