CODEWITHSUNDEEP
react-nativereact-navigationdrawer
Renish Ghetia
Renish Ghetia

Reputation: 273

Header is rendering above on top of drawer sidemenu

Image link

when i open drawer, header icons and border are still visible above drawer side menu. menu icon and logo still appears even if the drawer is open. i have used stack navigator and drawer navigator. 

const DrawerNav = DrawerNavigator({
    WEB: { screen: ScanScreen },
   },{
       initialRouteName: 'WEB',
       drawerPosition: 'right',
});
const PrimaryNav = StackNavigator({
    LoginScreen: { screen: LoginScreen, navigationOptions : {header: null} },
    DrawerNav: { screen: DrawerNav },
}, {
  headerMode: 'float',
  navigationOptions: ({navigation}) => ({
      initialRouteName: 'LoginScreen',
      headerTransparent: true,
    headerStyle: styles.header,
    headerTitleStyle : styles.headerTitleStyle,
    headerBackTitleStyle : styles.headerBackTitleStyle,
    headerLeft: <Image source={Images.logo_splash} style={styles.logo} />,
    headerRight: <TouchableOpacity onPress={() => navigation.navigate('DrawerToggle')}>
                    <Image source={Images.icon_navigation} style={styles.menu}/>
                </TouchableOpacity>
  })
});

StyleSheet.create({
  header: {
    backgroundColor: Colors.clear,
    borderBottomColor : Colors.pinkDark,
    borderBottomWidth: 0.5,
  },
  headerTitleStyle : {
    color: Colors.white
  },
  headerBackTitleStyle : {
    color: Colors.white
  },
  logo: {
    height:30,
    width:55,
    resizeMode: 'contain',
  },
  menu: {
    height:20,
    width:60,
    resizeMode: 'contain',
  },
})

Upvotes: 1

Views: 988

Answers (1)

vonovak
vonovak

Reputation: 1597

You will need to change the navigation structure a little bit.

Now you have a StackNavigator and in it, you have a Drawer. Because of the nesting, StackNavigator header will be shown over the drawer when it is open.

You will need to play with the setup a little bit. One way that should work is having a root StackNavigator (1) that has a hidden header. In (1) you will have a DrawerNavigator (2) which has a StackNavigator (3) in it. in (3) you will have your WEB screen. In (1) you can have another StackNavigator with LoginScreen in it.

Upvotes: 2

Related Questions