Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

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

$
0
0

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


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>