navigation.toggledrawer is not a function

Cause of navigation.toggledrawer is not a function

The user mainly gets this error navigation.toggledrawer is not a function while adding the ToggleDrawer function in their code. This function is mainly useful when one needs to make their page possible so that users can drag downwards the page. The error that appears is:

The code for the map screen is as follows: 

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

The main code of the file is as follows:

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>
    );
}

Solution

The primary navigation menu for your program is displayed in the navigation drawer, a UI panel. The drawer can be opened by touching the drawer symbol in the app bar or by swiping a finger from the screen’s left side.

One of the main solutions to the above problem is the name of the function that the programmer is using. One should always write the name of the in-built function as described in the documentation. The name of the function is ToggleDrawer, not toggleDrawer. 

Using functions like IncidentMap(navigation) one should be able to access the navigation prop straight from component props. Your Drawer should be rendered by the user using CustomDrawerContent. 

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

Since the information in the user routes file is unclear, that is why the navigation object cannot be accessed through the rendered props. screen’s

Also Read: show-doc not working in ruby pry