React-Navigation: Hide Parent header

Question

Problem: i have a DrawerNavigator that contains a TabNavigator which contains a StackNavigator, what i needed is the regular three bar icon in the header to open the Drawer instead of swiping right

My Solution: put the TabNavigator that contains a StackNavigator inside a StackNavigator and put the StackNavigator inside the DrawerNavigator

Problem with my solution: when i navigate inside the TabNavigator i get double headers (it's normal because i have 2 StackNavigators) and i can only hide the back arrow header, i always get left with the 3 tabs icon header.

so how please how can i hide the parent header which contains TabNavigator?

//the drawer navigator
const DNav = DrawerNavigator({
        SportWall: {
            screen: SportWall
            }
        })
        
//the stack that contains the tab navigator
export default StackNavigator({
    SportWall: {
        //just to show the header with the 3 bars icon
        screen: SportWall
    }
    
render() {
  return (
      <Tabs/>
  )
}
    
//the tab navigator
const Tabs = TabNavigator({
    AllPubs: {
        screen: AllPubs
    },
    FriendsPubs: {
        screen: FriendsPubs
    },
});

//the stack inside each tab 
export default StackNavigator({
    AllPubs: {
        screen: AllPubs,
    },
    Pub: {
        screen: Pub, navigationOptions: {tabBarVisible: false}
    },...

Answer 1

Hi you can use your StackNavigator like this example and use the headerMode: 'screen':

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen }
  },{ 
    headerMode: 'screen' 
  }
);

See here for more information.