Error when using toggleDrawer navigation.ToggleDrawer is not a function

Question

I'm currently using stack navigation on my app, but I decided to increment a Drawer for a user's menu.

I managed to insert the Drawer in my pages, but some of them are a MapView content, so the user can't really drag the menu from the screen... So I decided to implement a button to call the ToggleDrawer function, which is presented in the documentation. But I'm getting the error:

TypeError: navigation.ToggleDrawer is not a function. (In 'navigation.ToggleDrawer()', 'navigation.ToggleDrawer' is undefined)

Here is my map screen where I'm trying to insert the button in like this:

onPress={() => navigation.ToggleDrawer()}

If I remove the <any> from useNavitation() I receive the following: Property 'ToggleDrawer' does not exist on type 'NavigationProp

export default function IncidentsMap() {
    const navigation = useNavigation<any>();


    return (

        <View style={styles.container}>

            {typeof location?.coords.latitude == 'number' ?
                <View style={styles.container}>
                    <MapView
                        provider={PROVIDER_GOOGLE}
                        style={styles.map}
                        >

                            <Callout tooltip={true} onPress={handleNavigateToIncidentDetails}>
                                <View style={styles.calloutContainer}>
                                    <Text style={styles.calloutText}>Enchente rasa</Text>
                                </View>
                            </Callout>
                        </Marker>
                    </MapView>
                    <View style={styles.footer}>
                        <Text style={styles.footerText}>Reporte um incidente</Text>
                        <RectButton style={styles.createFloodButton} onPress={handleNavigateToCreateIncident}>
                            <Feather name='plus' size={20} color={'#fff'}/>
                        </RectButton>
                    </View>
                    <View style={styles.menuContainer}>
                        <RectButton style={styles.menuButton} onPress={() => navigation.ToggleDrawer()}>
                            <Feather name='menu' size={20} color={'#fff'}/>
                        </RectButton>
                    </View>
                </View> : <View style={styles.container}>
                    <Text>Carregando ... Carregando ... Carregando ... Carregando ... Carregando ...
                        Carregando </Text>
                </View>}
        </View>
    );
}

Here is my routes file:

export default function Routes() {
    return(
        <NavigationContainer>
            <Navigator screenOptions={{headerShown: false}}>
                <Screen name={'MyDrawer'} component={DrawerImported}/>
                {/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/}
                <Screen name="WelcomePage" component={WelcomePage}/>
                <Screen name="WelcomePageStep2" component={WelcomePageStep2}/>
                <Screen name="IncidentsMap" component={IncidentsMap}/>
                <Screen name="IncidentDetails"
                        component={IncidentDetails}
                        options={{
                            headerShown: true,
                            header: () => <Header showCancel={false} title="Incidente"/>
                        }}
                />
                <Screen name="SelectIncidentLocation" component={SelectIncidentLocation}
                        options={{
                            headerShown: true,
                            header: () => <Header title="Selecione no Mapa" showCancel={false}/>
                        }}
                />
                <Screen name="IncidentData" component={IncidentData}/>
                <Screen name="Profile" component={Profile}/>

                <Screen name="Settings" component={Settings}
                        options={{
                    headerShown: true,
                    header: () => <Header title="Configurações" showCancel={false}/>
                }}
                />


            </Navigator>
        </NavigationContainer>
    )
}

Here is my DrawerFile:

interface Props {
    navigation: any
}
export function DrawerImported(props) {

    const paperTheme = useTheme();

    function CustomDrawerContent(props) {
        return (
            <View style={{flex:1}}>
                <DrawerContentScrollView {...props}>
                    <View style={styles.drawerContent}>
                        <View style={styles.userInfoSection}>
                            <View style={{flexDirection:'row',marginTop: 15}}>
                                <Avatar.Image
                                    source={{
                                        uri: 'https://avatars.githubusercontent.com/u/47571680?v=4'
                                    }}
                                    size={50}
                                />
                                <View style={{marginLeft:15, flexDirection:'column'}}>
                                    <Title style={styles.title}>Vinícius Melo</Title>
                                </View>
                            </View>
                        </View>

                        <View style={styles.drawerSection}>
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="map"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Mapa da região"
                                onPress={() => {props.navigation.navigate('IncidentsMap')}}
                            />
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="user"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Profile"
                                onPress={() => {props.navigation.navigate('Profile')}}
                            />
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="settings"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Configurações"
                                onPress={() => {props.navigation.navigate('Settings')}}
                            />
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="alert-triangle"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Reportar Bug"
                                onPress={() => {props.navigation.navigate('BugReport')}}
                            />
                        </View>
                       
                    </View>
                </DrawerContentScrollView>
                <View style=  {styles.bottomDrawerSection}>
                    <DrawerItem
                        icon={({color, size}) => (
                            <Feather
                                name="log-out"
                                color={color}
                                size={size}
                            />
                        )}
                        label="Log Out"
                        onPress={() => {}}
                    />
                </View>
            </View>
        );
    }
    const Drawer = createDrawerNavigator();

    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
            <Drawer.Screen name="Map" component={IncidentsMap}/>
            <Drawer.Screen name="Settings" component={Settings}/>
            <Drawer.Screen name="Profile" component={Profile}/>
            <Drawer.Screen name="BugReport" component={BugReport}/>

        </Drawer.Navigator>
    );
}
    function MyDrawer() {

    return(
        <MyDrawer/>
    );
}

How should I call this Drawer on my screen?

Answer 1

It's toggleDrawer ... not ToggleDrawer

RectButton 
    onPress={() => navigation.toggleDrawer()} 
/>

Plus I guess you should be able to access navigation prop directly from component-props like function IncidentMap({ navigation })

Edit

According to the docs ...This is how you should render your Drawer using a CustomDrawerContent

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  {/* screens */}
</Drawer.Navigator>

Cause what you're having in routes-file is confusing ... and it's the reason behind that the navigation object is not accessible through props of the rendered-screen...