Error when using toggleDrawer navigation.ToggleDrawer is not a function

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: ' }} 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?

1 Answer

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...