CODEWITHSUNDEEP
react-nativereact-navigation
Sadik anass
Sadik anass

Reputation: 292

React-Navigation: Hide Parent header

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}
    },...

Upvotes: 4

Views: 4800

Answers (2)

Ross
Ross

Reputation: 74

you shouldn't use a StackNavigator just to show the header that shows the drawer. You could set a custom header with the hamburger button at left that fires the drawer onPress for all the screens that need it:

<Button
  onPress={() => this.props.navigation.navigate('DrawerOpen')}
  title="Open drawer"
/>

don't forget to add headerMode: "none" to the Navigator options

Upvotes: 0

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

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.

Upvotes: 1

Related Questions