how to add badge or text to tabbar.

[cbjs]

I can't figure out a way to do it.

like count of unread messages, which stored in redux state.

[maurovisintin]

you can just pass a connected component as icon

    screen: NotificationScreen,
    navigationOptions: {
      tabBar: (state, acc) => ({
        icon: ({ tintColor, focused }) => (
          <BadgeTabIcon
            iconName="notification"
            size={26}
            selected={focused}
          />
        ),
        visible: (acc && acc.visible !== 'undefined') ? acc.visible : true,
      }),
    },
  },

where

export default connect(state => ({
  notificationCount: state.notifications.count,
}))(({ dispatch, nav }) => (
  <View>
    <TabIcon {...props} />
    {
      props.notificationCount > 0 ?
        <View style={{ position: 'absolute', right: 10, top: 5, backgroundColor: 'red', borderRadius: 9, width: 18, height: 18, justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ color: 'white' }}>{props.notificationCount}</Text>
        </View> : null
    }
  </View>
));

[cbjs]

@sexykodo thanks~~

[mfclarke]

Still a noob so forgive the ignorance, but is there a non-redux way to do this?

[niocncn]

@mfclarke use mobX

[mfclarke]

@niocncn I should have said "is there an out of the box way of doing this?" I don't want to adopt a state management lib just because I can't set a badge on a tab. But thanks for the answer anyways.

What I was missing was using navigation.setParams, which sets params on the state object that you have access to in navigationOptions.

[AlanFoster]

Cross-referencing a duplicate/similar question #859

[beausmith]

Code snippets from another sample implementation…

Set screenProps where the component is rendered. Static value used for simplicity of example.

<App screenProps={{ unreadMessagesCount: 8 }} />

Using react-native-icon-badge with icons from react-native-vector-icons, read screenProps in navigationOptions to define a tabBarIcon with a badge:

const App = TabNavigator({
  Main: {
    screen: Main,
    navigationOptions: {
      tabBarIcon: ({tintColor}) => <Icon name='book' size={22} color={tintColor} />
    }
  },
  Profile: {
    screen: ProviderStack,
    navigationOptions: ({ screenProps }) => ({
      tabBarIcon: ({tintColor}) =>
        <IconBadge
          MainElement={<Icon name='user-circle' size={22} color={tintColor} />}
          BadgeElement={<Text style={{ color: 'white' }}>{screenProps.unreadMessagesCount}</Text>}
          Hidden={screenProps.unreadMessagesCount === 0}
        />
    })
  }
})

Update: I've since replaced react-native-icon-badge with my own code because of how simple the code is to DIY. 😄

[hansfpc]

Niceeeee!

[Stophface]

@beausmith that simply overlays a red circle over the icon from react-native-vector-icons. The problem is that the circle gets cut off, as soon as it passes the bounds of the chosen icon from react-native-vector-icons.

[alihamza]

@mfclarke did you find any solution?

[reyhaan]

iconStyle: { width: 70 }

@Stophface Add this to your tab config (tabBarOptions), play with width value to make your badge visible.