react native - undefined is not an object (evaluating this.props.navigation.dispatch)

Question

I'm trying to use this.props.navigation.dispatch(DrawerActions.toggleDrawer()) in the following code but it takes this.props.navigation.dispatch as undefined. My code:

//...imports
//set the function drawer inside a bottom tab navigator (works fine)

drawer = () => {
  return(
     <Drawer.Navigator>
       <Drawer.Screen name="first" component={firstScreen} />
       <Drawer.Screen name="second" children={this.TopTabStack} />
     </Drawer.Navigator>
  )
 }

 TopTab = () => {
   return(
     <MaterialTopTabs.Navigator
     initialRouteName="third"
     >
         <MaterialTopTabs.Screen name="third" component={thirdScreen} />
         <MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
       </MaterialTopTabs.Navigator>
   )
 }

 TopTabStack = () =>?{
   return(
     <Stack.Navigator>
       <Stack.Screen name="second" children={this.TopTab} options={{
         headerRight: this.TopTabRightStack
       }} />
     </Stack.Navigator>
   )
 }

 TopTabRightStack = () =>?{
   return(
     <View>
       <TouchableWithoutFeedback onPress={async () => {this.props.navigation.dispatch(DrawerActions.toggleDrawer())}}>
         <Ionicons name="ios-menu" size={26} />
       </TouchableWithoutFeedback>
     </View>
   )
 }

Answer 1

As you are using the Functional component so there is no need of using this, remove it from the given code, and run again.

drawer = () => {
  return(
     <Drawer.Navigator>
       <Drawer.Screen name="first" component={firstScreen} />
       <Drawer.Screen name="second" children={TopTabStack} />
     </Drawer.Navigator>
  )
 }

 TopTab = () => {
   return(
     <MaterialTopTabs.Navigator
     initialRouteName="third"
     >
         <MaterialTopTabs.Screen name="third" component={thirdScreen} />
         <MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
       </MaterialTopTabs.Navigator>
   )
 }

 TopTabStack = () => {
   return(
     <Stack.Navigator>
       <Stack.Screen name="second" children={TopTab} options={{
         headerRight: TopTabRightStack
       }} />
     </Stack.Navigator>
   )
 }

 TopTabRightStack = ({navigation}) => {
   return(
     <View>
       <TouchableWithoutFeedback onPress={async () = {navigation.dispatch(DrawerActions.toggleDrawer())}}>
         <Ionicons name="ios-menu" size={26} />
       </TouchableWithoutFeedback>
     </View>
   )
 }