Navigate to a new screen by calling a function onPress - react-native

Question

I would like to use my onLogin() function to navigate to the Dashboard view of the Android MVP I'm building. I've been thrown into a React Native project despite not knowing it and I've only just begun my career, so the answer is probably painfully obvious, but after lots of research I can't quite work it out! Hopefully one of you can guide me to the solution.
I've copied the Login view below.
import React, { Component } from 'react';
import {
TouchableHighlight,
TextInput,
Text,
View,
Image
} from 'react-native';
import styles from "./../style/CustomStylesheet";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
Email: '',
password: '',
};
}
onLogin() {
const { Email, password } = this.state;
//insert function to navigate to dashboard here?
}
render() {
return (
<View style={styles.container}>
<Image
style={styles.logo}
source={require('./../../android/app/src/main/res/drawable/login.png')}
/>
<TextInput
value={this.state.Email}
onChangeText={(Email) => this.setState({ Email })}
placeholder={'Email'}
placeholderTextColor={'#333333'}
style={styles.input}
inlineImageLeft='login_id'
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
placeholderTextColor={'#333333'}
secureTextEntry={true}
style={styles.input}
inlineImageLeft='login_password'
/>
<View style={styles.help}>
<Text>Need help?</Text>
</View>
<TouchableHighlight
style={[styles.input, styles.button]}
onPress={this.onLogin.bind(this)}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableHighlight>
<View style={styles.modal}>
<Text style={styles.modalText}>New user?</Text>
<Text style={styles.modalText}>Register on our web app or our iPad app</Text>
</View>
</View>
);
}
}
I've added the dashboard to my Stack Navigation file too. Any guidance you could give would be wonderful. Many thanks!
import Login from "./Login";
import Dashboard from "./Dashboard";
const AppNavigator = createStackNavigator(
{
Home: { screen: Login },
Dashboard: { screen: Dashboard }
},
{
headerMode: 'none'
}
);
export default createAppContainer(AppNavigator);

Answer 1

add this
onLogin=()=> {
const { Email, password } = this.state;
const { navigation } = this.props;
navigation.navigate('Dashboard');
}