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

OK, got it:

//...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 = ({navigation) => {
   return(
     <Stack.Navigator>
       <Stack.Screen name="second" children={this.TopTab} options={{
         headerRight: () => (
          <View>
           <TouchableWithoutFeedback onPress={async () = {navigation.dispatch(DrawerActions.toggleDrawer())}}>
            <Ionicons name="ios-menu" size={26} />
           </TouchableWithoutFeedback>
          </View>
        ),
       }} />
     </Stack.Navigator>
   )
 }