Header is not showing in react-navigation-drawer React-Native

Since December 2020 you can now use the headerShown: true setting in screenOptions of your Drawer.Navigator to show the header in React Navigation 5.

See more about this issue here: https://github.com/react-navigation/react-navigation/issues/1632

See the commit and comments about the new feature in React Navigation 5 here

https://github.com/react-navigation/react-navigation/commit/dbe961ba5bb243e8da4d889c3c7dd6ed1de287c4


The drawer navigator does not contain headers. Stack navigators must be configured to display headers.

const DrawerNavigator = createDrawerNavigator(
  RouteConfigs,
  DrawerNavigatorConfig
);

const Root = createStackNavigator({
  Main: { screen : DrawerNavigator}
},
{
  defaultNavigationOptions : ({ navigation }) => ({
      title: "Screen"
    })
})

const Stacks = createAppContainer(Root)

export default Stacks;

screen


@hongdeveloper this is a simple example solution for react navigation 5:

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen options={{title: "Profile"}} name="Profile" component={Profile} />
      <Stack.Screen options={{title: "Settings"}} 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