Drawer not navigating to next screen in React Native Navigation 5 - react-native

Question

I am using react native drawer with navigation 5, I have created a drawer but from the drawer when I click some of option to navigate to next screen it gives me error like "Undefined is not object.. this.props" and when I define prop on top like const navigation = this.props.navigation it then gives me error "Navigation is undefined..."
This is my Drawer where my content is placed:
export function DrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<View
style={
styles.drawerContent
}
>
<View style={styles.userInfoSection}>
<Avatar.Image
...
/>
</View>
<Drawer.Section style={styles.drawerSection}>
<DrawerItem
label="Preferences"
onPress={() => {}}
/>
<DrawerItem
label="Classes"
onPress={() => this.props.navigation.navigate('ClassHome')} //Over Here I want to navigation
/>
</Drawer.Section>
</View>
</DrawerContentScrollView>
);
}
And this is where I placed my Drawer Screens:
import * as React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<Drawer.Navigator drawerContent={() => <DrawerContent navigation = {this.props.navigation} />}>
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
<Drawer.Screen name="ClassHome" component={ClassHome} />
</Drawer.Navigator>
);
}
}

Answer 1

You have to pass props from drawerContent to your DrawerContent as below :
import * as React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<Drawer.Navigator drawerContent={(props) => <DrawerContent {...props}/>}> {/* pass props here */}
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
<Drawer.Screen name="ClassHome" component={ClassHome} />
</Drawer.Navigator>
);
}
}
Now, you can use that props directly in your custom component :
export function DrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<View
style={
styles.drawerContent
}
>
<View style={styles.userInfoSection}>
<Avatar.Image
...
/>
</View>
<Drawer.Section style={styles.drawerSection}>
<DrawerItem
label="Preferences"
onPress={() => {}}
/>
<DrawerItem
label="Classes"
onPress={() => props.navigation.navigate('ClassHome')} // user props here
/>
</Drawer.Section>
</View>
</DrawerContentScrollView>
);
}

Answer 2

According to the documentation, the navigation prop should be passed by default to the DrawerContent. I would recommend doing it this way:
import * as React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<Drawer.Navigator drawerContent={DrawerContent}>
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
<Drawer.Screen name="ClassHome" component={ClassHome} />
</Drawer.Navigator>
);
}
}