React-Native: tabLongPress event listener on react-navigation bottom tabs

Question

I'm using @react-navigation/material-bottom-tabs and it works great! How can I add the listener for the long press event on tab icons?

<Tab.Navigator ...>
  <Tab.Screen
    ...
    options={{
      tabBarIcon: ({ focused, color }) => (
        <FontAwesomeIcon
          icon={icon}
          color={color}
          size={24}
        />
      ),
    }}
    listeners={{
      tabPress: () => console.log('tabPress')
    }}
  />
</Tab.Navigator>

I tried the following ways to resolve this issue but none works.

• Wrap FontAwesomeIcon with gesture handler
• Add tabLongPress listener

Answer 1

First of all prevent default behavior

React.useEffect(() => {
 const unsubscribe = navigation.addListener('tabPress', (e) => {
 // Prevent default behavior

 e.preventDefault();
 // Do something manually
 });

 return unsubscribe;
}, [navigation]);

Answer 2

Tab.Navigator now has onTabLongPress option.

<Tab.Navigator
  onTabLongPress={handleTabLongPress}
>

My package.json

{
  ...
  "@react-navigation/material-bottom-tabs": "^6.2.4",
  ...
}