How to add badge or text to tabbar

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

like count of unread messages.

Hey @singhalok641,

What does the code you have look like so far? Also, are you referring to the actual UI component or the logic of having a count of unread messages?

Cheers,

Adam

Thanks @adamjnav

import React from ‘react’
import { Platform } from ‘react-native’
import { MaterialCommunityIcons } from ‘@expo/vector-icons’
import { TabNavigator, TabBarBottom } from ‘react-navigation’
import Colors from ‘…/constants/Colors’
import HomeScreen from ‘…/screens/HomeScreen’
import OrdersScreen from ‘…/screens/OrdersScreen’
import CartScreen from ‘…/screens/CartScreen’
import ProfileScreen from ‘…/screens/ProfileScreen’

export default TabNavigator(
{
HOME: {
screen: HomeScreen
},
ORDERS: {
screen: OrdersScreen
},
CART: {
screen: CartScreen
},
PROFILE: {
screen: ProfileScreen
}
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state
let iconName
switch (routeName) {
case ‘HOME’:
iconName = Platform.OS === ‘ios’ ? home${focused ? '' : '-outline'} : ‘home’
break
case ‘ORDERS’:
iconName = Platform.OS === ‘ios’ ? pill${focused ? '' : '-outline'} : ‘pill’
break
case ‘CART’:
iconName = Platform.OS === ‘ios’ ? cart${focused ? '' : '-outline'} : ‘cart’
break
case ‘PROFILE’:
iconName = Platform.OS === ‘ios’ ? account${focused ? '' : '-outline'} : ‘account’
}
return (
<MaterialCommunityIcons
name={iconName}
size={31}
style={{ marginBottom: -3 }}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
)
}
}),
tabBarComponent: TabBarBottom,
tabBarPosition: ‘bottom’,
animationEnabled: false,
swipeEnabled: false
}
)

This is my code for MainTabNavigator.js
It would be great if I could get the code for both the UI component as well as the count of it.

Thanks in advance.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.