title: Custom navigation operation on specific tab button of react-navigation's tab navigator
body: <p>I wanna open drawer (for example, options menu) from specific button on tab instead of navigating to screen. My current solution was working on react-navigation v2 but as we upgraded from v2 to v3 of react-navigation and v60 of react-native from v57, the solution has stopped working. </p>
  
  <p>There is a dummy screen assigned to the menu tab button in tab bar and I am intercepting the navigation operation using <code>tabBarOnPress()</code>. The method opens drawer and returns if it matches the menu button's route name else it navigates. It seems that the tab navigator is navigating to the dummy screen regardless whatever method I assign to <code>tabBarOnPress()</code> and the method is called as well.</p>
  
  <p>Following is the current code which was working fine v2 but has stopped working in v3:</p>
  
  <pre><code>class SlideMenuScreen extends Component {
  
      render() {
          return null;
      }
  }
  
  
  const tab = createBottomTabNavigator({
      Products: {
          screen: AppStack,
          navigationOptions: {
              tabBarLabel: 'Home',
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;SimpleLineIcons name='home' size={20} color={tintColor} /&gt;
              )
          }
      },
      Cart: {
          screen: CartScreen,
          navigationOptions: {
              tabBarLabel: 'Cart',
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;EvilIcons
                      reverse
                      name='cart'
                      type='font-awesome'
                      color={tintColor}
                      size={30}
                  /&gt;
              )
          }
      },
      SignIn: {
          screen: AuthStack,
          navigationOptions: {
              tabBarLabel: 'Sign in',
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;SimpleLineIcons
                      name='login'
                      color={tintColor}
                      size={20}
                  /&gt;
              )
          }
      },
      SideMenu: {
          screen: SlideMenuScreen,
          navigationOptions: (props) =&gt; ({
              tabBarLabel: 'Menu',
              tabBarIcon:
                  &lt;Entypo
                      name='menu'
                      color={props.tintColor}
                      size={20}
                  /&gt;
          })
      }
  },
      {
          initialRouteName: 'Products',
          swipeEnabled: true,
          tabBarOptions: {
              showLabel: false,
              showIcon: true,
              activeTintColor: config.themeBackgroundColor,
              inactiveTintColor: 'grey',
          },
      }
  );
  
  
  tab.navigationOptions = ({ navigation }) =&gt; {
  
      const { routeName } = navigation.state.routes[navigation.state.index];
      if (routeName === 'SideMenu') {
          navigation.openDrawer();
          return;
      }
      navigation.navigate(routeName);
  };
  
  
  const sideMenu = createDrawerNavigator({
      Home: tab
  }, {
          initialRouteName: 'Home',
          drawerPosition: 'right',
          drawerOpenRoute: 'DrawerOpen',
          drawerCloseRoute: 'DrawerClose',
          drawerToggleRoute: 'DrawerToggle',
          drawerWidth: 250,
          contentComponent: signedOutDrawerContent
      }
  );
  
  </code></pre>