Undefined (оценка this.props.navigation.navigate) React Native

Да, я прочитал несколько тем на эту тему, но я все еще не могу заставить свой проект работать: в моем App.js у меня есть условный рендеринг экрана входа или рендеринг экрана. Здесь также живет мой AppContainer. Метод handleAddSubmit=()=>{}, запускаемый кнопкой в ​​моем заголовке, дает мне неопределенную ошибку. Какие-либо предложения?

App.js

return(
      <View>
        <AppNav/>
        <Main
          username = {this.state.username}
          onLoggedOut = {this.LoggedOut}
          />
      </View>
    );

Main.js

import React from 'react';
import { StyleSheet, Text, View, Platform, ScrollView} from 'react-native';
import { Header} from 'react-native-elements';
import IntervalSelector from './HourCards/IntervalSelector'
import HourCard from './HourCards/HourCard'

 export default class Main extends React.Component {
 constructor(props){
 super(props);
}

handleAddSubmit = () =>
{
   this.props.navigation.navigate('ToggleNewHourFile');
}

  render() {
    const {username} = this.props;
    return (
      <View>
      <Header
        centerComponent = {{ text: '[ ' + username + ' ]',
          style: { color: '#fff',
          fontFamily: Platform.OS === 'ios' ? 'AppleSDGothicNeo-UltraLight' : 'Roboto',
      fontSize:20 } }}
    backgroundColor='#18153f'
    rightComponent=
    {{
      icon: 'home',
      color: '#fff',
      onPress: this.handleHomeSubmit,
      underlayColor: 'transparent',
    }}
    leftComponent=
    {{
      icon: 'add',
      color: '#fff',
      onPress: this.handleAddSubmit,
      underlayColor: 'transparent',
    }}
    statusBarProps = {{barStyle:"light-content", translucent:'true'}}
    />
    <IntervalSelector/>
    <View>
    <ScrollView>
    <HourCard/>
    </ScrollView>
    </View>
  </View>
);
}
}

StackNavigator.js

import {createStackNavigator, createAppContainer} from 'react-navigation';
import Main from '../main/Main';
import ToggleNewHourFile from '../main/HourCards/ToggleNewHourFile';

const StackNavigator = createStackNavigator(
  {
  Main: { screen: Main },
  ToggleNewHourFile: {screen: ToggleNewHourFile},
  }
);

const AppNav = createAppContainer(StackNavigator);

export default AppNav;

ToggleNewHourFile.js

import React from 'react';
import { StyleSheet, Text, View, Platform, TouchableOpacity, Image} from 'react-native';

class ToggleNewHourFile extends React.Component{
  render(){
    return(
      <Text>Hallo</Text>
    )
  }
}
export default ToggleNewHourFile;