title: Getting undefined is not an object error while navigating
body: <p>I wrote a simple login app in react  native. When I try navigating to other components by using <code>StackNaviagator</code>, I get below error:  </p>
  
  <p><a href="https://i.stack.imgur.com/bNZMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bNZMW.png" alt="react native error"></a><br>
  I'm using code from this link:  <a href="https://snack.expo.io/@react-navigation/our-first-navigate-v2" rel="nofollow noreferrer">Sample Link</a>. I'm using <code>const Appnavigator</code> to define new components to which I need to navigate to. I'm also using <code>this.props.navigation</code> to pass the prop in to every screen component in stack navigator. How can I fix that error? </p>
  
  <p>My code is:  </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Button,
    TouchableHighlight,
    Image,
    Alert
  } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  
  import Forgot from '../src/Forgot';
  import Home from '../src/Home';
  import Register from '../src/Register';
  
  const AppNavigator = StackNavigator({
    Forgot: { screen: Forgot },
    Home: { screen: Home },
    Register: { screen: Register }
  });
  
  export default class LoginView extends Component {
  
    constructor(props) {
      super(props);
      state = {
        email   : '',
        password: '',
      }
    }
  
    onLoginButton = () =&gt; {
      // Alert.alert("Alert", "Login pressed");
      this.props.navigation.navigate('Home');
    }
  
    onForgotText = () =&gt; {
      // Alert.alert("Alert", "Forgot pressed"); 
      this.props.navigation.navigate('Forgot');
    }
  
    onRegister = () =&gt; {
      // Alert.alert("Alert", "Register clicked")
      this.props.navigation.navigate('Register');
    }
  
    // onClickListener = (viewId) =&gt; {
    //   Alert.alert("Alert", "Button pressed "+viewId);
    // }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
        &lt;AppNavigator /&gt;
          &lt;View style={styles.inputContainer}&gt;
            &lt;Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}/&gt;
            &lt;TextInput style={styles.inputs}
                placeholder="Email"
                keyboardType="email-address"
                underlineColorAndroid='transparent'
                onChangeText={(email) =&gt; this.setState({email})}/&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.inputContainer}&gt;
            &lt;Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/&gt;
            &lt;TextInput style={styles.inputs}
                placeholder="Password"
                secureTextEntry={true}
                underlineColorAndroid='transparent'
                onChangeText={(password) =&gt; this.setState({password})}/&gt;
          &lt;/View&gt;
  
          &lt;TouchableHighlight style = { [styles.buttonContainer, styles.loginButton] } onPress = { () =&gt; this.onLoginButton() }&gt;
            &lt;Text style = { styles.loginText }&gt;Login&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
  
          &lt;TouchableHighlight style = { styles.buttonContainer } onPress = { () =&gt; this.onForgotText() }&gt;
              &lt;Text&gt;Forgot your password?&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
  
          &lt;TouchableHighlight style = { styles.buttonContainer } onPress = {() =&gt; this.onRegister()}&gt;
              &lt;Text&gt;Register&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#DCDCDC',
    },
    inputContainer: {
        borderBottomColor: '#F5FCFF',
        backgroundColor: '#FFFFFF',
        borderRadius:30,
        borderBottomWidth: 1,
        width:250,
        height:45,
        marginBottom:20,
        flexDirection: 'row',
        alignItems:'center'
    },
    inputs:{
        height:45,
        marginLeft:16,
        borderBottomColor: '#FFFFFF',
        flex:1,
    },
    inputIcon:{
      width:30,
      height:30,
      marginLeft:15,
      justifyContent: 'center'
    },
    buttonContainer: {
      height:45,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom:20,
      width:250,
      borderRadius:30,
    },
    loginButton: {
      backgroundColor: "#00b5ec",
    },
    loginText: {
      color: 'white',
    }
  });
  </code></pre>