Push drawer on top of navigations header

[Maxeh]

I'm using React Navigation which provides a header on each page. In the header I have included a hamburger menu to toggle the drawer. The problem is that the drawer does not overlap the header. I have already tried to set the drawer's and/or the sidemenu's style to position:absolute with a high zIndex, but this does not work.

The picture shows the drawer below the header. I want it to go over the header.

Does anyone have a idea? Is this even possible?

[dopey2]

Try with:

<Drawer type="static" or "displace" >

[Maxeh]

Unfortunatly, this did not solve the problem

[dopey2]

Maybe if you set a negative zIndex for the children of your Drawer . Can you share your render method , where you render your drawer

[awreese]

@Maxeh Do you mind sharing how you enabled the toggling? I'm working on something very similar but haven't been able to get anything like that working.

[Maxeh]

@awreese I switched to drawerNavigation of react-navigation. Works more fluently than this drawer and you can bring it in front of the navigation bar.

This comment shows you how to use it in combination with stackNavigator

However, if you just want to toggle how I did it above, you just have to add a hamburger icon as iconLeft, and save a function in navigationParams which you can call from the navigationOptions function. In the toggleMenu() function you call the toggling function of the sideDrawer.

componentDidMount() {
    this.props.navigation.setParams({
      toggleMenu: this.toggleMenu
    });
}

static navigationOptions = ({ navigation }) => ({
   headerLeft:
      <Button
        transparent style={{marginLeft: 5}}
        onPress={() => navigation.state.params.toggleMenu()}
      >
        <Text style={{color: '#FFF'}}>menu</Text>
      </Button>
});

[awreese]

@Maxeh Thanks, I'll give that a shot later. I was using a drawer navigator originally, but I didn't really need more navigation, I just needed a slide out menu for app options/settings/etc... My current setup is to wrap my page in a drawer with a rn material ui header rendered at the top of the page which has a menu button to open/close the drawer. Perhaps with your solution I can move the header element into the navigation header and render the drawer under it instead of over (which honestly wasn't a huge deal as that seems to be how most android menus work anyway). I can report back if the change is satisfactory. Thanks again.

[edit 10:00a 8/24/17] Worked like a charm.

[VitaliiPyvovar]

@Maxeh, I have also faced that problem on Android, fixed by adding some elevation in drawer styles

<Drawer
    style={{
        drawer: { elevation: 5 } // or another high value
    }}
>
{...}
</Drawer>

[mikeyamato]

The above worked but with one tiny correction. It should be styles, not style. Plural.

[Hamawis]

The above worked but with one tiny correction. It should be styles, not style. Plural.

It didn't work for me.