title: How can I show badges in bottom tabs navigator?
body: <p>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?</p>
  <p>Here is the code for my bottom tab navigator.</p>
  <pre><code>const Tab = createBottomTabNavigator();
  
  export default TAB1 = () =&gt; {
    return (
      
        &lt;Tab.Navigator style={{ height:50 }}
  screenOptions={({ route }) =&gt; ({
    headerShown: true  ,     
    tabBarIcon: ({ focused, color, size }) =&gt; {
              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 &lt;Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/&gt;;
            },
          })}
          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,
            },
          }}
  
        &gt;
          &lt;Tab.Screen name=&quot;Browse&quot; component={PLACEcard1} /&gt;
          &lt;Tab.Screen name=&quot;Find deals&quot; component={PLACEcard2} /&gt;
          &lt;Tab.Screen name=&quot;Favorites&quot; options={{headerShown: false}} component={SCREEN1} /&gt;
          &lt;Tab.Screen name=&quot;More&quot; component={MODAL3} /&gt;
        &lt;/Tab.Navigator&gt;
      
    );
  }
  </code></pre>