React-native Undefined is not an object(this.props.navigation.navigate) - react-native

Question

I'm attempting to navigate from the login page to the welcome page upon successful login using firebase using a method called submit (located within loginForm). Everything is working with the exception of the navigation, using StackNavigation, to the Welcome page.
I've looked through every post on this error and tried countless fixes using solutions posted all over but can't seem to come up with any fix. I'm sure its a simple and goofy error I'm making here. I would greatly appreciate any help.
(Apologies in advance, this is my first react-native project)
Thank you!
App.js
import React from 'react';
import * as firebase from 'firebase';
import {StackNavigator} from "react-navigation";
import Login from './src/components/Login/Login';
import Welcome from "./src/components/Welcome";
export const AppNavigator = StackNavigator({
Login: {screen: Login},
Welcome: {screen: Welcome},
});
//initialize Firebase
const firebaseConfig = {
apiKey: "************************************",
authDomain: "firstproject-r.firebaseapp.com",
databaseURL: "https://firstproject-r.firebaseio.com",
projectId: "firstproject-r",
storageBucket: "",
messagingSenderId: "************"
};
firebase.initializeApp(firebaseConfig);
class App extends React.Component {
render() {
return (
<AppNavigator/>
);
}
}
export default App;
login.js
import React from 'react';
import {StyleSheet, View, Image, Text, KeyboardAvoidingView, StatusBar}
from 'react-native';
import LoginForm from "./LoginForm";
class Login extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<KeyboardAvoidingView behavior='padding' style=
{styles.container}>
<View style={styles.logoContainer}>
<StatusBar barStyle="light-content"/>
<Image
style={styles.logo}
source=
{require('../../images/EquipRentIcon.png')}>
</Image>
<Text style={styles.title}>idostuff</Text>
</View>
<View style={styles.formContainer}/>
<LoginForm/>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#3498db',
},
logo: {
width: 160,
height: 160
},
logoContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
title: {
color: '#FFF',
fontSize: 20,
justifyContent: 'center'
},
formContainer: {}
});
export default Login;
loginForm.js
import React from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, StatusBar} from 'react-native';
import firebase from 'firebase';
// const auth = firebase.auth();
// const fbProvidor = new firebase.auth.FacebookAuthProvider();
// const googProvidor = new firebase.auth.GoogleAuthProvider();
class LoginForm extends React.Component {
constructor(props) {
super(props)
this.submit = this.submit.bind(this);
this.loginUser = this.loginUser.bind(this);
this.createUser = this.createUser.bind(this);
this.state = ({
email: '',
password: '',
navigation: this.props.navigation
})
}
loginUser = (email, password, ) => {
try {
if (this.state.password.length < 6) {
alert("Please enter at least 6 characters")
return;
}
firebase.auth().signInWithEmailAndPassword(email, password).then(function (user) {
console.log(user)
});
this.submit()
}
catch (error) {
console.log(error.toString())
}
};
createUser = (email, password) => {
try {
if (this.state.password.length < 6) {
alert("Please enter at least 6 characters")
return;
}
firebase.auth().createUserWithEmailAndPassword(email, password).then(function () {
});
this.submit()
}
catch (error) {
console.log(error.toString())
}
};
submit() {
this.props.navigation.navigate('Welcome');
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content"/>
<TextInput
style={styles.input}
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
placeholder="username"
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(email) => this.setState({email})}
placeholderTextColor="rgba(255, 255, 255, 0.7)">
</TextInput>
<TextInput
style={styles.input}
placeholder="password"
secureTextEntry
returnKeyType="go"
ref={(input) => this.passwordInput = input}
onChangeText={(password) => this.setState({password})}
placeholderTextColor="rgba(255, 255, 255, 0.7)">
</TextInput>
<TouchableOpacity
style={styles.loginButtonContainer}
onPress={() => {
this.loginUser(this.state.email, this.state.password)
}}
>
<Text style={styles.loginButtonText}>
Login
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupButtonContainer}
onPress={() => {
this.createUser(this.state.email, this.state.password)
}}
>
<Text style={styles.signUpButtonText}>
Sign Up
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
height: 40,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
marginBottom: 15,
fontSize: 20,
paddingHorizontal: 10
},
loginButtonContainer: {
backgroundColor: '#2980b9',
padding: 15,
justifyContent: 'center'
},
signupButtonContainer: {
backgroundColor: 'white',
opacity: .3,
marginTop: 10,
padding: 15,
justifyContent: 'center'
},
loginButtonText: {
textAlign: 'center',
color: 'white',
fontSize: 20,
fontWeight: '700'
},
signUpButtonText: {
textAlign: 'center',
color: 'black',
fontSize: 20,
fontWeight: '700'
}
});
export default LoginForm;
welcome.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Welcome extends React.Component{
render() {
const { navigate } = this.props.navigation;
return (
<Text>
this is the welcome screen
</Text>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#3498db',
},
});
export default Welcome;