Q:

Navigate to the screen when Tab on BottomTabNavigator is pressed

I would like to navigate to the screen when the particular tab on the BottomTabNavigator is pressed.
Normally, when the tab is pressed, it navigates to the configured screen automatically.  But I don't want to have that behaviour.  I want to hide the bottom tab on that screen and provide back feature in the top bar too.  I normally use navigation.navigate('routeName') in ReactNavigationStack screens.  But I don't know how/where to write this code in the BottomTabNavigator configuration.
For example, I've got the following 5 tabs in the bottom bar.  I want to navigate to AddNewScreen when Add button is pressed.  I don't know where to put that onPress event.  I tried to put it under options and BottomTab.Screen.  But still no luck.

I tried to intercept onPress event to use navigation.navigate.  But it's not even hit and it always opens the AddNewScreen with the tab bar.
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        initialParams="Home Params"
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-home" iconType="ion" />,
        }}
      />      
      <BottomTab.Screen
        name="AddNew"
        component={AddNewScreen}        
        options={{
          title: 'Add',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-add-circle" iconType="ion" 
          onPress={(e) => {
            e.preventDefault();
            console.log(e)
          }} />,    
        }}
      />
</BottomTab.Navigator>

The Add new screen is always opened with the bottom tab bar.

Questions:

Is there anyway to navigate to specific screen when the tab is
pressed? 
Is there anyway to hide the bottom tab bar on that Add New
Screen?

A:

You can have a custom functionality in the bottom toolbar using the tabbar button. The code would be like below
 <Tab.Screen name="Settings2" component={SettingsScreen} options={{
  tabBarButton: (props) => (<TouchableOpacity  {...props} onPress={()=>alert(123)}/>),
}}/>

This would render a normal bottom tab bar button but the onclick would show the alert, you can replace the code with your navigate or any other code you need.
Also the 'SettingsScreen' component can be a dummy component returning null.
Hope this helps.

