androidreact-nativewix-react-native-navigation

Remove notification badge on bottomTabs not working on android through mergeOptions (WIX)


I'm using Wix Navigation ^3.1.2 in my React Native ^0.60.5 app. I set a bottomTab in a stack screen where I manually add a badge number through Navigation.mergeOptions() method. Whenever I read the messages in the chat, I want to remove this badge from the Message button. So what I currently do is passing badge to null.

It works on iOS without any problems, but on Android, it doesn't make it disappear.

I even attempted passing an empty object to bottomTab like bottomTab: {} and still didn't work.

I have the following stack structure:

stack: {
    id: 'MessageStack',
    children: [
    {
       component: {
          id: 'MessageScreen',
          name: 'myapp.MessageScreen'
       }
    }],
    options: {
       bottomTab: {
          text: i18n.t('messages'),
          icon: iconsMap['message-light'],
          selectedIcon: iconsMap['message-solid'],
          badgeColor: 'red',
          ...navigatorStyle
       }
    }
}

And this is what I do when I want to remove it:

let badgeValue = null;
if (totalUnread > 0) {
   badgeValue = (totalUnread > 9) ? '9+' : `${totalUnread}`;
}

Navigation.mergeOptions('MessageScreen', {
   bottomTab: {
      badge: badgeValue
   }
});    

Any ideas on how to achieve this on Android? Thanks.


Solution

  • If anyone is under the same problem, it was as easy as passing an empty string to remove it. I thought I tested and didn't work but after the recommendation on github I tested again and worked.