title: react native navigator:Undefined is not an object(evaluating this.props.navigation.navigate)
body: <p>I'm not able to understand how to implement navigation in react-native.
  as per the <a href="https://facebook.github.io/react-native/docs/navigation.html" rel="nofollow noreferrer">doc</a> i have installed the plugin and integrated the code but it keeps giving the error</p>
  
  <p><strong>Undefined is not an object(evaluating this.props.navigation.navigate)</strong></p>
  
  <p>Below is the index.android.js</p>
  
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  
  import Login from './src/pages/Login';
  import Home from './src/pages/Home';
  
  import { StackNavigator } from 'react-navigation';
  
  export default class ECart extends Component {
    render() {
      return (
        &lt;App /&gt;
      );
    }
  }
  
  const App = StackNavigator({
  Login:{screen:Login},
  Home: {screen: Home}
  });
  
  
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  });
  
  AppRegistry.registerComponent('ECart', () =&gt; ECart);
  </code></pre>
  
  <p>The Login page</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    Alert,
    Button,
    TouchableOpacity
  } from 'react-native';
  
  import { StackNavigator } from 'react-navigation';
  
  import Home from './Home';
  
  
  export default class Login extends Component {
  
  
  
      constructor(props) {
           super(props);
          this.state = {};
          this.onButtonPress=this.onButtonPress.bind(this);
  
      }
  
  
      onButtonPress= () =&gt; {
         alert("ok");
          const { navigate } = this.props.navigation;
          navigate(Home);
          };
  
      render() {
  
      return (
          &lt;View style={styles.container}&gt;
  
                  &lt;View style={{justifyContent: 'center',alignItems: 'center',height:250}}&gt;
                      &lt;Image style={{}} source={require('../img/ic_launcher.png')} /&gt;
                  &lt;/View&gt;
                &lt;View style={styles.wrapper}&gt;
  
                      &lt;View style={styles.inputWrap}&gt;
                          &lt;View style={styles.iconWrap}&gt;
                          &lt;Image style={styles.icon} source={require('../img/icon/ic_email.png')}/&gt;
                          &lt;/View&gt;
  
                          &lt;TextInput
                            style={styles.input}
                            placeholder="Username"
                            underlineColorAndroid="transparent"
                            placeholderTextColor="#939598"
                          /&gt;
  
                      &lt;/View&gt;
  
                      &lt;View style={styles.inputWrap}&gt;
  
                          &lt;View style={styles.iconWrap}&gt;
                            &lt;Image style={styles.icon} source={require('../img/icon/ic_lock.png')}/&gt;
                          &lt;/View&gt;
                          &lt;TextInput
                            style={styles.input}
                            placeholder="Password"
                            secureTextEntry
                            underlineColorAndroid="transparent"
                            placeholderTextColor="#939598"
                          /&gt;
  
                      &lt;/View&gt;
  
                      &lt;TouchableOpacity
                        activeOpacity={0.5}
                        onPress={this.onButtonPress}&gt;
                        &lt;View style={styles.button}&gt;
                            &lt;Text style={styles.buttonText}&gt;Login&lt;/Text&gt;
                        &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
  
                      &lt;TouchableOpacity activeOpacity={0.5}&gt;
                        &lt;View style={styles.textWrap}&gt;
                            &lt;Text&gt;Forgot Password.&lt;/Text&gt;&lt;Text&gt;Reset here&lt;/Text&gt;
                        &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
  
                &lt;/View&gt;
  
                  &lt;View style={styles.bottomTextWrap}&gt;
                      &lt;Text style={{}}&gt; By clicking Sign In, you agree to our Terms and that you have read our Data Policy, including our Cookie Use.
                      &lt;/Text&gt;
                  &lt;/View&gt;
  
                &lt;View style={styles.bottomTextWrap}&gt;
                 &lt;Text&gt; Copyright  2017 Suyati Technologies
                 &lt;/Text&gt;
               &lt;/View&gt;
  
          &lt;/View&gt;
  
  
  
      );
    }
  
  }
  
  const styles= StyleSheet.create({
    container:{
      flex:1,
      backgroundColor: '#FFFFFF'
    },
  
    inputWrap:{
      flexDirection:"row",
      marginVertical:10,
      height:50,
      borderWidth:1,
      borderColor:'#939598',
      backgroundColor:'transparent',
    },
    textWrap:{
      flexDirection:"row",
      backgroundColor:'transparent',
      justifyContent:'center',
      alignItems:'center',
      marginVertical:10,
      paddingHorizontal:20
    },
    bottomTextWrap:{
      flex:1,
      flexDirection:"row",
      backgroundColor:'transparent',
      justifyContent: 'center',
      alignItems:'flex-end',
      marginVertical:10
    },
    text:{
      justifyContent:'center',
      alignItems:'center'
    },
  
    input:{
      flex:1,
      paddingHorizontal:10,
      backgroundColor:"transparent",
      color:'#939598'
    },
    wrapper:{
      paddingHorizontal:30
    },
    iconWrap  :{
      paddingHorizontal:7,
      justifyContent:'center',
      alignItems:'center',
      borderColor:'#939598'
    },
    icon:{
      width:20,
      height:20
    },
    button:{
      backgroundColor:'#13AFBC',
      paddingVertical:10,
      marginVertical:10,
      justifyContent:'center',
      alignItems:'center'
    },
    buttonText:{
      color:'#FFFFFF',
      fontSize:18
    }
  })
  </code></pre>
  
  <p>I'm trying to navigate to the home screen.
  I'm finding react-native a bit difficult.
  If anyone could guide me in the right direction it will be very helpful as i'm stuck at it and need a new approach.</p>
  
  <p>EDIT-I changed the code but still it wont navigate.I get the alert but it stays on the loginpage</p>
  
  <p>Thanks!</p>