CODEWITHSUNDEEP
react-navigation
Hossein Alipour
Hossein Alipour

Reputation: 337

set header for drawer navigation

I tried to set header in react navigation v5 by setting options without any change

<Drawer.Navigator
  initialRouteName='...'
>
  <Drawer.Screen
    name='...'
    component={Component}
    options={{ title: 'My home' }}
  />
</Drawer.Navigator>

is there a way I could have my react navigation header in drawer?

Upvotes: 6

Views: 4915

Answers (3)

an0o0nym
an0o0nym

Reputation: 1516

I was looking for the solution, however did not find any nice way to wrap up every component automatically with custom header. So I ended up creating HOC component and wrapping each component for every screen.

import React, {Fragment} from 'react';

const NavHeader = props => {
 // ... NavHeader code goes here 
};

export const withHeader = Component => {
  return props => {
    return (
      <Fragment>
        <NavHeader {...props} />
        <Component {...props} />
      </Fragment>
    );
  };
};

Then in your Drawer you do:

<Drawer.Navigator>
    <Drawer.Screen
      name={ROUTES.DASHBOARD}
      component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
    />
</Drawer.Navigator>

Upvotes: 1

satya164
satya164

Reputation: 10152

Update: The latest version of drawer navigator now has a header (can be shown with headerShown: true)

Drawer Navigator doesn't provide a header.

If you want to show headers in drawer screens, you have 2 options:

  1. Provide your own header component. You can use header from libraries such as react-native-paper
  2. Nest a Stack Navigator in each drawer screen where you want to show a header.

Upvotes: 12

JimmyWj4EHiM
JimmyWj4EHiM

Reputation: 413

This is a simple example with react navigation 5:

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

Upvotes: -2

Related Questions