React Navigation Drawer Tutorial — Part 2

How to customize a DrawerNavigator in your React Native app using react-navigation

This is the follow-up of the drawer tutorial. In Part One, we covered adding react-navigation to your project, wiring it up to redux, and placing a default drawer in the app.

Our goals of Part Two include two new steps that add finesse to the drawer. Continuing the numbered steps from our first post, our outline is below.

Step 3:

• Customize drawer labels

• Fix drawer toggle

• Fix login animation

• Stop gestures from breaking login flow

Step 4:

• Make your own custom drawer component

• Add logout feature to drawer

Step 3: Enhancing the Drawer

First Workflow Fix: Customize default menu labels

Though screen1 is a badass name for any screen, it’s not very pretty. There’s no reason to be restrained to the key. We can modify our names in navigationOptions either at the routes level or inside each screen.

For screen-specific options, I like to keep that in the screen. So modifying screen1 is done with adding options like so:

Doing this for each screen gives us a new label in the drawer.

Now those titles are clean

You can also give a drawerIcon for each menu item; let’s do it. We start by supplying the component you’d like!

Result of adding the above to each screen:

The end of the road with configuring the default drawer

Second Workflow Fix: Stop double drawer open

You might have noticed, if you click the menu, the drawer opens… but if you click it again, the drawer disappears. A third click… and nothing will happen in your app now. You can’t open an open drawer!

We have to fix this by modifying the onPress to our menu in the drawer. Now it will close or open depending on drawer state, like so:

It might seem dirty to check the drawer state’s index to figure out if we should open or close, but the good news is that I have a PR submitted & merged to relieve us of this complicated mess. Hopefully, soon, we can switch to using navigate('DrawerToggle') and let the drawer do the right thing.

Third Workflow Fix: Pushing Drawer Dirt

You might have seen it if you’re playing along. When you navigate from a screen without a drawer, to a screen with a drawer, the drawer is visible in the push animation.

Carefully observe the following gif and notice that for a moment the drawer can be seen while navigating!

Pay no attention to the drawer behind the curtain!

I’m not a big fan of animating login navigation anyway. Even if this bug gets fixed, you might agree, there was no need to animate this change. We can kill the animation here with a custom transitionConfig passed to the top stack. People are coming up with new ways to do this, but until these are done, you can do it like so:

Kills animations at the topmost stack so login is instant!

Fourth Workflow Fix: Stop gestures!

As you might guess, gestures aren’t going to be your friend with a login stack in recent history. Swiping backwards brings you back to your old login screens. By default, gestures are active everywhere.

An accidental swipe by your user and 💥 poof 💥 you’re on a screen you didn’t want users to access.

example of swiping out of logged in screen back to logged out screen

Each stack can take navigationOptions for disabling gestures, with setting gesturesEnabled: false . I recommend doing this on the stack containing the drawer (to stop swiping back to login) and doing it on the drawer as well for solidarity.

Everything thus far:

The resulting navigation stack for containing all of the above looks like this:

Let’s give it a test drive.

Everything looks great!

✅ Signin/up Navigation Stack

✅ Logged In Header /Navigation Stack

✅ No gesture backtracks

✅ No login push animation

✅ Custom Drawer Labels and images.

For a moment you feel like you’re in control, but you’re not…. You’ll outgrow defaults.

The default drawer is ideal for a hackathon, but we’ve got to have FULL control of what we’re going to show in that drawer.