Header is not showing in drawer using React Navigation native v5

Question

I am using React Navigation native v5[https://reactnavigation.org/docs/drawer-navigator#options], but Header is not showing why? May be I'm missing something.

 const Drawer = createDrawerNavigator();
  //==============================
  //===============Navigation Drawer===============
  //==============================
  return (

    <NavigationContainer>      
      <Drawer.Navigator 
      headerMode= "screen"
      title='Drawer Screen'
      initialRouteName="Home">
        <Drawer.Screen 
        name="Home" 
        component={DrawerHome}
        options={{          
        title: "Home",
            drawerIcon: () => (
              <Image source={require("./Images/hamburger.png")}
              style={{height: 20, width: 20}}
              /> ), 
          }}
        />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>

  );
}

cltsang · Accepted Answer · 2020-04-21 03:18:01Z

1

Header is available in a Stack Navigator screen. If you need one, make a nested navigator to house ProfileScreen and SettingsScreen.

Or alternatively, add a custom header to the render method of ProfileScreen and SettingsScreen.

edited Apr 21, 2020 at 3:18

answered Mar 4, 2020 at 9:06

cltsang

1,8391 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Header is not showing in drawer using React Navigation native v5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related