feat(Android, Tabs): support badge in bottom navigation #3017

maciekstosio · 2025-07-17T14:06:20Z

Description

Closes https://github.com/software-mansion/react-native-screens-labs/issues/256

This PRs adds basic support for badge for android. It allows to set color and label. To reuse the iOS logic (which allows string as badge value) I need to parse it to int and I log error otherwise. ~~This isn't ideal and I created low-priority task to change it at some point https://github.com/software-mansion/react-native-screens-labs/issues/249.~~

I merged rest of the PRs related to badge to this PR:

text color
label visibility
handling text

It currently works in a way that if it can parse it as int, it will be a number and displayed as string otherwise. Developer can use just label visibility to show "badge dot". At the same time I got rid of the number warning. It could be potentially changed to have separate methods for string and number, but for now I conformed to iOS API.

Screenshots / GIFs

Test code and steps to reproduce

See TestBottomTabs/index.tsx

Checklist

Included code example that can be used to test this change
Ensured that CI passes

kkafar

This looks good overall. I have one request regarding value sanitisation.

kkafar · 2025-07-17T21:35:51Z

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsHost.kt

+        val badgeValue = tabScreen.badgeValue?.toIntOrNull()
+        if (tabScreen.badgeValue != null && badgeValue == null) {
+            Log.e(TAG, "[RNScreens] Android supports only numbers as badge value")
+        }


I think that sanitization code should be on setter level, or even on view manager level. View should hold only the valid state (of Int type)

I get rid of it in https://github.com/software-mansion/react-native-screens/pull/3025/files

kkafar · 2025-07-17T21:36:28Z

apps/src/tests/TestBottomTabs/index.tsx

@@ -34,7 +34,7 @@ const TAB_CONFIGS: TabConfiguration[] = [
  {
    tabScreenProps: {
      tabKey: 'Tab2',
-      badgeValue: '2',
+      badgeValue: 'SWM',


Won't this crash?

It won't if it fail to parse as a string we disable the badge, but this behaviour will be changed in:
#3025
and
#3024

…tion

… bottom navigation (#3023) This PR allows to set badge text color. I suppressed the lint, as I believe we want to use original color variables from material design in cases like this. ## Screenshots / GIFs <img width="439" height="907" alt="image" src="https://github.com/user-attachments/assets/83e62206-b792-4fbf-962d-d72d935ee553" /> ## Test code and steps to reproduce See `TestBottomTabs/index.tsx` ## Checklist - [ ] Included code example that can be used to test this change - [ ] Ensured that CI passes

kkafar

Good job overall. I've found a bug, see below. Also I have concerns about necessity of tabbaritembadgevisible prop.

kkafar · 2025-07-18T12:00:48Z

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt

+        view.tabBarItemBadgeVisible = value
+    }
+
+    @ReactProp(name = "tabBarItemBadgeTextColor")


All the color prop need the `customType = "Color" annotation argument, otherwise it wong work on old architecture.

Suggested change

@ReactProp(name = "tabBarItemBadgeTextColor")

@ReactProp(name = "tabBarItemBadgeTextColor", customType = "Color")

changed in 69df8cf

kkafar · 2025-07-18T12:07:03Z

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsHost.kt

+        val badgeValue = tabScreen.badgeValue
+        val badgeValueNumber = badgeValue?.toIntOrNull()
+
+        val badge = bottomNavigationView.getOrCreateBadge(menuItemIndex)
+        badge.isVisible = true
+
+        if (badgeValueNumber != null) {
+            badge.number = badgeValueNumber
+        } else if (badgeValue != null) {
+            badge.text = badgeValue
+        } else {
+            badge.clearNumber()
+            badge.clearText()
+        }


Okay, so badgeValue is either a string or a number. If it is a number I guess we get this nice shortening mechanism (picture below 👇🏻), is that right?

We need to document this behaviour. Please let's start creating short documentation around exposed types (similar to what we have in v4 implementation). We need to have such interactions described. It can be done in separate PR, I don't mind here.

kkafar · 2025-07-18T12:09:47Z

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsHost.kt

+        val badgeValue = tabScreen.badgeValue
+        val badgeValueNumber = badgeValue?.toIntOrNull()
+
+        val badge = bottomNavigationView.getOrCreateBadge(menuItemIndex)
+        badge.isVisible = true
+
+        if (badgeValueNumber != null) {
+            badge.number = badgeValueNumber
+        } else if (badgeValue != null) {
+            badge.text = badgeValue
+        } else {
+            badge.clearNumber()
+            badge.clearText()
+        }


There is a bug here. When I set a number as a badge value first, then change it to text, I can not go back to a number. See the recording.

Screen.Recording.2025-07-18.at.14.09.17.mov

fixed in 69df8cf

The fix is basically that we clear first - there are separate properties for text and number, text takes precedence over number, thus it didn't change back - it wasn't cleared when setting number.

kkafar · 2025-07-18T12:15:19Z

src/components/BottomTabsScreen.tsx

@@ -75,6 +75,8 @@ export interface BottomTabsScreenProps {

  // Android specific
  iconResourceName?: string;
+  tabBarItemBadgeVisible?: boolean;


Let's document what is the default value here. Also I wonder whether we need this prop? Shouldn't it be enough to determine badge visibility by the value passed as badgevalue? e.g. empty string or undefined means its not visible?

We can do:

"" -> dot icon

undefined -> disabled

string -> string

string parsable to string -> number
But isn't it more tricky?

Now to show a dot you pass badgeValue: undefined & badgeVisible: true OR badgeValue: "" & badgeVisible: true?

Therefore to get a dot, user still must consult the documentation. Moreover "" as a value to get a dot only seems natural to me, since it's a badge w/o text 😅

I think it should work as follows:

We should have a single prop, no badgeVisible

badge is not visible when badgeValue == null

badgeValue === undefined by default

badgeValue === "" results in dot only

any other badge value gets current treatment.

Additional logic, visible / invisible etc. can be defined by downstream libraries. Let's keep our API minimal here.

changed in 69df8cf

kkafar

Answered your question

kkafar · 2025-07-18T13:35:17Z

src/components/BottomTabsScreen.tsx

@@ -75,6 +75,8 @@ export interface BottomTabsScreenProps {

  // Android specific
  iconResourceName?: string;
+  tabBarItemBadgeVisible?: boolean;


Now to show a dot you pass badgeValue: undefined & badgeVisible: true OR badgeValue: "" & badgeVisible: true?

Therefore to get a dot, user still must consult the documentation. Moreover "" as a value to get a dot only seems natural to me, since it's a badge w/o text 😅

I think it should work as follows:

We should have a single prop, no badgeVisible

badge is not visible when badgeValue == null

badgeValue === undefined by default

badgeValue === "" results in dot only

any other badge value gets current treatment.

Additional logic, visible / invisible etc. can be defined by downstream libraries. Let's keep our API minimal here.

kkafar · 2025-07-18T13:36:19Z

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt

@@ -142,24 +144,18 @@ class TabScreenViewManager :
    }

    override fun setBadgeValue(


I don't like that every other prop has tabBarItem... prefix and this one does not. But this is outside of the scope of this PR. I'll create ticket for this.

kkafar

Looks good, thank you!

maciekstosio added 7 commits July 17, 2025 15:31

feat: pass material theme to bottom navigation using context wrapper

778d03b

add guards

c3c4fc9

add changes from comment

4e10651

chore: remove redundant import

8c746e6

feat: support activity indicator

42058e9

feat: support badge in bottom navigation

8b7cb8b

run formatter

f839b1e

kkafar requested changes Jul 17, 2025

View reviewed changes

Base automatically changed from @maciekstosio/Support-activity-indicator-color- to main July 18, 2025 08:11

Merge branch 'main' into @maciekstosio/support-badge-in-bottom-naviga…

0cb8365

…tion

maciekstosio requested a review from kkafar July 18, 2025 08:21

maciekstosio added 4 commits July 18, 2025 10:52

sync archs

28cc53e

fix types

bb62cc3

style code

3c02d5c

kkafar requested changes Jul 18, 2025

View reviewed changes

kkafar mentioned this pull request Jul 18, 2025

feat(Android, Tabs): Align styles with material design guidelines #3026

Merged

2 tasks

kkafar reviewed Jul 18, 2025

View reviewed changes

maciekstosio added 2 commits July 18, 2025 16:05

add changes from comments

69df8cf

sync archs

20da057

maciekstosio requested a review from kkafar July 18, 2025 14:21

kkafar approved these changes Jul 18, 2025

View reviewed changes

maciekstosio merged commit 767d007 into main Jul 18, 2025
5 checks passed

maciekstosio deleted the @maciekstosio/support-badge-in-bottom-navigation branch July 18, 2025 14:47

	@ReactProp(name = "tabBarItemBadgeTextColor")
	@ReactProp(name = "tabBarItemBadgeTextColor", customType = "Color")

		@@ -142,24 +144,18 @@ class TabScreenViewManager :
		}

		override fun setBadgeValue(

Uh oh!

feat(Android, Tabs): support badge in bottom navigation #3017

feat(Android, Tabs): support badge in bottom navigation #3017

Uh oh!

Conversation

maciekstosio commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots / GIFs

Test code and steps to reproduce

Checklist

Uh oh!

kkafar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maciekstosio Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kkafar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kkafar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kkafar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

maciekstosio commented Jul 17, 2025 •

edited

Loading

maciekstosio Jul 18, 2025 •

edited

Loading