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, wich 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 were i'm trying to insert the button in like this:onPress={() => navigation.ToggleDrawer()}
If i remove the from useNavitation() i recieve 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?