React Native: Creating a Customized Drawer Navigator

I’m not a fan of long intros, so I’ll just get straight to the point—we’re going to create a customized drawer navigator that will look something like this:

To create a customized drawer navigator, you must first install three libraries: react-navigator, native-base, and react-native-vector-icons/Ionicons.

Then, import the following onto your App.js file:

Now let’s create a drawer navigator in our App.js file.. For these purposes, I’ll name my drawer navigator ‘MyNavigator.’ This navigator will have two screens: a ‘HomeComponent’ screen and a ‘ProfileComponent’ screen (I’ve added the word ‘Component’ just for the sake of clarity). The screens that we’re assigning to each item in the navigator are the names of the components we want rendered when the user clicks on that item.

Initially, the screen components you put in for the drawer navigator should or could look something like this (just to test out your navigator):

And of course, don’t forget to import the components you assign in the navigator into your App.js:

Now, when you test out your app, you should be able to swipe left and have the drawer navigator come out. But what if you want a hamburger icon displayed on your screens so that the user can pull out the drawer navigator upon pressing it?

That’s easy. All you have to do is add a ‘Header’ to each component you named in the drawer navigator and add an icon inside it like this:

You might be wondering what ‘this.props.navigation’ is. Well, whenever you assign a component to a screen in a navigator, that component is automatically passed the ‘navigation’ prop. To learn more about this, here is the documentation.

Now, you should see a little hamburger icon on the top left corner of your screen. Upon clicking, the navigator should slide into the screen. But what if you want a logo added on top of your drawer navigator?

Easy. We just need to make a new component (for these purposes, I’ll name it ‘customNavigator’ in our App.js.

Next, we have to add some configurations for our drawer navigator. First is the initialRouteName, which is the default screen you want displayed. Second is the contentComponent where we’ll assign customNavigator to, and the last three are drawerOpenRoute, drawerCloseRoute, and drawerToggleRoute—all three of which are mandatory when you are customizing your drawer navigator.

So now, MyNavigator should look like this:

You might be testing this out and saying, ‘Where are my links?!?!?’

Not to worry, all we have to do is add the navigator items through DrawerItems, which we will pass props onto.

Now let’s add icons beside each drawer item. For each component you have assigned to a screen, add the following to assign a title to the item and an icon to it as well. To see all options for Ionicons icons, go here.

Finally, let’s render our ‘MyNavigator’ component in our App component. This way, whichever screen we set to display as the default screen will be the first thing we (and the user) will see upon opening our app.

And that’s it! Your custom drawer navigator should be working now!