CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-navigation-bottom-tab
Muhammad Yaqoob
Muhammad Yaqoob

Reputation: 94

tabBarOnPress Not Available in React Navigation v5

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!

Upvotes: 5

Views: 3653

Answers (1)

satya164
satya164

Reputation: 10145

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

Upvotes: 13

Related Questions