title: React Higher Order Component does not work correctly
body: <p>I write a react higher order component likes below:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { TouchableWithoutFeedback } from 'react-native'
  const dismissKeyboard = require('dismissKeyboard')
  export default (WrappedComponent) =&gt; class AutoHideKeyboard extends Component {
      render() {
          return (
              &lt;TouchableWithoutFeedback onPress={dismissKeyboard}&gt;
                  &lt;WrappedComponent {...this.props}/&gt;
              &lt;/TouchableWithoutFeedback&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  
  But it's onPress function doesn't work when I press the page.</p>
  
  <p>Then I try not to use higer order component,instead I directly wrap the component like below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { TouchableWithoutFeedback } from 'react-native'
  const dismissKeyboard = require('dismissKeyboard')
  export default class Demo extends Component {
      render() {
          return (
              &lt;TouchableWithoutFeedback onPress={dismissKeyboard}&gt;
                  &lt;View&gt;
                     //some components like TextInput
                  &lt;/View&gt;
              &lt;/TouchableWithoutFeedback&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This time it does work.
  Why these two ways behave differently?</p>