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

Question

I am implementing react-navigation-drawer from React Navigation Library. But facing problem related to header. The header bar is not showing in any of the screens.

This is my App.js

import React from "react";
import { StyleSheet, ScrollView, View } from "react-native";
//import DrawerNavigator from "./navigation/DrawerNavigator";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import Home from "./components/home";
import Contact from "./components/contact";

const WIDTH = Dimensions.get("window").width;
const RouteConfigs = {
  Home: {
    screen: Home
  },
  Contact: {
    screen: Contact
  }
};
const DrawerNavigatorConfig = {
  drawerWidth: WIDTH * 0.75,
  drawerType: "both",
  initialRouteName: "Home"
};
const DrawerNavigator = createDrawerNavigator(
  RouteConfigs,
  DrawerNavigatorConfig
);

const MyApp = createAppContainer(DrawerNavigator);

export default class App extends React.Component {
  render() {
    return <MyApp />;
  }
}

And this is my home screen

import React, { Component } from "react";
import { View, Image, Text, StyleSheet, ScrollView } from "react-native";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faTruck, faHome } from "@fortawesome/free-solid-svg-icons";

class Home extends Component {
  static navigationOptions = {
    headerTitle: "Home",
    drawerIcon: ({ tintColor }) => <FontAwesomeIcon size={25} icon={faHome} />
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    flexDirection: "column"
  },
  icon: {
    width: 24,
    height: 24
  }
});

export default Home;

Can anyone help me. Thanks in advance!!!

Answer 1

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

Answer 2

@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