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>
 );