Header for DrawerNavigator

[svk31]

Thanks for the awesome work on this library!

I'd like to use the classical header with a hamburger pattern in combination with the DrawerNavigator but I can't figure out how to do so apart from manually including the header in every screen where I want it rendered, which seems a bit redundant. Is that actually how I should do it or is there a better way?

An example including a header would be much appreciated. Examples of StackNavigator nested behind DrawerNavigator would be nice too.

[Steviey]

+1

[hilkeheremans]

I worked on this problem today, and the approach I came up with for now is to create a class factory function (~ HOC) that takes a component and renders the drawer header around it. To actually do it properly is a bit trickier since you will want to use navigationOptions etc.

I'll post a sample tomorrow (need to generalize it a little first).

[satya164]

What do you mean by a classical header? Do you have a mock-up or screenshot of what you want?

[svk31]

Something like this:

I've continued playing around with this and I just managed to get it working, with the one issue still that the hamburger is misaligned, but that's probably just due to the component I'm using.

What I did was fetch react-navigation from github instead of using the version on npm, this fixed the header not appearing and also fixed the "header: left" property so the left button actually appears, as well as an issue with the drawer going behind the header.

The working approach I have right now looks something like this:

CompX.navigationOptions = {
        title: "CompX",
        header: ({ navigate }) => ({
            left: <Button transparent onPress={() => {navigate("DrawerOpen")}}><Icon name="ios-menu">    </Icon></Button>
        })
    };

NestedNavigator1 = StackNavigator({
    Screen1: {
        screen: Comp1
    },
    Screen2: {
        screen: Comp2
    }
})

NestedNavigator2 = StackNavigator({
    Screen3: {
        screen: Comp3
    },
    Screen4: {
        screen: Comp4
    }
})

Drawer = DrawerNavigator({
    SubNav1: {
        screen: NestedNavigator1
    },
    SubNav2: {
        screen: NestedNavigator2
    }
})

CompX without header property renders the back button as expected.

[satya164]

Yes, the left key inside navigationOptions.header is the correct way of doing it. And regarding misalignment, you'll likely need to fix it in your component.