how to show Badge when use TabNavigator from 'react-navigation'

[zcwhdz]

how to show Badge when use TabNavigator from 'react-navigation'

[spencercarli]

I don't believe that's currently part of the functionality of the library. Something you could do is, via tabBarIcon, render your own view (with the icon inside of it) and the badge with that.

[richardgirges]

Here's a crude example of how I'm adding a badge to a tab in TabNavigator. I'm passing a prop called newConversations into the Navigator's screenProps. Then using that to render a custom-made badge icon.

export default TabNavigator({
  // ...other tabs go here

  ConversationsTab: {
    screen: ConversationsNavigator,
    path: 'conversationstab',
    navigationOptions: ({ screenProps }) => ({
      tabBarIcon: ({ focused }) => (
        <View style={styles.tabIconWrapper}>
          <Image
            focused={focused}
            style={styles.tabBarIcon}
            source={images.conversationsIcon}
          />
          { screenProps.newConversations
            ? <Text style={styles.badgeStyles}>{ screenProps.newConversations }</Text>
            : null
          }
        </View>
      )
    })
  }
});

[devanshsadhotra]

@richardgirges may i know the Styling u have used?

[kelset]

Pinging OP @zcwhdz since this issue has not been active for a while, and it's related to an old version of the lib.

Please let me know if you want this to remain open (does it still happen in the latest version?); if I get no answer in the next 7 days I will close it.

Moreover the code snippet @richardgirges provided is the same one I use in my own code; it may be worth doing a small PR to docs to add it.

[kelset]

Hi there @zcwhdz ,

In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.

If you are still having the issue with the latest version (especially if it's a bug report) please check the current open issues, and if you can't find a duplicate, open a new one that uses the new Issue Template to provide some more details to help us solve it.

[ChiragDugar]

@richardgirges may i know the Styling u have used?

Hey, this is the styling used.

position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',