Hye..

I currently playing around react-navigation and trying to solve issue where header did not hide when Drawer open...

I hope anyone can share how to solve this buggy header..below I attached my code integration of DrawerNavigator inside StackNavigator.

const Home = DrawerNavigator({
  HomeMenu: { screen: HomeMenu },
  Messages: { screen: Messages },
  Notifications: { screen: Notifications },
  Badges: { screen: Badges },
  Leaderboard: { screen: Leaderboard },
  Profile: { screen: Profile },
  Logout: { screen: Logout }
});

const MainActivity = StackNavigator({
  Home: { screen: Home }
})

Hye..

I currently playing around react-navigation and trying to solve issue where header did not hide when Drawer open...

I hope anyone can share how to solve this buggy header..below I attached my code integration of DrawerNavigator inside StackNavigator.

const Home = DrawerNavigator({
  HomeMenu: { screen: HomeMenu },
  Messages: { screen: Messages },
  Notifications: { screen: Notifications },
  Badges: { screen: Badges },
  Leaderboard: { screen: Leaderboard },
  Profile: { screen: Profile },
  Logout: { screen: Logout }
});

const MainActivity = StackNavigator({
  Home: { screen: Home }
})

Thank you in advance!

• javascript
• react-native
• react-navigation

7 Answers 7

You can hide header like:-

const Home = DrawerNavigator({
  HomeMenu: { screen: HomeMenu,
    navigationOptions: {
          header:false, //hide header if not needed so whole screen slide  

    },
},
  Messages: { screen: Messages },
  Notifications: { screen: Notifications },
  Badges: { screen: Badges },
  Leaderboard: { screen: Leaderboard },
  Profile: { screen: Profile },
  Logout: { screen: Logout }
});

const MainActivity = StackNavigator({
  Home: { screen: Home }
})

Use StackNavigator inside DrawerNavigator and set headerMode: 'none' to root StackNavigator

const MenuStackNavigator = StackNavigator({
  Dashboard: { 
    screen: Dashboard, 
    navigationOptions: {
      title: 'Dashboard',
    }
  },
});
const PagesStackNavigator = StackNavigator({...});

const DrawerNavigator = DrawerNavigator({
  MenuStack: { 
    screen: MenuStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'MenuStackNavigator',
      })
    },
  },
  Pages: { 
    screen: PagesStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'PagesStackNavigator',
      })
    },
  }
});

const AppNavigator = StackNavigator({
  Drawer: { screen: DrawerNavigator },
}, {
  headerMode: 'none',
});

I had the same issue (TabNav nested inside DrawerNav) and found a super easy fix I wanted to share! This issue is discussed here, in the repo for react-navigation. The fix that I implemented (on the screen you want to hide):

MAIN: {
  screen: MainTabs,
  navigationOptions: {
    drawerLabel: () => null // to hide this header
},

},

Slightly different version:

static navigationOptions = {
drawerLabel: () => null

}

Hope this helps!

I found the ways, I just need to do the other way around.. Make DrawerNavigator as the root Navigator and put StackNavigator inside it.. then there will be no header when open the drawer

I was also playing around this problem and found out that StackNavigator has to be nested inside Drawer one, but there are a lot of issues about this solution like synchronizing active menu state inside drawer and card stack.

// Manifest of possible screens

const MenuButton = ({ navigation }) => (
    <View>
        <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
            <Icon name="bars" style={{color: 'white', padding: 10, marginLeft:10, fontSize: 20}}/>
        </TouchableOpacity>
    </View>
);

const Nav = StackNavigator({
  StoriesScreen: {
    screen: StoriesScreen,
    navigationOptions: { title: 'Stories' }
  },
  LaunchScreen: { screen: LaunchScreen },
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: { title: 'Login' }
  }
}, {
  navigationOptions: {
    header: navigation => ({
      style: styles.header,
      left: <MenuButton navigation={navigation} />,
    }),
  }
})

const PrimaryNav = DrawerNavigator({
  StoriesScreen: {
    screen: Nav,
    navigationOptions: { title: 'Stories' }
  },
  LaunchScreen: { screen: LaunchScreen },
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: { title: 'Login' }
  }
})

I too had the same issue and solved by add "headerMode":none in main StackNavigator.

Example:

const AppMainStack = DrawerNavigator({
  ActivitiesScreen: {screen: ActivitiesScreen},
}, {
  drawerPosition: 'right',
});

const AppNavigator = StackNavigator({
  StartScreen: {screen: StartScreen},
  EnterCodeScreen: {screen: EnterCodeScreen},
  CreateAccountScreen: {screen: CreateAccountScreen},
  ProfileSetupScreen: {screen: ProfileSetupScreen},
  SignInScreen: {screen: AppMainStack},
}, {
  headerMode: 'none',
});

use screenOptions and set a "null" header function like that:

    <Drawer.Navigator
        screenOptions={{ header: () => <View /> }}
        initialRouteName="HomeStack"
    >
        <Drawer.Screen name="HomeStack" ponent={HomeStack} />
    </Drawer.Navigator>