How can I show badges in bottom tabs navigator?

Question

My React Native app uses bottom tab navigator. I want to show badges with numbers as notifications when possible. I use mobx stores for state management. how can I show badges in my tab navigator?

Here is the code for my bottom tab navigator.

const Tab = createBottomTabNavigator();

export default TAB1 = () => {
  return (
    
      <Tab.Navigator style={{ height:50 }}
screenOptions={({ route }) => ({
  headerShown: true  ,     
  tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Browse')
            {
              iconName = focused ? 'checkbox-blank-circle' : 'checkbox-blank-circle-outline';
            }
            else if (route.name === 'Find deals')
            {
              iconName = focused ? 'clipboard-alert' : 'clipboard-alert-outline';
            }
            else if (route.name === 'Favorites')
            {
              iconName = focused ?  'checkbox-multiple-blank-circle' : 'checkbox-multiple-blank-circle-outline';
            }
            else if (route.name === 'More')
            {
              iconName = focused ? 'checkbox-multiple-marked-circle' : 'checkbox-multiple-marked-circle-outline' ;
            }

            // You can return any component that you like here!
            return <Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/>;
          },
        })}
        tabBarOptions={{
          keyboardHidesTabBar: true,
          activeTintColor: 'rgb(30,30,30)',
          inactiveTintColor: 'rgb(68,68,68)',
          //activeBackgroundColor:'',
          //inactiveBackgroundColor:'',
          style : { height:52 },
          tabStyle: { paddingVertical: 2, },
          labelStyle: {
            fontSize: 12,
            margin: 0,
            padding: 0,
          },
        }}

      >
        <Tab.Screen name="Browse" component={PLACEcard1} />
        <Tab.Screen name="Find deals" component={PLACEcard2} />
        <Tab.Screen name="Favorites" options={{headerShown: false}} component={SCREEN1} />
        <Tab.Screen name="More" component={MODAL3} />
      </Tab.Navigator>
    
  );
}

Answer 1

Ciao, on your tabBarIcon you could return an Icon and, for example, a react-native-icon-badge if you don't want to make your own badge icon. Then, with mobx you could hide/show badge, set/reset a number or a text. I mean something like:

tabBarIcon: ({ focused, color, size }) => {
        ...
        return (
           <View>
              <Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/>
              <IconBadge
                MainElement={
                   <View>
                      // customize your badge icon
                   </View>
                }
                BadgeElement={
                   // here your text in badge icon
                   <Text style={{color:'#FFFFFF'}}>{/*here mobx state to notify for example a number*/}</Text>
                }
                IconBadgeStyle={
                  // here the style 
                  }
                Hidden={/*here mobx state show/hide*/}
               />
           </View>
        );
      },