CODEWITHSUNDEEP
react-nativereact-navigation-drawer
Sandeep Singh
Sandeep Singh

Reputation: 66

Header is not showing in drawer using React Navigation native v5

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>

  );
}

Upvotes: 1

Views: 391

Answers (1)

cltsang
cltsang

Reputation: 1829

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.

Upvotes: 1

Related Questions