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

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

@@ -43,6 +43,20 @@ class TabScreen(
         updateMenuItemAttributesIfNeeded(oldValue, newValue)
     }
 
+    // Badge
+    var badgeValue: String? by Delegates.observable(null) { _, oldValue, newValue ->
+        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    }
+
+    var tabBarItemBadgeTextColor: Int? by Delegates.observable(null) { _, oldValue, newValue ->
+        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    }
+
+    var tabBarItemBadgeBackgroundColor: Int? by Delegates.observable(null) { _, oldValue, newValue ->
+        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    }
+
+    // Icon
     var iconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
         if (newValue != oldValue) {
             icon = getSystemDrawableResource(reactContext, newValue)

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

@@ -83,10 +83,13 @@ class TabScreenViewManager :
         value: Int?,
     ) = Unit
 
+    @ReactProp(name = "tabBarItemBadgeBackgroundColor", customType = "Color")
     override fun setTabBarItemBadgeBackgroundColor(
         view: TabScreen,
         value: Int?,
-    ) = Unit
+    ) {
+        view.tabBarItemBadgeBackgroundColor = value
+    }
 
     override fun setTabBarItemTitlePositionAdjustment(
         view: TabScreen?,
@@ -142,24 +145,18 @@ class TabScreenViewManager :
     }
 
     override fun setBadgeValue(
-        view: TabScreen?,
-        value: String?,
-    ) = Unit
-
-    @ReactProp(name = "title")
-    override fun setTitle(
         view: TabScreen,
         value: String?,
     ) {
-        view.tabTitle = value
+        view.badgeValue = value
     }
 
-    @ReactProp(name = "iconResourceName")
-    override fun setIconResourceName(
+    @ReactProp(name = "title")
+    override fun setTitle(
         view: TabScreen,
         value: String?,
     ) {
-        view.iconResourceName = value
+        view.tabTitle = value
     }
 
     override fun setSpecialEffects(
@@ -172,6 +169,23 @@ class TabScreenViewManager :
         value: Boolean
     ) = Unit
 
+    // Android specific
+    @ReactProp(name = "tabBarItemBadgeTextColor", customType = "Color")
+    override fun setTabBarItemBadgeTextColor(
+        view: TabScreen,
+        value: Int?,
+    ) {
+        view.tabBarItemBadgeTextColor = value
+    }
+
+    @ReactProp(name = "iconResourceName")
+    override fun setIconResourceName(
+        view: TabScreen,
+        value: String?,
+    ) {
+        view.iconResourceName = value
+    }
+
     companion object {
         const val REACT_CLASS = "RNSBottomTabsScreen"
     }

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

@@ -1,6 +1,7 @@
 package com.swmansion.rnscreens.gamma.tabs
 
 import com.swmansion.rnscreens.R
+import android.annotation.SuppressLint
 import android.content.res.ColorStateList
 import android.util.Log
 import android.view.Choreographer
@@ -23,6 +24,7 @@ import com.swmansion.rnscreens.BuildConfig
 import com.swmansion.rnscreens.gamma.helpers.FragmentManagerHelper
 import kotlin.properties.Delegates
 
+@SuppressLint("PrivateResource") // We want to use variables from material design for default values
 class TabsHost(
     val reactContext: ThemedReactContext,
 ) : LinearLayout(reactContext),
@@ -92,8 +94,10 @@ class TabsHost(
 
     private val containerUpdateCoordinator = ContainerUpdateCoordinator()
 
+    private val wrappedContext = ContextThemeWrapper(reactContext, R.style.custom)
+
     private val bottomNavigationView: BottomNavigationView =
-        BottomNavigationView(ContextThemeWrapper(reactContext, R.style.custom)).apply {
+        BottomNavigationView(wrappedContext).apply {
             layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
         }
 
@@ -302,7 +306,8 @@ class TabsHost(
         bottomNavigationView.itemIconTintList = ColorStateList(states, iconColors)
 
         // ActivityIndicator color
-        val activityIndicatorColor = tabBarItemActivityIndicatorColor ?: com.google.android.material.R.color.m3_sys_color_dynamic_light_on_secondary_container
+        val activityIndicatorColor =
+            tabBarItemActivityIndicatorColor ?: com.google.android.material.R.color.m3_sys_color_dynamic_light_on_secondary_container
         bottomNavigationView.itemActiveIndicatorColor = ColorStateList.valueOf(activityIndicatorColor)
 
         // First clean the menu, then populate it
@@ -318,7 +323,11 @@ class TabsHost(
                     fragment.tabScreen.tabTitle,
                 )
 
+            // Icon
             item.icon = fragment.tabScreen.icon
+
+            // Badge
+            updateBadgeAppearance(index, fragment.tabScreen)
         }
 
         // Update font styles
@@ -370,6 +379,41 @@ class TabsHost(
         }
     }
 
+    private fun updateBadgeAppearance(
+        menuItemIndex: Int,
+        tabScreen: TabScreen,
+    ) {
+        val badgeValue = tabScreen.badgeValue
+
+        if (badgeValue == null) {
+            val badge = bottomNavigationView.getBadge(menuItemIndex)
+            badge?.isVisible = false
+
+            return
+        }
+
+        val badgeValueNumber = badgeValue.toIntOrNull()
+
+        val badge = bottomNavigationView.getOrCreateBadge(menuItemIndex)
+        badge.isVisible = true
+
+        badge.clearText()
+        badge.clearNumber()
+
+        if (badgeValueNumber != null) {
+            badge.number = badgeValueNumber
+        } else if (badgeValue != "") {
+            badge.text = badgeValue
+        }
+
+        // Styling
+        badge.badgeTextColor =
+            tabScreen.tabBarItemBadgeTextColor ?: wrappedContext.getColor(com.google.android.material.R.color.m3_sys_color_light_on_error)
+        badge.backgroundColor =
+            tabScreen.tabBarItemBadgeBackgroundColor
+                ?: wrappedContext.getColor(com.google.android.material.R.color.m3_sys_color_light_error)
+    }
+
     private fun updateSelectedTab() {
         val newFocusedTab =
             checkNotNull(tabScreenFragments.find { it.tabScreen.isFocusedTab }) { "[RNScreens] No focused tab present" }
@@ -448,6 +492,9 @@ class TabsHost(
     ) {
         menuItem.title = tabScreen.tabTitle
         menuItem.icon = tabScreen.icon
+
+        // Badge
+        updateBadgeAppearance(bottomNavigationView.menu.children.indexOf(menuItem), tabScreen)
     }
 
     internal fun onViewManagerAddEventEmitters() {

android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerDelegate.java

@@ -66,6 +66,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "iconResourceName":
         mViewManager.setIconResourceName(view, value == null ? null : (String) value);
         break;
+      case "tabBarItemBadgeTextColor":
+        mViewManager.setTabBarItemBadgeTextColor(view, ColorPropConverter.getColor(value, view.getContext()));
+        break;
       case "iconType":
         mViewManager.setIconType(view, (String) value);
         break;

android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerInterface.java

@@ -29,6 +29,7 @@ public interface RNSBottomTabsScreenManagerInterface<T extends View>  {
   void setTabBarItemBadgeBackgroundColor(T view, @Nullable Integer value);
   void setTitle(T view, @Nullable String value);
   void setIconResourceName(T view, @Nullable String value);
+  void setTabBarItemBadgeTextColor(T view, @Nullable Integer value);
   void setIconType(T view, @Nullable String value);
   void setIconImageSource(T view, @Nullable ReadableMap value);
   void setIconSfSymbolName(T view, @Nullable String value);

apps/src/tests/TestBottomTabs/index.tsx

@@ -18,7 +18,6 @@ const TAB_CONFIGS: TabConfiguration[] = [
   {
     tabScreenProps: {
       tabKey: 'Tab1',
-      badgeValue: '1',
       title: 'Tab1',
       isFocused: true,
       icon: {
@@ -34,8 +33,8 @@ const TAB_CONFIGS: TabConfiguration[] = [
   {
     tabScreenProps: {
       tabKey: 'Tab2',
-      badgeValue: '2',
-      tabBarItemBadgeBackgroundColor: Colors.PurpleLight100,
+      badgeValue: 'NEW',
+      tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
       tabBarBackgroundColor: Colors.NavyDark140,
       tabBarItemTitleFontSize: 20,
       tabBarItemTitleFontStyle: 'italic',
@@ -60,16 +59,16 @@ const TAB_CONFIGS: TabConfiguration[] = [
   {
     tabScreenProps: {
       tabKey: 'Tab3',
-      badgeValue: '3',
-      tabBarItemBadgeBackgroundColor: Colors.YellowDark120,
+      badgeValue: '2137',
+      tabBarItemBadgeBackgroundColor: Colors.RedDark40,
+      tabBarItemBadgeTextColor: Colors.RedDark120,
       icon: {
         imageSource: require('../../../assets/variableIcons/icon.png'),
       },
       selectedIcon: {
         imageSource: require('../../../assets/variableIcons/icon_fill.png'),
       },
-      tabBarItemIconColor: Colors.RedDark120,
-      iconResourceName: 'sym_call_outgoing', // Android specific
+      iconResourceName: 'sym_action_email', // Android specific
       title: 'Tab3',
     },
     contentViewRenderFn: Tab3,
@@ -85,6 +84,7 @@ const TAB_CONFIGS: TabConfiguration[] = [
       },
       iconResourceName: 'sym_action_chat', // Android specific
       title: 'Tab4',
+      badgeValue: '',
     },
     contentViewRenderFn: Tab4,
   },

src/components/BottomTabs.tsx

@@ -47,7 +47,7 @@ export interface BottomTabsProps extends ViewProps {
   tabBarItemTitleFontColorActive?: TextStyle['color'];
   tabBarItemIconColorActive?: ColorValue;
   tabBarItemActivityIndicatorColor?: ColorValue;
-        
+
   // Control
 
   // Experimental support

src/components/BottomTabsScreen.tsx

@@ -75,6 +75,7 @@ export interface BottomTabsScreenProps {
 
   // Android specific
   iconResourceName?: string;
+  tabBarItemBadgeTextColor?: ColorValue;
 
   icon?: Icon;
   selectedIcon?: Icon;

src/fabric/BottomTabsNativeComponent.ts

@@ -66,8 +66,8 @@ export interface NativeProps extends ViewProps {
 
   tabBarItemBadgeBackgroundColor?: ColorValue;
 
-  // Android 
-  tabBarItemTitleFontColorActive?: ColorValue; 
+  // Android
+  tabBarItemTitleFontColorActive?: ColorValue;
   tabBarItemIconColorActive?: ColorValue;
   tabBarItemTitleFontSizeActive?: Float;
   tabBarItemActivityIndicatorColor?: ColorValue;

src/fabric/BottomTabsScreenNativeComponent.ts

@@ -82,6 +82,7 @@ export interface NativeProps extends ViewProps {
 
   // Android-specific image handling
   iconResourceName?: string;
+  tabBarItemBadgeTextColor?: ColorValue;
 
   // iOS-specific: SFSymbol usage
   iconType?: WithDefault<IconType, 'sfSymbol'>;