React Native Custom Drawer Navigation (navigation.closeDrawer()) - reactjs

Question

I'm new to react native i've been trying to create a custom drawer. Inside i wanted to add a button that would close the drawer however i've been getting the error TypeError: undefined is not an object (evaluating 'navigation.closeDrawer') this is my code:
import React, { useState } from "react";
import {DrawerActions} from '#react-navigation/native';
import Logo from '../assets/images/Logo.png'
import {
View,
Text,
Image,
TouchableOpacity,
ScrollView
} from 'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
} from '#react-navigation/drawer';
import { MainLayout } from "../screens";
import {
COLORS,
FONTS,
SIZES,
constants,
icons,
dummyData,
} from '../constants';
import Animated from "react-native-reanimated";
const Drawer = createDrawerNavigator()
const CustomDrawerItem = ({label, icon}) => {
return (
<TouchableOpacity
style={{
flexDirection: 'row',
height: 40,
marginBottom: SIZES.base,
alignItems: 'center',
paddingLeft: SIZES.radius,
borderRadius: SIZES.base
}}
>
<Image
source={icon}
style={{
width: 20,
height: 20,
tintColor: COLORS.primary
}}/>
<Text
style={{
marginLeft: 15,
color: COLORS.primary,
...FONTS.h3
}}
>
{label}
</Text>
</TouchableOpacity>
)
}
const CustomDrawerContent = ({ navigation }) => {
return (
<DrawerContentScrollView
scrollEnbled={true}
contentContainerStyle={{ flex: 1}}
>
<ScrollView
style={{
flex: 1,
paddingHorizontal: SIZES.radius
}}
>
{/* Logo*/}
<TouchableOpacity
style = {{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center',
marginBottom: 20,
}}>
<Image style={{
flex: 1,
width: 80,
height: 80,
resizeMode: 'contain',
marginLeft: -60,
}}
source={Logo}/>
<View
style={{
marginLeft: SIZES.radius
}}
>
<View
style={{
alignItems: 'flex-end',
justifyContent: 'center'
}}
>
<TouchableOpacity
style={{
alignItems: 'center',
justifyContent: 'center',
tintColor: COLORS.black
}}
onPress={() => navigation.closeDrawer()}
>
<Image
source={icons.cross}
style={{
height: 25,
width: 25,
}}
/>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
{/* Profile */}
<TouchableOpacity
style = {{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center'
}}>
<View
style={{
marginLeft: SIZES.radius
}}
>
<CustomDrawerItem
icon={icons.profile}
label={constants.sideBarElements.guest}
/>
<View>
{dummyData.GuestData.map(
(item, index) => (
<Text
style={{
paddingLeft: 20,
paddingTop: 10,
color: COLORS.gray
}}>
{item.name}
</Text>
)
)}
</View>
</View>
</TouchableOpacity>
{/* Line devider
<View
style={{
height: 1,
marginVertical: SIZES.radius,
//marginLeft: SIZES.radius,
backgroundColor: COLORS.lightGray1
}}
/>*/}
{/* Drawer Items */}
<View
style={{
flex: 1,
marginTop: SIZES.padding,
marginLeft: SIZES.radius
}}
>
<CustomDrawerItem
icon={icons.cart}
label={constants.sideBarElements.store}
/>
<View>
{dummyData.storesData.map(
(item, index) => (
<Text
style={{
paddingLeft: 20,
paddingTop: 10,
color: COLORS.gray
}}>
{item.title}
</Text>
)
)}
</View>
</View>
<View
style={{
flex: 1,
marginTop: SIZES.padding,
marginLeft: SIZES.radius,
marginBottom: 50
}}
>
<CustomDrawerItem
icon={icons.cart}
label={constants.sideBarElements.categories}
/>
<View>
{dummyData.carouselData.map(
(item, index) => (
<Text
style={{
paddingLeft: 20,
paddingTop: 10,
color: COLORS.gray
}}>
{item.category}
</Text>
)
)}
</View>
</View>
</ScrollView>
</DrawerContentScrollView>
)
}
const CustomDrawer = () => {
const [progress, setProgress] = useState(new Animated.Value(0))
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8]
})
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 26]
})
const animatedStyles = {borderRadius, transform: [{scale}]}
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.primary
}}
>
<Drawer.Navigator
drawerType='slide'
overlayColor='transparent'
drawerStyle={{
flex: 1,
width: '65%',
paddingRight: 20,
backgroundColor: 'transparent'
}}
sceneContainerStyle={{
backgroundColor: 'transparent'
}}
initialRouteName='MainLayout'
drawerContent={props => {
setTimeout(()=> {
setProgress(props.progress)
}, 0)
return (
<CustomDrawerContent
navigration ={props.navigation}
/>
)
}}
>
<Drawer.Screen name='MainLayout'>
{props => <MainLayout {...props} drawerAnimationStyle={animatedStyles}/>}
</Drawer.Screen>
</Drawer.Navigator>
</View>
)
}
export default CustomDrawer;
i even tried it with dispatch but i get the same error i'm not sure what i'm doing wrong.

Answer 1

Try this
import {useNavigation} from '#react-navigation/native';
const navigation = useNavigation();
navigation.openDrawer();
navigation.closeDrawer();