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...
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...
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
