Repository navigation
[iOS] Support badge background/text color #597
ardasatata
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Summary
tabBarBadgeBackgroundColor/tabBarBadgeTextColor(badgeBackgroundColor/badgeTextColoron theTabViewroutes) are Android-only today (#473). On iOS the badge always renders in the system red. Would you be open to iOS support, and if so, what API shape would you prefer?Our use case
We show a small dot badge on one tab (a "new item" indicator). The system red is visually too strong for our design, so we'd like to use a softer color. Badge size is a lesser concern, since the iOS badge size is system defined.
What I found (react-native-bottom-tabs 1.4.0, iOS 26.5 simulator)
The JS side already forwards the per-tab colors to the native component, but the iOS side doesn't read them. I tried to wire them up with public UIKit APIs only:
UITabBarItem.badgeColorandsetBadgeTextAttributes(_:for:): no effect, the badge stays system red.UITabBarItem.standardAppearancewith aUITabBarItemAppearancecarryingbadgeBackgroundColor: no effect.UITabBarItemAppearance.badgeBackgroundColorinsideconfigureStandardAppearance: works, but it applies to every tab's badge, so a per-tab color isn't possible this way.So with public API, iOS 26 seems to only allow one badge color for the whole tab bar. I did not test iOS 18 or earlier.
Our workaround
For now we apply the color from a small local native module, by pinning
backgroundColoron the private_UIBarBadgeViewinside theUITabBarwith KVO (UIKit resets it on relayout and while dragging the iOS 26 selection lens). It works, but I wouldn't propose that for the library since it relies on a private class.Question
Would a bar-level option be acceptable (for example a single badge color for the tab bar on iOS, alongside the existing per-tab Android props), or is per-tab iOS support something you'd want to solve differently? I'm happy to send a PR for whichever direction you prefer.
All reactions