'How to just add a small dot to react nativation bottom tab navigator icon - badges

I'm trying to implement a notification dot ontop of my activity icon in the bottom tab navigator. Here is my code:

const Tab = createBottomTabNavigator();

@inject('store')
@observer
class HomeTabs extends React.Component<HomeProps> {

  render() {
    return (
      <NavigationContainer independent={true} ref={mainNavigationRef}>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused }) => {
              let iconName='question';
              if (route.name === 'Home') {
                iconName = focused
                  ? 'home'
                  : 'home-outline';
              } 
              else if (route.name === 'Activity') {
                iconName = focused ? 'bell' : 'bell-outline';
              }
              else if (route.name === 'Search') {
                iconName = focused ? 'search-web' : 'magnify';
              }
              else if (route.name === 'Profile') {
                iconName = focused ? 'account' : 'account-outline';
              }

              // You can return any component that you like here!
              return <Icon name={iconName} type='material-community' color='#000000' size={24}/>;
            },
          })}
          tabBarOptions={{
            activeTintColor: 'black',
            inactiveTintColor: 'gray',
          }}
        >
        <Tab.Screen name="Home" component={YourPostsStack} />
        <Tab.Screen name="Activity" component={ActivityStack} options={{tabBarBadge: true}} />
        <Tab.Screen name="Search" component={SearchStack} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
    )
  }
}

I saw 'tabBarBadge' in the reactNavigation docs, but making it an empty string, the badge is super large for what i need. I just need a small dot to indicate that there are notifications to be seen. Is there any other way to do this with bottomTabNavigation? Any other ideas?

node.jsreact-nativereact-navigationbadge


Solution 1:[1]

A bit late, but this will work:

tabBarBadgeStyle: { backgroundColor: 'blue', height: 12, minWidth: 12, borderRadius: 6},

Solution 2:[2]

Here's an alternative because pors solution wasn't working for me.

<Tab.Screen
  options={{
    tabBarBadge: '',
    tabBarBadgeStyle: {
      minWidth: 14,
      minHeight: 14,
      maxWidth: 14,
      maxHeight: 14,
      borderRadius: 7,
    },
  }}
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pors
Solution 2 geg

Related Questions