Allow customising the badge

[1987cr]

At the moment Im changing the color and the position (only for Android) through a patch with:

Android

badge.backgroundColor = Color.parseColor("#F37468")
badge.horizontalOffset = 10

iOS

itemAppearance.normal.badgeBackgroundColor = UIColor(red: 0.953, green: 0.455, blue: 0.408, alpha: 1.0)

Feel like it's something that should be supported by the lib 🙏🏻

[micahlt]

I just came across this limitation today. Would be phenomenal to have in this library!

[okwasniewski]

Hey! This sounds reasonable, thanks for providing examples.

This could be accessible by tabBarBadgeStyle prop on the JS side.

PRs welcome 🙏

[Vrunalbenke]

@1987cr Can you share in which file did you made this changes for Android and IOS

[JuanRdBO]

@1987cr pls ser

[1987cr]

Ah sorry didn't see the first mention, I'll try to post it tomorrow, have to dig through the branches 😬

[1987cr]

This is the diff I made back in the day, bear in mind I'm no android or ios dev and that some of the style values are hardcoded to match the style of the app.

Also patch was made for this version react-native-bottom-tabs+0.8.3.patch, don't know if it's still applicable to current lib.

diff --git a/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
index 0ab1771..33fe31a 100644
--- a/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
+++ b/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -3,6 +3,7 @@ package com.rcttabview
 import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
+import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.os.Build
@@ -29,6 +30,7 @@ import com.facebook.react.common.assets.ReactFontManager
 import com.facebook.react.modules.core.ReactChoreographer
 import com.facebook.react.views.text.ReactTypefaceUtils
 import com.google.android.material.bottomnavigation.BottomNavigationView
+import com.google.android.material.badge.BadgeDrawable
 import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY_AUTO
 import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY_LABELED
 import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY_UNLABELED
@@ -37,6 +39,7 @@ import com.google.android.material.transition.platform.MaterialFadeThrough
 class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   private val bottomNavigation = BottomNavigationView(context)
   val layoutHolder = FrameLayout(context)
+  val borderView = View(context)
 
   var onTabSelectedListener: ((key: String) -> Unit)? = null
   var onTabLongPressedListener: ((key: String) -> Unit)? = null
@@ -74,6 +77,12 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
     )
     layoutHolder.isSaveEnabled = false
 
+    borderView.apply {
+         layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, 1)
+         setBackgroundColor(Color.parseColor("#E7E0EE"))
+     }
+     addView(borderView, LayoutParams(LayoutParams.MATCH_PARENT, 1))
+
     addView(bottomNavigation, LayoutParams(
       LayoutParams.MATCH_PARENT,
       LayoutParams.WRAP_CONTENT
@@ -132,7 +141,7 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   }
 
   override fun addView(child: View, index: Int, params: ViewGroup.LayoutParams?) {
-    if (child === layoutHolder || child === bottomNavigation) {
+    if (child === layoutHolder || child === bottomNavigation || child === borderView) {
       super.addView(child, index, params)
       return
     }
@@ -230,6 +239,9 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
         val badge = bottomNavigation.getOrCreateBadge(index)
         badge.isVisible = true
         badge.text = item.badge
+        badge.backgroundColor = Color.parseColor("#F37468")
+        badge.badgeGravity = BadgeDrawable.TOP_END
+        badge.horizontalOffset = 10
       } else {
         bottomNavigation.removeBadge(index)
       }
diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
index 63da9f9..182c3f8 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
@@ -239,6 +239,8 @@ private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps)
 
   itemAppearance.normal.titleTextAttributes = attributes
 
+  itemAppearance.normal.badgeBackgroundColor = UIColor(red: 0.953, green: 0.455, blue: 0.408, alpha: 1.0)
+
   // Apply item appearance to all layouts
   appearance.stackedLayoutAppearance = itemAppearance
   appearance.inlineLayoutAppearance = itemAppearance

[JuanRdBO]

Going to try now. Thank you!

[JuanRdBO]

Worked beautifully! Here's what I did if it helps somebody else. I just wanted the backgroundcolor to be different

diff --git a/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
index 7ed9d53..11f5eb7 100644
--- a/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
+++ b/node_modules/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -33,6 +33,8 @@ import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY
 import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY_LABELED
 import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY_UNLABELED
 import com.google.android.material.transition.platform.MaterialFadeThrough
+import android.graphics.Color
+import com.google.android.material.badge.BadgeDrawable
 
 class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   private var bottomNavigation = BottomNavigationView(context)
@@ -243,6 +245,7 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
         val badge = bottomNavigation.getOrCreateBadge(index)
         badge.isVisible = true
         badge.text = item.badge
+        badge.backgroundColor = Color.parseColor("#5b10a9")
       } else {
         bottomNavigation.removeBadge(index)
       }
diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
index 9cc1b10..2e418b3 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
@@ -239,6 +239,8 @@ private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps)
   }
 
   itemAppearance.normal.titleTextAttributes = attributes
+  // Set badge background color #5b10a9
+  itemAppearance.normal.badgeBackgroundColor = UIColor(red: 0.356, green: 0.063, blue: 0.663, alpha: 1.0) // #5b10a9
 
   // Apply item appearance to all layouts
   appearance.stackedLayoutAppearance = itemAppearance

[JuanRdBO]

Hey I just stumbled accross this. Would love to be able to customize the tabbar badge

[scottym5797]

Also have this issue, would love to have this capability