-
Notifications
You must be signed in to change notification settings - Fork 70
-
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 🙏🏻
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 5 comments 5 replies
-
I just came across this limitation today. Would be phenomenal to have in this library!
Beta Was this translation helpful? Give feedback.
All reactions
-
Hey! This sounds reasonable, thanks for providing examples.
This could be accessible by tabBarBadgeStyle prop on the JS side.
PRs welcome 🙏
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
@1987cr Can you share in which file did you made this changes for Android and IOS
Beta Was this translation helpful? Give feedback.
All reactions
-
@1987cr pls ser
Beta Was this translation helpful? Give feedback.
All reactions
-
Ah sorry didn't see the first mention, I'll try to post it tomorrow, have to dig through the branches 😬
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1
-
Going to try now. Thank you!
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
Hey I just stumbled accross this. Would love to be able to customize the tabbar badge
Beta Was this translation helpful? Give feedback.
All reactions
-
Also have this issue, would love to have this capability
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1