React Navigator, undefined is not an object-CodePudding

Anyone know why I cant call toggleDrawer on navigation from my Header here? I assume that the navigation prop should be provided by default to Drawer.Navigator, but it seems to be undefined.

App.js

import { NavigationContainer, DefaultTheme, DrawerActions } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import Header from './components/Header';
import Background from './components/Background';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

const Drawer = createDrawerNavigator()
export default function App() {
  return (
    <NavigationContainer theme={theme} >
      <Background />
      <Drawer.Navigator initialRouteName="Home" screenOptions={{ header: () => <Header options={{headerStyle: {height: 200}}} /> }}>
        <Drawer.Screen name="Home" component={HomeScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Header.js

const Header = ( {navigation, route, options, back}) => {

  const [fontsLoaded] = useFonts({Kanit_400Regular, Kanit_500Medium, Kanit_700Bold})
  if (!fontsLoaded) return <LoadingSpinner />
  return (
    <View style={options.headerStyle}>
      <View style={styles.headerContainer}>
        <TouchableOpacity style={styles.hamburgerContainer} onPress={() => navigation.toggleDrawer()}  >
          <View>
            <View style={styles.hamburgerLine}></View>
            <View style={styles.hamburgerLine}></View>
            <View style={styles.hamburgerLine}></View> 
          </View>
        </TouchableOpacity>
    </View>
  )
}

When I press the hamburger menu:

CodePudding user response：

The navigation object will be passed to a custom header by the library. However, you are not passing the props to your custom component.

You can pass the props from the library to your header component as follows.

<Drawer.Navigator initialRouteName="Home" screenOptions={{ header: (props) => <Header {...props} options={{headerStyle: {height: 200}}} /> }}>
    <Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>