title: React-Navigation - Header interaction with its screen component, Failed prop type
body: <p>I am following the <a href="https://reactnavigation.org/docs/en/hello-react-navigation.html" rel="noreferrer">React-Navigation</a> tutorial, and got stuck on the section titled <a href="https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component" rel="noreferrer">Header interaction with its screen component</a>.  <a href="https://snack.expo.io/@react-navigation/header-interacting-with-component-instance-v3" rel="noreferrer">The code</a> in the tutorial work fine in the emulator provided at snack, but I discovered that when running locally I encountered the following error:</p>
  
  <p><code>Warning: Failed prop type: The prop 'onPress' is marked as required in 'Button', but its value is 'undefined'.</code></p>
  
  <p>I managed to get the code working on my local machine using expo-cli by changing the onPress event assignment in navigationOptions as follows (<a href="https://snack.expo.io/@ray.maritz/header-interacting-with-component-instance-v3" rel="noreferrer">my snack here</a>):</p>
  
  <pre><code>&lt;Button
       onPress={()=&gt;{navigation.getParam('increaseCount')()}}
     //onPress={navigation.getParam('increaseCount')} - as in tutorial
       title="+1"
       color={Platform.OS === 'ios' ? '#fff' : null}
  /&gt;
  </code></pre>
  
  <p>I am hoping someone might have some insight into why this is so.  I checked and I am using the same version of Expo (v.32.0) locally.</p>
  
  <p>App.js listing:</p>
  
  <pre><code>import React from 'react';
  import { Button, Image, Platform, View, Text } from 'react-native';
  import { createStackNavigator, createAppContainer } from 'react-navigation';
  
  class LogoTitle extends React.Component {
    render() {
      return (
        &lt;Image
          source={require('./spiro.png')}
          style={{ width: 30, height: 30 }}
        /&gt;
      );
    }
  }
  
  class HomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) =&gt; {
      return {
        headerTitle: &lt;LogoTitle /&gt;,
        headerRight: (
          &lt;Button
            onPress={()=&gt;{navigation.getParam('increaseCount')()}}
            //onPress={navigation.getParam('increaseCount')}
            title="+1"
            color={Platform.OS === 'ios' ? '#fff' : null}
          /&gt;
        ),
      };
    };
  
    componentWillMount() {
      this.props.navigation.setParams({ increaseCount: this._increaseCount });
    }
  
    state = {
      count: 0,
    };
  
    _increaseCount = () =&gt; {
      this.setState({ count: this.state.count + 1 });
    };
  
    render() {
      return (
        &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
          &lt;Text&gt;Home Screen&lt;/Text&gt;
          &lt;Text&gt;Count: {this.state.count}&lt;/Text&gt;
          &lt;Button
            title="Go to Details"
            onPress={() =&gt; {
              /* 1. Navigate to the Details route with params */
              this.props.navigation.navigate('Details', {
                itemId: 86,
                otherParam: 'First Details',
              });
            }}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation, navigationOptions }) =&gt; {
      const { params } = navigation.state;
  
      return {
        title: params ? params.otherParam : 'A Nested Details Screen',
        /* These values are used instead of the shared configuration! */
        headerStyle: {
          backgroundColor: navigationOptions.headerTintColor,
        },
        headerTintColor: navigationOptions.headerStyle.backgroundColor,
      };
    };
  
    render() {
      /* 2. Read the params from the navigation state */
      const { params } = this.props.navigation.state;
      const itemId = params ? params.itemId : null;
      const otherParam = params ? params.otherParam : null;
  
      return (
        &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
          &lt;Text&gt;Details Screen&lt;/Text&gt;
          &lt;Text&gt;itemId: {JSON.stringify(itemId)}&lt;/Text&gt;
          &lt;Text&gt;otherParam: {JSON.stringify(otherParam)}&lt;/Text&gt;
          &lt;Button
            title="Update the title"
            onPress={() =&gt;
              this.props.navigation.setParams({ otherParam: 'Updated!' })
            }
          /&gt;
          &lt;Button
            title="Go to Details... again"
            onPress={() =&gt; this.props.navigation.navigate('Details')}
          /&gt;
          &lt;Button
            title="Go back"
            onPress={() =&gt; this.props.navigation.goBack()}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const RootStack = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
      Details: {
        screen: DetailsScreen,
      },
    },
    {
      initialRouteName: 'Home',
      defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      },
    }
  );
  
  const AppContainer = createAppContainer(RootStack);
  
  export default class App extends React.Component {
    render() {
      return &lt;AppContainer /&gt;;
    }
  }
  </code></pre>