React Navigation (Native): custom header

Question

I'm having an issue with the react-navigation's drawer component not covering the whole application. I'm really struggling as I'm new with React Native and can't figure out the "clean way" to do it

Here's an example:

https://snack.expo.io/ZZqxmOQMw

When you press on "Toggle drawer" I expect it to cover the whole app, including the header, but it only covers the main content. On their examples, the drawer always only work with no content nor header.

Thank you!

score 1 · Answer 1 · answered Aug 13 '20 at 18:42

1

I think you should move the Header component to each screen or using the stack inside the drawer to create header

answered Aug 13 '20 at 18:42

Duy Nguyen

283
1
5

score 1 · Accepted Answer · answered Aug 13 '20 at 18:56

I think this is a simple solution for you.

function withHeader(Component) {
    return function(props) {
        return (
            <>
                <Header />
                <Component {...props} />
            </>
        )
    }
}

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={withHeader(Feed)} />
      <Drawer.Screen name="Notifications" component={withHeader(Notifications)} />
    </Drawer.Navigator>
  );
}

function Header() {
  return <View style={{height: '50px', backgroundColor: 'red'}}>
    <Text>My custom header!</Text>
  </View>
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

React Navigation (Native): custom header

2 Answers2