set header for drawer navigation

Question

I tried to set header in react navigation v5 by setting options without any change

<Drawer.Navigator
  initialRouteName='...'
>
  <Drawer.Screen
    name='...'
    component={Component}
    options={{ title: 'My home' }}
  />
</Drawer.Navigator>

is there a way I could have my react navigation header in drawer?

Answer 1

Update: The latest version of drawer navigator now has a header (can be shown with headerShown: true)

Drawer Navigator doesn't provide a header.

If you want to show headers in drawer screens, you have 2 options:

1. Provide your own header component. You can use header from libraries such as react-native-paper
2. Nest a Stack Navigator in each drawer screen where you want to show a header.

Answer 2

I was looking for the solution, however did not find any nice way to wrap up every component automatically with custom header. So I ended up creating HOC component and wrapping each component for every screen.

import React, {Fragment} from 'react';

const NavHeader = props => {
 // ... NavHeader code goes here 
};

export const withHeader = Component => {
  return props => {
    return (
      <Fragment>
        <NavHeader {...props} />
        <Component {...props} />
      </Fragment>
    );
  };
};

Then in your Drawer you do:

<Drawer.Navigator>
    <Drawer.Screen
      name={ROUTES.DASHBOARD}
      component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
    />
</Drawer.Navigator>