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!

Song · Accepted Answer · 2020-08-13 18:56:13Z

1

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>
  );
}

answered Aug 13, 2020 at 18:56

Song

7504 silver badges10 bronze badges

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

Comments

Duy Nguyen · Accepted Answer · 2020-08-13 18:42:44Z

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, 2020 at 18:42

Duy Nguyen

2931 silver badge5 bronze badges

Collectives™ on Stack Overflow

React Navigation (Native): custom header

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related