How to add headers to DrawerNavigator screens in React Native

While working on a current project, I came across the issue on how exactly to add headers to screens within my DrawerNavigator (createDrawerNavigator). Here is a visual of what I was trying to accomplish:

Menu screen:

Without Header screen:

With Header screen:

As you can see from the above images, I wanted the screens within the DrawerNavigator to have header titles that matched the component name. So, in this example, I wanted the 'Notifications' screen to have the header actually show 'Notifications' (or whatever the screen title was).

After digging around the React Native docs and some forums, I found two resources that actually helped me solve this issue (sources at bottom). It appeared that I needed to make each screen within the DrawerNavigator have its own StackNavigator and then set the navigationOptions to the component screen. I'll outline my example code below for you to see this in action:

We will want to start with creating the DrawerNavigator:

import React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Notifications from '../menu/Notifications'; // this is the Notifications screen component

const MenuNavigator = createDrawerNavigator(
  {
    Notifications: {
      name: 'notificationHeader',
      screen: notificationHeader,
    },
  //...add any other drawer screens you'd like to see here in the menu (i.e. Home, Settings)
  }
);

Once the DrawerNavigator is created, we will want to add a StackNavigator to each one of the drawer screens, as such:

import React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Notifications from '../menu/Notifications'; // this is the Notifications screen component

const notificationHeader = createStackNavigator(
  {
    Notifications: {
      screen: Notifications,
    },
  },
  {
    navigationOptions: {
      headerMode: 'screen',
    },
  }
)

With these StackNavigator(s) within the DrawerNavigator, you should now see the 'Notifications' screen have the header 'Notifications' once you refresh your screen!

Based on my understanding, the DrawerNavigator does not have an headerMode option, since the DrawerNavigator is typically just a means to give you a visual hierarchy of screens. To create a header for the screens within DrawerNavigator, you need to create a StackNavigator for each individual screen and then this will then allow the screen to have a visible header.

This seemed to be the only option that helped me resolve this issue. If you have ever dealt with this in a different or more efficient way, let me know in the comments!

Happy coding :)

Sources:

https://github.com/react-navigation/react-navigation/issues/1632

https://itnext.io/the-intricacies-of-nesting-navigators-in-react-native-using-react-navigation-fef52ca72964