expo - show number in cart icon using package react-navigation-header-buttons package

Question

I am using react-navigation-header-buttons package for displaying icon in navigation header in my react native app.I want to show numbers in cart icon when items is added to cart.How to show numbers in cart icon?

HeaderButton.js file

import React from 'react';
import { HeaderButton } from 'react-navigation-header-buttons';
import { FontAwesome5 } from '@expo/vector-icons';

const HeaderButton = (props) => {
  return (
    <HeaderButton
      {...props}
      IconComponent={FontAwesome5}
      iconSize={23}
      color="red"
    />
  );
};

export default HeaderButton;

In my screenOptions

import HeaderButton from './HeaderButton';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
....
 headerRight: () => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='cart'
          iconName='shopping-cart'
          onPress={() => {
            navData.navigation.navigate('Cart');
          }}
        />
      </HeaderButtons>
    ),

question from:https://stackoverflow.com/questions/65858214/show-number-in-cart-icon-using-package-react-navigation-header-buttons-package

Answer 1

Waitting for answers