set header for drawer navigation - react-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:
Provide your own header component. You can use header from libraries such as react-native-paper
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>

Answer 3

This is a simple example with react navigation 5:
function Root() {
return (
<Stack.Navigator>
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Root" component={Root} />
</Drawer.Navigator>
</NavigationContainer>
);
}
You can find about the navigation to a screen in a nested navigator in docs and you can try this example on Snack