tabBarOnPress Not Available in React Navigation v5

Question

I'm using React Navigation v5 with @react-navigation/bottom-tabs and my tabs look something like this.

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Modal" component={ModalScreen} />
    <Tab.Screen name="Settings" component{SettingsScreen} />
  </Tab.Navigator>

I want to open screens on Home & Settings tab but on the Modal Tab, I would like to open an modal and for that, with React Navigation v4, it is possible using tabBarOnPress which will run the callback but that is not available in React Navigation v5, is there any alternative for tabBarOnPress with React Navigation v5?

Any help would be appreciated!

Answer 1

You need to use tabPress event:

<Tabs.Screen
  name="Modal"
  component={ModalScreen}
  listeners={{
    tabPress: e => {
      // Prevent default action
      e.preventDefault();
    },
  }}
/>

https://reactnavigation.org/docs/bottom-tab-navigator#events

https://reactnavigation.org/docs/navigation-events#listeners-prop-on-screen