How to use props.navigation.closeDrawer() inside a CustomDrawerContent?(React Native)("@react-navigation/drawer": "^5.11.4")

Question

My code for the current scenario is as follows:

function DrawerNavigation(props) {
  return (
    <DrawerContentScrollView {...props}>
      <TouchableOpacity
        style={styles.colseIconContainer}
        onPress={() => props.navigation.closeDrawer()}>
        <IconButton
          icon={({size}) => (
            <Image
              source={require('../../../resource/images/CloseIcon.png')}
              style={{width: size, height: size}}
            />
          )}
          size={40}
        />
      </TouchableOpacity>
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

export default function MyDrawer(props) {
  return (
    <Drawer.Navigator
      drawerPosition="right"
      drawerContent={() => <DrawerNavigation {...props} />}
      drawerStyle={styles.drawerStyle}>
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{swipeEnabled: true}}
        initialParams={props.navigation}
      />
      <Drawer.Screen name="Notifications" component={CommonUserComponent} />
    </Drawer.Navigator>
  );
}

The error is undefined is not an object (evaluating 'props.naviagtion.closeDrawer')

Is there any way?? To make it work!!

Thank You !!

Answer 1

replace this

drawerContent={() => <DrawerNavigation {...props} />}

with this

 drawerContent={(props) => <DrawerNavigation {...props} />}