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!!!

score 12 · Answer 1 · answered Feb 26 '20 at 23:50

@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

score 10 · Accepted Answer · answered Sep 15 '19 at 15:31

10

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;

answered Sep 15 '19 at 15:31

hong developer

13,291
4
38
68

it is working, but with static header title `screen`. How can I do it dynamic ? Also I want to include a menu icon and some other icons in the header bar. – Alok Mali Sep 15 '19 at 16:21
1

@AlokMali Please refer https://reactnavigation.org/docs/en/headers.html – hong developer Sep 16 '19 at 01:55
1

do you know the solution for react navigation 5? – JimmyWj4EHiM Feb 21 '20 at 00:55
1

@JimmySorza It doesn't differ from the previous way. – hong developer Feb 25 '20 at 01:16
1

@hongdeveloper it is different, I will show you a solution that I found. – JimmyWj4EHiM Feb 26 '20 at 23:47

score 7 · Answer 3 · answered Apr 08 '21 at 10:36

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

score 0 · Answer 4 · answered Mar 19 '20 at 10:45

Late reply, But I did it with the below code.

I created separate stack navigators for each screen and after that added all the stack navigators in the drawer navigator.

The good thing is it is fully customized.

Please see my code below.

const WIDTH = Dimensions.get('window').width;

  const HomeNavigator = createStackNavigator(
    {
      Home: Home
    },
    {
      defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: 'Knowledge Woledge',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faBars}
                onPress={() => navigation.openDrawer()}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
    }
  );

  const DetailNavigator = createStackNavigator(
    {
      PostDetail: PostDetail
    },
    {
      defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: () => {
            return (
              <Text
                style={{
                  color: '#fff',
                  fontWeight: 'bold',
                  textAlign: 'center',
                  flex: 1,
                  fontSize: 20
                }}
              >
                {navigation.getParam('headerTitle')}
              </Text>
            );
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faArrowLeft}
                onPress={() => navigation.goBack(null)}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
    }
  );

Assigned this in a const

const RouteConfigs = {
    Home: {
      screen: HomeNavigator,
      navigationOptions: {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
          <FontAwesomeIcon size={20} color={tintColor} icon={faHome} />
        )
      }
    },
    Detail: {
      screen: DetailNavigator,
      navigationOptions: {
        drawerLabel: () => {
          return null;
        }
      }
    }
  };

And finally, create a drawer navigator with this.

const DrawerNavigatorConfig = {
    drawerWidth: WIDTH * 0.75,
    drawerType: 'both',
    initialRouteName: 'Home'
  };
  const DrawerNavigator = createDrawerNavigator(
    RouteConfigs,
    DrawerNavigatorConfig
  );

  const Stacks = createAppContainer(DrawerNavigator);

  export default Stacks;

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

4 Answers4