title: React Native Error "undefined is not an object (evaluating '_this2.props.navigation.navigate')"
body: <p>I'm getting the following error in React Native and have looked at multiple posts of people with the same issue and I'm still not having any luck solving this. Not sure what is causing this issue exactly.</p>
  
  <p>HERE IS MY APP.JS CODE</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as Expo from 'expo';
  import React from 'react';
  import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity, FlatList } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import { withNavigation } from 'react-navigation';
  import HostClient from './app/Views/HostClientView';
  import ClientQueue from './app/Views/ClientQueue';
  import SearchBarr from './app/components/Searchbar';
  
  
  export default class App extends React.Component {
     static navigationOptions = {
        title: 'Welcome',
     };
  
  render() {
     return (
       &lt;Image style = {styles.container} source={require('./app/images/jukebox-background.jpg')} resizeMode="cover"&gt;
          &lt;View&gt;
             &lt;HostClient /&gt;
         &lt;/View&gt;
       &lt;/Image&gt;
     );
  }
  
  const SimpleApp = StackNavigator({
     HostClientView: { screen: HostClient },
     ClientQueueView: { screen: ClientQueue},
  });
  </code></pre>
  
  <p>HERE IS MY HOSTCLIENT.JS WHICH I MADE THE MAIN VIEW WITH ALL COMPONENTS</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity, 
  FlatList } from 'react-native';
  import Host from '../../components/Host/Host.js';
  import UserRequest from '../../components/UserRequest/UserRequest.js';
  import { StackNavigator } from 'react-navigation';
  import Button from 'react-native-button';
  
  
  
  export default class HostClient extends React.Component {
  
     render() {
        return (
           &lt;View&gt;
              &lt;Host /&gt;
              &lt;UserRequest /&gt;
              &lt;Button style = {styles.button} title="ClientQueueView"
          onPress={() =&gt; this.props.navigation.navigate('ClientQueueView') }&gt; &lt;Image style = {styles.turntable} source={require('../../images/vinyl2.png')} resizeMode="contain"/&gt;
              &lt;/Button&gt;
           &lt;/View&gt;
        );
     }
  }
  </code></pre>
  
  <p>AND FINALLY HERE IS THE USER.JS FILE</p>
  
  <pre><code>// Request Component
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { StyleSheet, AppRegistry, Text, View, Image } from 'react-
  native';
  import Button from 'react-native-button';
  import { StackNavigator } from 'react-navigation';
  
  
  export default class UserRequest extends Component {
  
  static navigationOptions = ({navigation}) =&gt; {
  const {state, navigate} = navigation;
  return {
    title: 'Noah Testing'
  };
  };
  
  constructor() {
  super();
  this.state = {
    address: [],
    refreshing: false,
    page: 1,
    lastPage: 1,
    loading: true,
    listOpacity: 0,
  };
  }
  
  
  
  render() {
  return (
    &lt;View &gt;
    &lt;Text &gt; Request &lt;/Text&gt;
    &lt;Button  title="ClientQueueView"
          onPress={() =&gt; this.props.navigation.navigate('ClientQueueView') }&gt; &lt;Image style = {styles.turntable} source={require('../../images/vinyl2.png')} resizeMode="contain"/&gt;
      &lt;/Button&gt;
    &lt;/View&gt;
  );
  }
  }
  </code></pre>