fix: fix crash when change tab bar label during runtime

callstackincubator · Jan 21, 2025 · c2439ee · c2439ee
1 parent c19fdef
commit c2439ee
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/apps/example/src/Examples/NativeBottomTabs.tsx b/apps/example/src/Examples/NativeBottomTabs.tsx
@@ -4,10 +4,12 @@ import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 import { Platform } from 'react-native';
+import { useState } from 'react';
 
 const Tab = createNativeBottomTabNavigator();
 
 function NativeBottomTabs() {
+  const [label, setLabel] = useState('Article');
   return (
     <Tab.Navigator
       initialRouteName="Chat"
@@ -40,11 +42,13 @@ function NativeBottomTabs() {
             console.log(
               `${Platform.OS}: Long press detected on tab with key ${data.target} at the screen level.`
             );
+            setLabel("CHANGED")
           },
         }}
         options={{
           tabBarButtonTestID: 'articleTestID',
           tabBarBadge: '10',
+          tabBarLabel: label,
           tabBarIcon: ({ focused }) =>
             focused
               ? require('../../assets/icons/person_dark.png')

diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -84,6 +84,7 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
       LayoutParams.WRAP_CONTENT
     ))
 
+
     post {
       addOnLayoutChangeListener { _, left, top, right, bottom,
                                   _, _, _, _ ->
@@ -197,16 +198,19 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
   }
 
   private fun onTabSelected(item: MenuItem) {
-    val selectedItem = items.first { it.title == item.title }
+    val selectedItem = items[item.itemId]
+    println(selectedItem.title)
+    println(item.title)
     selectedItem.let {
       onTabSelectedListener?.invoke(selectedItem.key)
       emitHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)
     }
+
   }
 
   private fun onTabLongPressed(item: MenuItem) {
-    val longPressedItem = items.firstOrNull { it.title == item.title }
-    longPressedItem?.let {
+    val longPressedItem = items[item.itemId]
+    longPressedItem.let {
       onTabLongPressedListener?.invoke(longPressedItem.key)
       emitHapticFeedback(HapticFeedbackConstants.LONG_PRESS)
     }
@@ -220,6 +224,10 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
     this.items = items
     items.forEachIndexed { index, item ->
       val menuItem = getOrCreateItem(index, item.title)
+      if (item.title !== menuItem.title) {
+        menuItem.title = item.title
+      }
+
       menuItem.isVisible = !item.hidden
       if (iconSources.containsKey(index)) {
         getDrawable(iconSources[index]!!) {
@@ -370,7 +378,7 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
 
   private fun updateTextAppearance() {
     if (fontSize != null || fontFamily != null || fontWeight != null) {
-      val menuView = getChildAt(0) as? ViewGroup ?: return
+      val menuView = bottomNavigation.getChildAt(0) as? ViewGroup ?: return
       val size = fontSize?.toFloat()?.takeIf { it > 0 } ?: 12f
       val typeface = ReactFontManager.getInstance().getTypeface(
         fontFamily ?: "",
@@ -403,7 +411,9 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
 
   private fun updateTintColors(item: MenuItem? = null) {
     // First let's check current item color.
-    val currentItemTintColor = items.find { it.title == item?.title }?.activeTintColor
+    val currentItemTintColor = item?.itemId?.let { itemId ->
+      items[itemId].activeTintColor
+    }
 
     // getDefaultColor will always return a valid color but to satisfy the compiler we need to check for null
     val colorPrimary = currentItemTintColor ?: activeTintColor ?: Utils.getDefaultColorFor(