CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-drawer
ianaz
ianaz

Reputation: 2580

React Navigation (Native): custom header

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!

Upvotes: 0

Views: 172

Answers (2)

Song
Song

Reputation: 750

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

Upvotes: 1

Duy Nguyen
Duy Nguyen

Reputation: 293

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

Upvotes: 1

Related Questions