react-nativereact-navigation-v6

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


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.


Solution

  • Tab.Navigator now has onTabLongPress option.

    <Tab.Navigator
      onTabLongPress={handleTabLongPress}
    >
    

    My package.json

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