How to add badge or text to tabbar


#1

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

like count of unread messages.


#2

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


#3

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.


closed #4

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