1

I am trying to put a badge head on a tab bar in React Native but it is not working.

Below is an example of my code:

These are my module versions :

"@react-navigation/native": "^6.0.14",
"@react-navigation/bottom-tabs": "^6.4.1",

This is my code :

      <Tab.Screen 
          name={'ApprovalTab'} 
          component={ApprovalScreen} 
          options={{tabBarBadge:3,
                    tabBarBadgeStyle:{color:'red'}}} 
        />
server_unknown
  • 407
  • 2
  • 17
Alihaydar
  • 91
  • 3
  • 9

1 Answers1

1

try this code

import { Ionicons } from '@expo/vector-icons';

         <Tab.Screen
          name={'ApprovalTab'}
          component={ApprovalScreen}
          options={{
            tabBarBadge: 0,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color="red" size={30} />
            ),
          }}
        />

hope this will help you!!

  • First of all ,thanks for your comment but I am not trying to display icon over it ı need to put a number to display current number of unread notifications, nevertheless thanks for it. – Alihaydar Jan 09 '23 at 15:39
  • like a notification ? in shopping app ? –  Jan 09 '23 at 15:51
  • If you visit https://reactnavigation.org/docs/tab-based-navigation/ that link and search tabBarBadge,you will understand what ı am trying to do. – Alihaydar Jan 10 '23 at 08:38
  • https://snack.expo.dev/?platform=web –  Jan 10 '23 at 08:45
  • like this ? you want ? –  Jan 10 '23 at 08:45
  • yes exactly, like this. – Alihaydar Jan 10 '23 at 08:47
  • ok I'm using redux in shopping app if I add 2 item to cart my cart tab bar display 3 badge in upon icon and I give this one to you way answer if you don't understand send your code then i will try –  Jan 10 '23 at 08:53
  • now see I updated the answer –  Jan 10 '23 at 09:05