React Native's React-Navigation: Adding a badge in TabNavigator's Tab

Question

In React-Native with React-Navigation I have a Tabnavigator like so:

const testScreenNavigator = TabNavigator({
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
    Tab3: { screen: Tab3Screen },
});
testScreenNavigator.navigationOptions = {
    title: 'MY TITLE',
    header: {
        titleStyle:{
        },
        style:{
// how to set the options?
        },
    }  
}

Now I want to add a badge next to Tab1: e.g.

Tab1 (2) | Tab2 | Tab3

In Android this can be done via:

 static navigationOptions = {

     tabBar: {
          label: () => {
                ... 
                return (
                   <Text style={{ backgroundColor: '...', borderRadius: 10}}>
                       {badgeNumber}
                   </Text>
                ...

In iOS it displays the TabMenu at the bottom, which is ok, since it is the native behavior of iOS. But in iOS the circle of the badge does not show, but a rectangular background instead.

Why is that and/or how would a Badge be done in iOS?

Regards

Answer 1

There is actually a badge-package in RN: https://github.com/react-native-component/react-native-smart-badge .