[V6] Merge bottomtab badge, the bottoms tab disappear

[moonjava2005]

I have 5 tabs, after app launch and show at tab 0, I merge option for tab 1, 2, 3, 4 to update the badge with follow code: Navigation.mergeOptions('CertainComponentId', { bottomTab: { badge: '2' } }); The tab bar will disappear

Environment

• React Native Navigation version: 6.0.1
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[namdao]

I have the same issue, when I set

Navigation.mergeOptions(screenName, {
    bottomTab: {
      badge: '10+',
      badgeColor: 'red',
    }
  });

the bottoms tabs is disappear. It work well in the previous version of my project (v2.22.0)

Environment

• React Native Navigation: 6.0.0
• React Native version: 0.62.0-rc.2
• Platform: iOS (not sure it work well on android)

[moonjava2005]

I found this on UIViewController + RNNOptions.m: `- (void)setTabBarItemBadge:(NSString )badge { UITabBarItem tabBarItem = self.tabBarItem;

if ([badge isKindOfClass:[NSNull class]] || [badge isEqualToString:@""]) {
    tabBarItem.badgeValue = nil;
} else {
    tabBarItem.badgeValue = badge;
    [[self.tabBarController.tabBar viewWithTag:tabBarItem.tag] removeFromSuperview];
    tabBarItem.tag = -1;
}

} May be there's something wrong We should change to: - (void)setTabBarItemBadge:(NSString )badge { UITabBarItem tabBarItem = self.tabBarItem;

if ([badge isKindOfClass:[NSNull class]] || [badge isEqualToString:@""]) {
    tabBarItem.badgeValue = nil;
} else {
    tabBarItem.badgeValue = badge;
}

}` It works

[habovh]

I'm having kind of a similar issue with 6.2.0. For me the bottomTabs do not disappear, but adding a badge through mergeOptions results in the corresponding tab to "copy" the first tab + adding the badge. If for examples tabs are like so:

A() B() C()

and I wish to set a "1" badge to tab C, then I end up with the following:

A() B() A(1)

Icons, text and any other option gets "copied" from the first tab in the row to the one I updated.

To fix this, I ended up adding every option again when calling mergeOptions, but it is not ideal.

[guyca]

@habovh You issue is fixed in 6.2.0-snapshot.879

[parth-koshta]

Got this issue on 7.1.0 (IOS) Setting the icons and text again fixed it for me. Navigation.mergeOptions(screenName, { bottomTab: { icon: Icons.ordersTab, selectedIcon: Icons.ordersTabActive, text: 'Orders', badge: '10+', badgeColor: 'red', } });

[kirgy]

I'm also experiencing this issue version "react-native-navigation": "^7.37.0".

In my case I'm performing this mergeOptions on a tab navigation, stack. The following is called in a useEffect on each of those screens;

    Navigation.mergeOptions(screenName, {
      bottomTab: {
        badge:
          menuBadgeNotificationCount > 0
            ? menuBadgeNotificationCount.toString()
            : "",
      },
    });

On at least iOS 16.1, this causes the bottom tab icon to disappear for the root tab menu item. As parth-koshta suggested above, this change resolves the issue for me;

    Navigation.mergeOptions(screenName, {
      bottomTab: {
+       icon: images.icon,
        badge:
          menuBadgeNotificationCount > 0
            ? menuBadgeNotificationCount.toString()
            : "",
      },
    });

Where images.icon is a copy of the same icon originally set on app boot.