I am having trouble navigating through screens with a simple button.
This is my App.js

export default class App extends Component<Props> {

  render() {

    return (

      <AppStackNavigator/>

    );

  }

}

const AppStackNavigator = StackNavigator({

    Login: { screen: LoginScreen },

    Home: { screen: HomeScreen },



      },{

        navigationOptions: {

          gesturesEnabled:false

        }

      })

Login.js

export default class Login extends Component {

    render() {

        return(

            <SafeAreaView style={styles.container}>

                <StatusBar barStyle='light-content'/>

                <KeyboardAvoidingView behavior='padding' style={styles.container}>

                    <TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>

                    <View style={styles.logoContainer}>

                        <View style={styles.logoContainer}>

                        <Image style={styles.logo}

                            source={require('../images/logo/logo.png')}>

                        </Image>

                        <Text style={styles.title}>

                            Sports Chat App

                        </Text>

                        </View>

                        <View style={styles.infoContainer}>

                            <TextInput style={styles.input}

                                placeholder="Enter name"

                                placeholderTextColor='#ffffff'

                                keyboardType='default'

                                returnKeyType='next'

                                autoCorrect={false}

                                onSubmitEditing={()=> this.refs.phoneNumber.focus()}

                                />

                            <TextInput style={styles.input}

                                placeholder="Enter phone number"

                                placeholderTextColor='#ffffff'

                                keyboardType='phone-pad'

                                ref={'phoneNumber'}

                                />

                                <TouchableOpacity style={styles.buttonContainer}>

                                <Button title='LogIn' onPress={()=>this.props.navigation.navigate('Home')}/>

                                </TouchableOpacity>

                        </View>

                    </View>

                    </TouchableWithoutFeedback>

                </KeyboardAvoidingView>

            </SafeAreaView>

        )

    }

};

LoginScreen.js

class LoginScreen extends Component {

    render(){

        return (



            <View>

            <Login>

            </Login>

            </View>

        );

    }

}

I keep getting the error undefined is not an object (evaluating'_this2.props.navigation.navigate') whenever i try use the Login button in Login.js,
I want this to navigate to the home screen but cant figure out why this keeps happening.
If i try do it without the components it works fine.

Click to View error message

App.js

import React, { Component } from "react";

import { Text, View } from "react-native";

import AppStackNavigator from "./AppStackNavigator";



export default class App extends Component<Props> {

  render() {

    return <AppStackNavigator />;

  }

}

AppStackNavigator

    import React, { Component } from "react";

import { StackNavigator } from "react-navigation";

import { View, Text, TouchableOpacity } from "react-native";



const LoginScreen = props => (

  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

    <Login navigation={props.navigation} />

  </View>

);



const HomeScreen = () => (

  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

    <Text>Home</Text>

  </View>

);



const Login = props => (

  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

    <TouchableOpacity

      onPress={() => {

        props.navigation.navigate("Home");

      }}

    >

      <Text>GO to home from login</Text>

    </TouchableOpacity>

  </View>

);



export default (AppStackNavigator = StackNavigator(

  {

    Login: { screen: LoginScreen },

    Home: { screen: HomeScreen }

  },

  {

    headerMode: "none",

    navigationOptions: {

      gesturesEnabled: false

    }

  }

));

Add a navigation props to Login in LoginScreen.js, Because LoginScreen has props navigation but Login don't.

   render(){

        return (

            <View>

                <Login navigation ={this.props.navigation}>

                </Login>

            </View>

        );

    }