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.

CodePudding user response：

Try this

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