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}
},...
Hi you can use your
StackNavigator
like this example and use theheaderMode: 'screen'
:See here for more information.