How to create a menu Icon in a drawer navigation? React Native

Question

I nested a Drawer Navigator in a Stack Navigator, it works well and opens when I swipe it, I want to put a Menu Icon above it when it's pressed the drawer gets open. Every method I tried always ends up with navigation can't be found error.

Here's my code:

export class App extends Component {
.....

 function DrawerNav() {
      return (
        <Drawer.Navigator 
        drawerType="front" 
        initialRouteName="Main" drawerPosition="right">

            <Drawer.Screen name="Main" component={MainScreen} />
            <Drawer.Screen name="Wallet" component={WalletScreen} />
            <Drawer.Screen name="Appointments" component={Appointments} />
        </Drawer.Navigator>
               );}
   
      
  return ( 
       <Provider store={store}>
       
  

        <NavigationContainer>
        <Stack.Navigator initialRouteName="Menu">
          
           <Stack.Screen name="Menu" component={DrawerNav}  />
           <Stack.Screen name="Add" component={AddScreen}   navigation={this.props.navigation}/>
            <Stack.Screen name="Save" component={SaveScreen}  navigation={this.props.navigation}/>
           
        </Stack.Navigator>
        </NavigationContainer>
         
      </Provider>
          )}}

I want to open and close the drawer when I press on this icon:

<MaterialIcons name='menu' size={28} onPress={??} />

Answer 1

<MaterialIcons name='menu' size={28} onPress={()=>this.props.navigation.openDrawer()} />