title: undefined is not an object (evaluating '_this2.props.navigation.navigate') - React Native
body: <p>I really can't get my navigation to work.I am using react-navigation (StackNavigator). </p>
  
  <p>This is my structure:
  <a href="https://i.imgur.com/IKExx9g.png" rel="noreferrer">http://i.imgur.com/IKExx9g.png</a></p>
  
  <p>My navigation works in <code>HomeScreen.js</code>: I navigate from <code>HomeScreen.js</code> to <code>NewScreen.js</code> without problems.</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>import React from 'react';
  import {
      StatusBar, AppRegistry
  } from 'react-native';
  import {StackNavigator} from 'react-navigation';
  import {HomeScreen} from './screens/HomeScreen';
  import AboutScreen from "./screens/AboutScreen";
  import NewScreen from "./screens/NewScreen";
  import CalendarScreen from "./screens/CalendarScreen";
  import AddAgendaScreen from "./screens/AddAgendaScreen";
  
  const SimpleApp = StackNavigator({
      Home: {screen: HomeScreen},
      About: {screen: AboutScreen},
      New: {screen: NewScreen},
      Calendar: {screen: CalendarScreen},
      AddAgenda: {screen: AddAgendaScreen}
  });
  
  console.disableYellowBox = true;
  StatusBar.setHidden(true);
  export default SimpleApp; // Export root navigator as the root component
  </code></pre>
  
  <p><strong>Homescreen.js (working):</strong></p>
  
  <pre><code>export class HomeScreen extends React.Component {
    static navigationOptions = ({navigation}) =&gt; {
      const {state, navigate} = navigation;
      return {
        title: 'eXopera'
      };
    };
  
    constructor() {
      super();
      this.state = {
        address: [],
        refreshing: false,
        page: 1,
        lastPage: 1,
        loading: true,
        listOpacity: 0,
      };
    }
  
    render() {   
      return (
        &lt;ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() =&gt; &lt;DefaultTabBar  /&gt;}&gt;
          &lt;View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen"&gt;
            &lt;Button color="#33cd5f" title="NEW"
              onPress={() =&gt; this.props.navigation.navigate('New') }/&gt;
          &lt;/View&gt;
        &lt;/ScrollableTabView&gt;
      );
    }
  }
  </code></pre>
  
  <p>Then there is another component called CalendarScreen.js (where I also try to navigate to NewScreen.js), even if I completely copy and paste the code from HomeScreen.js, I am unable to navigate. It always gives me "<strong>undefined is not an object (evaluating '_this2.props.navigation.navigate')</strong>".</p>
  
  <p>I really don't know what I can do now.. Have been struggling with this for hours.</p>
  
  <p>Thanks in advance!</p>