title: Using react-redux connect method in react-navigation show error "The component for route 'x' must be a React component
body: <p>I am using react-redux to connect redux to my react-native project, but when I use <code>export default connect(state =&gt; ({ count: state.count }))(Test)
  </code> method and importing to react navigation as <code>creactStackNavigator({test:Test})</code> it shows </p>
  
  <pre><code>The component for route 'test' must be a React component
  
  import MyScreen from './MyScreen';
  ...
  test: MyScreen,
  }
  </code></pre>
  
  <p>but when I remove <code>connect()</code> method it works perfectly fine </p>
  
  <p><strong>Environment:</strong></p>
  
  <pre><code>"react":16.8.4
  "react-native":0.59.4
  "react-redux": "7.0.2",
  "redux": "4.0.1",
  "react-navigation": "2.18.2",
  
  </code></pre>
  
  <p><strong>Test.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View,Button} from 'react-native';
  import  {connect}  from 'react-redux';
  
  class Test extends Component {
  
    render() {
      return (
        &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;Text&gt;count:{this.props.count}&lt;/Text&gt;
           &lt;Button title="Increment" onPress={() =&gt; this.props.incrementCounter()}&gt;&lt;/Button&gt;
           &lt;Button title="Decrement" onPress={() =&gt; this.props.decrementCounter()}&gt;&lt;/Button&gt;
        &lt;/View&gt;
      )
  }
  }
  const mapDispatchToProps = dispatch =&gt;({
    incrementCounter: _ =&gt; dispatch({type:"INCREMENT_COUNTER"}),
    incrementCounter: _ =&gt; dispatch({type:"DECREMENT_COUNTER"}),
  })
  export default connect(state =&gt; ({ count: state.count }),mapDispatchToProps )(Test)
  </code></pre>
  
  <p><strong>reducers.js</strong></p>
  
  <pre><code>
  const INITIAL_STATE = {
      count: 1
  }
  export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
          case 'COUNTER_INCREMENT': {
              return (Object.assign({}, { ...state, count: state.count + 1}))
          }
          case 'COUNTER_DECREMENT': {
              return Object.assign({},{ ...state,  count: state.count - 1 });
          }
          default: {
              return state;
          }
      }
  }
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Platform, } from 'react-native';
  import { Provider } from 'react-redux';
  
  import { createStackNavigator} from 'react-navigation';
  import Test from './src/screens/test';
  import Screen2 from './src/screens/screen2';
  import { createStore } from 'redux';
  import reducers from './reducers';
  
  const store = createStore(reducers);
  
  const AppNavigator = createStackNavigator({
    test: Test,
    screen2: Screen2
  }, {
      headerMode: "none"
    });
  
  export default class App extends Component {
  
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;AppNavigator /&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Expected behavior:</strong></p>
  
  <p>It should connect to redux store and display <code>this.props.count</code> value</p>
  
  <p><strong>P.S</strong> :
  This is just demonstration of my problem ,the actual code is similar to this demo </p>