An issue occurred while attempting to toggle the drawer navigation. It seems that the ToggleDrawer function is

I'm currently utilizing stack navigation in my application, but I have made the decision to add a Drawer for the user's menu.

While I was able to incorporate the Drawer into my pages, some of them contain MapView content, causing the user to be unable to drag the menu from the screen. To solve this issue, I opted to implement a button that calls the ToggleDrawer function, as outlined in the documentation. However, I am encountering the following error:

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

Below is the section of my map screen where I attempted to include the button like so:

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

If I remove the <any> from useNavitation(), I receive the following message: 

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>Loading... Loading... Loading... Loading... Loading...
                        Loading </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 do I properly call this Drawer on my screen?

typescriptreact-nativenavigation-drawerreact-typescript

Answer №1

Instead of ToggleDrawer, it should be toggleDrawer

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

In addition, I believe you can directly access the navigation prop from component-props like 

function IncidentMap({ navigation })

Modification

Referring to the documentation ... this is how you should display your Drawer with a CustomDrawerContent

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

The confusion in your routes file may be the reason why the navigation object cannot be accessed through the props of the rendered screen...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on how to update an array within typed angular reactive forms

I'm currently working on finding a solution for patching a form array in a strongly-typed reactive Angular form. I've noticed that patchValue and setValue don't consistently work as expected with FormControl. Here's an example of the fo ...

arraysangulartypescriptangular-reactive-formsstrong-typing

How to use TypeScript to print a blob (PDF) in Internet Explorer or Microsoft Edge?

I need to print a pdf blob using typescript. I've tried the following code, which works in Chrome but not in Edge. Code 1 (works in Chrome but prints blank in Edge) - const fileURL = URL.createObjectURL(blob); const iframe = document.createE ...

angulartypescriptinternet-exploreriframeblob

Error: Parsing error - Unrecognized character "@" in Angular module

Currently I am delving into the realm of webpack and attempting to integrate it into my project. However, I seem to have hit a roadblock as I encounter the following error. Despite my efforts to troubleshoot and research, I cannot seem to find a loader spe ...

angulartypescriptwebpack

The module was not found due to an error stating: "Unable to locate 'DavidDaDon.png'"

Feeling a bit lost with my code here. I have the PNG files in my src folder, used require and relative paths to access them, but something seems off. What's causing the issue? I'm working on a birthday reminder countdown featuring my closest frie ...

reactjsreact-native

Animate the opening and closing of a div element

A form is set up for editing. Within this form, there are 2 separate divs. The first div is labeled editForm, which displays the form for editing, and the second div is labeled infos, which shows the details of this form. My goal is to have the infos se ...

javascripthtmlcssangulartypescript

The child component fails to inherit the data types provided by the parent component

I am currently working on setting up a dynamic table that will receive updates from the backend based on actions taken, which is why I need to pass the endpoint and response model. When I try to nest and pass the response type, it seems to get lost in the ...

reactjstypescripttypesnested

Attempting to map an object, however it is showing an error stating that the property 'title' does not exist on type 'never'

While attempting to retrieve data from the Bloomberg API, I encountered an issue when trying to extract the title from the response object. The error message received was: Property 'title' does not exist on type 'never'. Below is the co ...

typescriptnext.js

Unexpected behavior with the React useState hook when used within the useEffect hook

Disclaimer: This is a unique question, please do not mark it as a duplicate. I have looked at similar questions and answers, but none of them seem to work for my React learning project. My goal is to achieve infinite scrolling on a webpage, where more dat ...

reactjsreact-hooksreact-typescript

The Angular BehaviorSubject observable is returning a null value

I am experiencing an issue where I pass data through components using behavior subject. However, when I try to retrieve it with subscribe, it shows null even though the service returns a real value. To reproduce the issue, you can check out the code here: ...

angulartypescript

Issues arise when attempting to connect with mysql2 in typescript jest tests on macOS, where the connection

Having issues creating a mysql2 connection to a local MySQL database in a jest test on macOS using TypeScript. The call to connect() is getting stuck. Environment: MacOS: High Sierra (10.13.6) MySQL: 8.0.18 TypeScript: 3.7.2 mysql2: 2.0.1 Node.js: v10.1 ...

node.jstypescriptmysql2

Angular tutorial: Accessing individual HTML elements within the *ngFor loop

I am facing an issue trying to access the "box-message" class using "document.querySelectorAll('.box-message')" within a tree structure where the "*ngFor" directive is utilized. After making an "http rest" request, the *ngFor directive finishes ...

javascriptangulartypescript

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Currently, I am attempting to dynamically alter the src of an iframe using Angular 2. Here is what I have tried: HTML <iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe> COMPONE ...

javascriptangulartypescriptiframe

What is the best way to upload mp3 files using Angular?

Hello, I am a beginner with Angular and I could use some guidance. I am looking to upload mp3 files from my Angular application and then send them to the backend to be saved in my local database. Any tips or suggestions on how I can achieve this would be ...

angulartypescriptfile-upload

Guide on integrating a plain Service/Provider into nest.js

I recently created a basic TypeScript class in nest.js called JwtTokenService.js. // JwtTokenService.js import { Injectable, Optional } from '@nestjs/common'; import { JwtService } from '@nestjs/jwt'; import { JwtPayload } from ' ...

javascripttypescriptnestjs

Can we determine the return type of a function based on the specific parameters it is called with?

When working with generated APIs, such as openapi-fetch, our code may look something like this: import {paths} from "./the-generated-types"; import createClient from "openapi-fetch"; const client = createClient<paths>(); // U ...

typescript

Using React Native with Redux: Filtering Data and Preserving Initial Data in Redux State

For my mobile app, I decided to add a search feature using React-Native & Redux. I fetch data from an API and store it in the redux store so that I have a list of items readily available when the app is running. Now, with a searchbox in place, I want to f ...

javascriptreactjsreact-nativeredux

Can someone assist me with running queries on the MongoDB collection using Node.js?

In my mongodb collection called "jobs," I have a document format that needs to display all documents matching my query. { "_id": { "$oid": "60a79952e8728be1609f3651" }, "title": "Full Stack Java Develo ...

typescriptmongodbexpressmongoose

The installation of @types/jquery leads to an unnecessary global declaration of $

In my package.json file, I have the following dependencies defined: { "dependencies": { "@types/jquery": "^3.5.5", } } This adds type declarations through @types/jquery/misc.d.ts, including: declare const jQuery: JQue ...

jquerytypescript

Caution: The Vue Class Based Component is signalling that a property is not defined on the instance, yet it is being

I've been experimenting with creating a Vue component using vue-class-component and TypeScript. I referenced the official documentation here: https://github.com/vuejs/vue-class-component. Despite defining the data within the class as shown below, I en ...

typescriptvue.jsvuejs2vue-componentvue-class-components

Filtering an array does not restrict the type of elements within it

I am facing a scenario where I have an interface containing two optional properties: interface A { one?: string; two?: string; } I want to pass these properties inside an array to a component that specifically requires string[] export const MyComponen ...

typescriptfilter