fix: fix crash when change tab bar label during runtime (#250)

* fix: fix crash when change tab bar label during runtime

* Apply suggestions from code review

* docs: add changesets

---------

Co-authored-by: Oskar Kwaśniewski <[email protected]>

Author: owinter86

.changeset/two-lobsters-exercise.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+fix crash when change tab bar label during runtime

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('New Article')
           },
         }}
         options={{
           tabBarButtonTestID: 'articleTestID',
           tabBarBadge: '10',
+          tabBarLabel: label,
           tabBarIcon: ({ focused }) =>
             focused
               ? require('../../assets/icons/person_dark.png')

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -197,16 +197,16 @@ class ReactBottomNavigationView(context: ReactContext) : LinearLayout(context) {
   }
 
   private fun onTabSelected(item: MenuItem) {
-    val selectedItem = items.first { it.title == item.title }
+    val selectedItem = items[item.itemId]
     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 +220,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 +374,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 +407,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(