undefined is not an object ('evaluating _this.props.navigation.navigate') - react-native

Question

I'm new programing with React Native and I got this issue with my code, I'm try to do a Splash screen and after that I want to make a Login that redirect me to another screen.
The Splash screen run well but when I'm in the Login Screen and I push the "Entrar" button, it crashes and shows the message.
`
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, SplashScreen } from 'expo';
import Splash from './screens/Splash';
import Login from './screens/Login';
import ForgotPass from './screens/ForgotPass';
import Home from './screens/Home';
App.js
export default class App extends React.Component
{
componentWillMount()
{
this.setState({
view: <Splash />
})
setTimeout(() => {
this.setState({
view: <Login />
})
}, 3000)
}
render()
{
return(
this.state.view
)
}
}
////////////////////////////////////////////////////////////
Login.js
import React from 'react';
import { View, BackHandler } from 'react-native';
import { Card, Button, FormLabel, Text, FormInput } from 'react-native-elements';
import { createStackNavigator, navigate } from 'react-navigation';
export default class Login extends React.Component
{
static navigationOptions = {
title: 'Iniciar sesión',
headerLeft: null,
}
componentDidMount()
{
BackHandler.addEventListener('hardwareBackPress', function()
{
return true;
});
}
render()
{
return (
<View style={{ paddingVertical: 20 }}>
<Card>
<FormLabel>Nombre de Usuario</FormLabel>
<FormInput placeholder='NombreUsuario' />
<FormLabel>Contraseña</FormLabel>
<FormInput secureTextEntry placeholder='Contraseña' />
<Button
buttonStyle={{ marginTop: 20 }}
backgroundColor='#03A9F4'
title='Entrar'
onPress={() => this.props.navigation.navigate('Home')}
/>
</Card>
<View style={{ paddingVertical: 20 }}>
<Button
title="¿Olvidó su contraseña?"
onPress={() => this.props.navigation.navigate('ForgotPass')}
/>
</View>
</View>
);
}
}`

Answer 1

you have to pass navigation props in App.js file
componentWillMount()
{
this.setState({
view: <Splash />
})
setTimeout(() => {
this.setState({
view: <Login navigation={this.props.navigation} />
})
}, 3000)
}
or you can use withNavigation in Login.js file
import { withNavigation } from 'react-navigation';
export Default withNavigation(Login);
https://reactnavigation.org/docs/en/with-navigation.html this link will help you to learn more about withNavigation in react navigation