This concludes Step 1! Review the full code for Step 1 here: https://github.com/GantMan/drawer-example/tree/step1

Step 2: Don’t Make a Junk Drawer

You might be excited to add the drawer, but due to the construct of react-navigation, you should really take a moment to consider your workflow. Before rushing into this setup consider the following first:

1. Will my drawer be available all the time?

Some apps will load the hamburger icon for logged in users, and no menu for users who have yet to log in, while other apps have the drawer constantly.

In this blog example, we’ll go with the “no menu until login” option, because it’s more complicated.

2. Will my drawer navigate with stacks in a tab-like behavior?

To explain this, let’s pretend we’re like Netflix. If I use the drawer to go to “Classic Films”, and then I select from that screen “From the 90's”. This second screen is part of the “Classic Films” stack. If I now quickly jump to the settings, and then navigate back to “Classic Films” from the drawer, it makes sense that it returns to the same spot in the stack, the “From the 90’s” screen. That is tab-like behavior.

In this blog example, we’ll go with “yes, each menu item is a stack”, because it adds structure to our app that can be appreciated, and though more structure means more management, it clearly identifies how we expect navigation to work.

Adding our Desired Drawer Stack

Now to modify our stack we simply edit our AppNavigation file.

Identify Desired Navigation Structure:

No hamburger/drawer for login screens Once logged in, show drawer Each drawer item is a stack

Two main stacks

Since the drawer isn’t always visible, we’ll make 2 stacks. One for login/signup/forgot password, and the other for everything that will be accessible via the drawer.

Great! So now it’s broken into two parts. The first part is everything that shouldn’t see our drawer at all. This will simply be it’s own stack.

For emphasis, I’ve made the header red. This way we can have a high contrast from logged out to logged in.

the header code renders like this.

Now you may say, “let’s make that other stack the drawer, right?” But it’s very likely that all our other screens will share a logged in header. This is where we’ll place the permanent hamburger button. Instead of jumping directly into the drawer, let’s wrap everything in another stack that we can style.

A quick note on the shared header stack:

It’s worth noting that doing it this way with the shared header stack (having the header live in the stack that owns the drawer, instead of having the header inside the drawer’s route stacks), means that the drawer will be under the header when rendered. Make sure this is is the desired effect. If not, you’ll need to configure your header on all stacks below the drawer instead.

There we go! Our logged in header will be purple! Navigating to these screens will obviously be beyond our login barrier!

Purple header for screens of a logged in user

Lastly, we can now add our screen stacks to the DrawerNavigator. This is as simple as our primary nav was:

TADAAAAA! 🎉 — Technically, it’s there and ready to go for your logged in stack screens!

You have to access it via gesture, which is not user-friendly, but it’s there!!!

Drawer accessible via gestures

Final touch: Add a menu button to open the drawer

Obviously you want to be able to click on something to open your drawer. That gesture solution isn’t very clear. Fortunately, we already have a place to add this button, and that’s our logged in stack. Add this to your navigationOptions of the stack that contains the drawer.

headerLeft: <Text onPress={() =>

navigation.navigate('DrawerOpen')}>Menu</Text>

That’s the simplest way to do it, but since our bar is dark I added a style to switch the text to white.

Clicking on this new Text element will open the new drawer!