(React-Native) undefined is not an object (evaluating _'this.props.navigation.navigate')

Question

I'm still a novice with react. I want to make my sign In button create a new screen on the press. I've tried multiple attempts but I can't seem to get past this error:

What is it I'm doing wrong?

LoginForm.js:

    import React, { Component } from 'react';
    import { TextInput, Text, View, StyleSheet, TouchableOpacity } from  'react-native';
    import { StackNavigator } from 'react-navigation';
    import { Button, CardSection, Input, Spinner } from './common';
    import Account from './screens/Account';
    import SignUpForm from './SignUpForm';

    class LoginForm extends Component {
        render() {
            return (
              <View style={styles.container}>
                <TextInput
                  placeholder="Username or email"
                  placeholderTextColor='white'
                  returnKeyType='next'
                  style={styles.input}
                  keyboardType="email-address"
                  onSubmitEditing={() => this.passwordInput.focus()}
                />

                <TextInput
                  secureTextEntry //turns text into *** good for passwords
                  label="Password"
                  placeholder="password"
                  placeholderTextColor='white'
                  secureTextEntry
                  returnKeyType='go'
                  style={styles.input}
                  ref={(input) => this.passwordInput = input}
             />
             <TouchableOpacity style={styles.buttonContainer}>
             <Text style={styles.buttonText}>LOGIN</Text>
             </TouchableOpacity>
             <Text style={styles.textStyle}> Need help logging in?{'\n'}
             or
             </Text>
             <View style={styles.divider} />
             <TouchableOpacity
             style={styles.buttonContainer}
             onPress={() => this.props.navigation.navigate('SignUpForm')}
             >
            <Text style={styles.buttonText}>Sign Up</Text>
            </TouchableOpacity>
            </View>
            );
        }
    }
    export default LoginForm;

**Account.js:**

    import React from 'react';
    import { View, Image, TouchableOpacity, Text, TextInput } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import { Card, Button, Spinner, CardSection } from '../common';
    import LoginForm from '../LoginForm';


    class Account extends React.Component {
        static navigationOptions = {
            tabBarLabel: 'Account'
        }
        render() {
            return (<View style={styles.containerStyle}>
              <Card>
                <View style={styles.logoContainer}>
                  <Image style={styles.logo} source= . 
            {require('../../Images/ShoeJackCityLogo.png')}/>
                </View>
                <View style={styles.formContainer}>
                  <LoginForm />
                </View>
              </Card>
            </View>);
        }
    }
    export default Account;

**SignUpForm.js:**

    import React, { Component } from 'react';
    import { TextInput, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
    import { Button, CardSection, Input, Spinner } from './common';
    import router from '../../config/router';


    class SignUpForm extends Component {
        render() {
            return (
              <View style={styles.container}>
                <TextInput
                  placeholder="Username or email"
                  placeholderTextColor='white'
                  returnKeyType='next'
                  style={styles.input}
                  keyboardType="email-address"
                  onSubmitEditing={() => this.EmailInput.focus()}
/>
<TextInput
placeholder="Email"
placeholderTextColor='white'
returnKeyType='next'
style={styles.input}
keyboardType="email-address"
onSubmitEditing={() => this.passwordInput.focus()}
/>
<TextInput
secureTextEntry //turns text into *** good for passwords
label="Password"
placeholder="password"
placeholderTextColor='white'
secureTextEntry
returnKeyType='go'
style={styles.input}
ref={(input) => this.passwordInput = input}
/>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</View>
);
}
}
export default SignUp;
import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

**Router.js**

import Tournaments from '../components/screens/Tournaments';
import Account from '../components/screens/Account';
import Artists from '../components/screens/Artists';
import Shop from '../components/screens/Shop';
import SignUpForm from '../components/SignUpForm';

export const AccountStack = StackNavigator({
  Account: {
    screen: Account,
    navigationOptions: {
    title: 'Account',
    headerBackTitle: null,
  },
  SignUpForm: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Register'
    }
  },

Ignore this: jsksjkjdkfjkdfkjkdjskfjskjfjksjkjfkjsjfkjskfsjfjsjfksjfjfskfjkskjfjkjskjfjjksfjksfjkfjkfjssfjkfksskjfjsfjk

Answer 1

<LoginForm />

I don't see that you are passing any props into LoginForm which expects this.props.navigation in onPress.