react navigation navigate to other screen - react-native

Question

i try make login, when isLoggedIn = true then navigate to Profile, but always give me error
undefined is not an object (evaluating '_this.props.navigation')
whats wrong with mycode? can someone help me?
import React from 'react'
import {
Image,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from 'react-native'
import { Field, reduxForm } from 'redux-form'
import { Container, Content, InputGroup, Button , Input, Icon, Item } from 'native-base';
import { login } from '../Action/Action';
import {NavigationActions} from "react-navigation";
import styles from './Style';
import { connect, } from 'react-redux'
}
function submit(values) {
console.log(values);
}
const renderInput = ({ input: { onChange, ...restInput }}) => {
return <Input onChangeText={onChange} {...restInput} />
}
}
const Form = props => {
//const {navigate} = this.props.navigation;
//let _navigateTo;
if (props.appUser.isLoggedIn) {
console.log("haloooo");
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)
}
const { handleSubmit } = props
//console.log(props.appUser);
return (
<Container >
<Content>
<Content>
<View style={styles.container}>
<Image source={require('../Assets/Octocat.png')} style={{width: 128, height: 128}} />
</View>
</Content>
<Content style={{paddingLeft:10,paddingRight:10,paddingBottom:5, paddingTop:30}}>
<Item rounded>
<Field name="username" component={renderInput} />
</Item>
</Content>
<Content style={{paddingLeft:10,paddingRight:10}}>
<Item rounded>
<Field name="password" component={renderInput} />
</Item>
</Content>
<Content style={{padding:10}}>
<Button onPress={handleSubmit(props.onLogin)} block info>
<Text>Login</Text>
</Button>
</Content>
</Content>
</Container>
)
}
const myReduxForm = reduxForm({
form: 'MyReduxForm',
})(Form)
function mapStateToProps(state) {
return {
appUser: state.appUser,
}
}
function mapDispatchToProps(dispatch) {
return {
onLogin: (data) => { dispatch(login(data)); },
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(myReduxForm)
// export default reduxForm({
// form: 'test'
// })(Form)
// export default reduxForm({
// form: 'test'
// })(Form)

Answer 1

try to use withNavigation. Use the component FormWithNavigation as shown in the code below
const Form = ({ navigation }) => {
//..
navigation.navigate('XXX')
}
const FormWithNavigation = withNavigation(Form);

Answer 2

you use this.props instead just props
this one should work
const { handleSubmit, navigation: {navigate} } = props