fix(iOS, Tabs): update tab bar item only when necessary (#3290)

## Description

Limits changing tab bar item instances ([PR introducing
this](#3164))
to only necessary cases (changing `systemItem`). Unnecessary updates
caused a bug when changing e.g. only `badgeValue`.

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/d99e1120-8311-48d5-8d69-b7079c328ddd"
/> | <video
src="https://github.com/user-attachments/assets/444a60aa-e576-42e3-ba32-2b4232c0234c"
/> |

Fixes
#3273.

## Changes

- separate creating new `UITabBarItem` instance and updating tab bar
item related props
- create new `UITabBarItem` instance only on `systemItem` change
- restore default system item's icon by extracting it from new
`UITabBarSystemItem` instance instead of changing the entire
`UITabBarItem`

## Test code and steps to reproduce

Run `TestBottomTabs`. Change `badgeValue` on selected tab. You can also
check test cases from
#3164.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: kligarski

ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm

@@ -35,6 +35,7 @@ @implementation RNSBottomTabsScreenComponentView {
 #if !RCT_NEW_ARCH_ENABLED
   BOOL _tabItemNeedsAppearanceUpdate;
   BOOL _tabScreenOrientationNeedsUpdate;
+  BOOL _tabBarItemNeedsRecreation;
   BOOL _tabBarItemNeedsUpdate;
   BOOL _scrollEdgeEffectsNeedUpdate;
 #endif // !RCT_NEW_ARCH_ENABLED
@@ -64,6 +65,7 @@ - (void)initState
 #if !RCT_NEW_ARCH_ENABLED
   _tabItemNeedsAppearanceUpdate = NO;
   _tabScreenOrientationNeedsUpdate = NO;
+  _tabBarItemNeedsRecreation = NO;
   _tabBarItemNeedsUpdate = NO;
   _scrollEdgeEffectsNeedUpdate = NO;
 #endif
@@ -172,7 +174,7 @@ - (void)updateContentScrollViewEdgeEffectsIfExists
 
 #pragma mark - Prop update utils
 
-- (void)updateTabBarItem
+- (void)createTabBarItem
 {
   UITabBarItem *tabBarItem = nil;
   if (_systemItem != RNSBottomTabsScreenSystemItemNone) {
@@ -181,14 +183,24 @@ - (void)updateTabBarItem
     tabBarItem = [[UITabBarItem alloc] initWithTabBarSystemItem:systemItem tag:0];
   } else {
     tabBarItem = [[UITabBarItem alloc] init];
-    tabBarItem.title = _title;
   }
 
-  tabBarItem.badgeValue = _badgeValue;
-
   _controller.tabBarItem = tabBarItem;
 }
 
+- (void)updateTabBarItem
+{
+  UITabBarItem *tabBarItem = _controller.tabBarItem;
+
+  if (![tabBarItem.title isEqualToString:_title]) {
+    tabBarItem.title = _title;
+  }
+
+  if (![tabBarItem.badgeValue isEqualToString:_badgeValue]) {
+    tabBarItem.badgeValue = _badgeValue;
+  }
+}
+
 #pragma mark - RNSSafeAreaProviding
 
 - (UIEdgeInsets)providerSafeAreaInsets
@@ -222,6 +234,7 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
 
   bool tabItemNeedsAppearanceUpdate{false};
   bool tabScreenOrientationNeedsUpdate{false};
+  bool tabBarItemNeedsRecreation{false};
   bool tabBarItemNeedsUpdate{false};
   bool scrollEdgeEffectsNeedUpdate{false};
 
@@ -274,33 +287,28 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
   if (newComponentProps.iconType != oldComponentProps.iconType) {
     _iconType = rnscreens::conversion::RNSBottomTabsIconTypeFromIcon(newComponentProps.iconType);
     tabItemNeedsAppearanceUpdate = YES;
-    tabBarItemNeedsUpdate = YES;
   }
 
   if (newComponentProps.iconImageSource != oldComponentProps.iconImageSource) {
     _iconImageSource =
         rnscreens::conversion::RCTImageSourceFromImageSourceAndIconType(&newComponentProps.iconImageSource, _iconType);
     tabItemNeedsAppearanceUpdate = YES;
-    tabBarItemNeedsUpdate = YES;
   }
 
   if (newComponentProps.iconSfSymbolName != oldComponentProps.iconSfSymbolName) {
     _iconSfSymbolName = RCTNSStringFromStringNilIfEmpty(newComponentProps.iconSfSymbolName);
     tabItemNeedsAppearanceUpdate = YES;
-    tabBarItemNeedsUpdate = YES;
   }
 
   if (newComponentProps.selectedIconImageSource != oldComponentProps.selectedIconImageSource) {
     _selectedIconImageSource = rnscreens::conversion::RCTImageSourceFromImageSourceAndIconType(
         &newComponentProps.selectedIconImageSource, _iconType);
     tabItemNeedsAppearanceUpdate = YES;
-    tabBarItemNeedsUpdate = YES;
   }
 
   if (newComponentProps.selectedIconSfSymbolName != oldComponentProps.selectedIconSfSymbolName) {
     _selectedIconSfSymbolName = RCTNSStringFromStringNilIfEmpty(newComponentProps.selectedIconSfSymbolName);
     tabItemNeedsAppearanceUpdate = YES;
-    tabBarItemNeedsUpdate = YES;
   }
 
   if (newComponentProps.specialEffects.repeatedTabSelection.popToRoot !=
@@ -334,7 +342,7 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
   if (newComponentProps.systemItem != oldComponentProps.systemItem) {
     _systemItem = rnscreens::conversion::RNSBottomTabsScreenSystemItemFromReactRNSBottomTabsScreenSystemItem(
         newComponentProps.systemItem);
-    tabBarItemNeedsUpdate = YES;
+    tabBarItemNeedsRecreation = YES;
   }
 
   if (newComponentProps.bottomScrollEdgeEffect != oldComponentProps.bottomScrollEdgeEffect) {
@@ -367,6 +375,11 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     scrollEdgeEffectsNeedUpdate = YES;
   }
 
+  if (tabBarItemNeedsRecreation) {
+    [self createTabBarItem];
+    tabBarItemNeedsUpdate = YES;
+  }
+
   if (tabBarItemNeedsUpdate) {
     [self updateTabBarItem];
 
@@ -445,6 +458,13 @@ - (void)didSetProps:(NSArray<NSString *> *)changedProps
   // didSetProps will always be called because tabKey prop is required.
   _isOverrideScrollViewContentInsetAdjustmentBehaviorSet = YES;
 
+  if (_tabBarItemNeedsRecreation) {
+    [self createTabBarItem];
+    _tabBarItemNeedsRecreation = NO;
+
+    _tabBarItemNeedsUpdate = YES;
+  }
+
   if (_tabBarItemNeedsUpdate) {
     [self updateTabBarItem];
     _tabBarItemNeedsUpdate = NO;
@@ -501,35 +521,30 @@ - (void)setIconType:(RNSBottomTabsIconType)iconType
 {
   _iconType = iconType;
   _tabItemNeedsAppearanceUpdate = YES;
-  _tabBarItemNeedsUpdate = YES;
 }
 
 - (void)setIconImageSource:(RCTImageSource *)iconImageSource
 {
   _iconImageSource = iconImageSource;
   _tabItemNeedsAppearanceUpdate = YES;
-  _tabBarItemNeedsUpdate = YES;
 }
 
 - (void)setIconSfSymbolName:(NSString *)iconSfSymbolName
 {
   _iconSfSymbolName = [NSString rnscreens_stringOrNilIfEmpty:iconSfSymbolName];
   _tabItemNeedsAppearanceUpdate = YES;
-  _tabBarItemNeedsUpdate = YES;
 }
 
 - (void)setSelectedIconImageSource:(RCTImageSource *)selectedIconImageSource
 {
   _selectedIconImageSource = selectedIconImageSource;
   _tabItemNeedsAppearanceUpdate = YES;
-  _tabBarItemNeedsUpdate = YES;
 }
 
 - (void)setSelectedIconSfSymbolName:(NSString *)selectedIconSfSymbolName
 {
   _selectedIconSfSymbolName = [NSString rnscreens_stringOrNilIfEmpty:selectedIconSfSymbolName];
   _tabItemNeedsAppearanceUpdate = YES;
-  _tabBarItemNeedsUpdate = YES;
 }
 
 - (void)setBottomScrollEdgeEffect:(RNSScrollEdgeEffect)bottomScrollEdgeEffect
@@ -596,7 +611,7 @@ - (void)setScrollEdgeAppearance:(NSDictionary *)scrollEdgeAppearanceProps
 - (void)setSystemItem:(RNSBottomTabsScreenSystemItem)systemItem
 {
   _systemItem = systemItem;
-  _tabBarItemNeedsUpdate = YES;
+  _tabBarItemNeedsRecreation = YES;
 }
 
 - (void)setOrientation:(RNSOrientation)orientation

ios/bottom-tabs/RNSTabBarAppearanceCoordinator.mm

@@ -55,10 +55,20 @@ - (void)setIconsForTabBarItem:(UITabBarItem *)tabBarItem
   if (screenView.iconType == RNSBottomTabsIconTypeSfSymbol) {
     if (screenView.iconSfSymbolName != nil) {
       tabBarItem.image = [UIImage systemImageNamed:screenView.iconSfSymbolName];
+    } else if (screenView.systemItem != RNSBottomTabsScreenSystemItemNone) {
+      // Restore default system item icon
+      UITabBarSystemItem systemItem =
+          rnscreens::conversion::RNSBottomTabsScreenSystemItemToUITabBarSystemItem(screenView.systemItem);
+      tabBarItem.image = [[UITabBarItem alloc] initWithTabBarSystemItem:systemItem tag:0].image;
     }
 
     if (screenView.selectedIconSfSymbolName != nil) {
       tabBarItem.selectedImage = [UIImage systemImageNamed:screenView.selectedIconSfSymbolName];
+    } else if (screenView.systemItem != RNSBottomTabsScreenSystemItemNone) {
+      // Restore default system item icon
+      UITabBarSystemItem systemItem =
+          rnscreens::conversion::RNSBottomTabsScreenSystemItemToUITabBarSystemItem(screenView.systemItem);
+      tabBarItem.selectedImage = [[UITabBarItem alloc] initWithTabBarSystemItem:systemItem tag:0].selectedImage;
     }
   } else if (imageLoader != nil) {
     bool isTemplate = screenView.iconType == RNSBottomTabsIconTypeTemplate;