Error: The Component for route 'HomeScreen' must be a React Component while using Redux connect()

Question

I'm Getting this error - "The Component for route 'HomeScreen' must be a React Component while using Redux connect()" while applying Redux connect() and while removing connect() the app works fine in react native.

Below I have mentioned the code:

import React, { Component, Fragment } from 'react';
import { View, Text } from 'react-native';
import {connect} from 'react-redux';

class Sample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataSource: {}
        };
    }
    render() {
        return (
            <View>
                <Text>Hi</Text>
            </View>
        )
    }
}


const container = connect()(Sample);
export default container;

Also I have tried to downgrade React Redux version from 7.0.1 to 6.0.1, But still I'm facing the same issue.

Also I have tried the Solution, but still the problem exists.

Could you provide your imports and also it's good to see the the Home component — amirhaa, Sep 11 '19 at 08:02
Here are my imports: import React, { Fragment } from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; import Home from './src/Components/Home'; — Abhishek siva, Sep 11 '19 at 09:25
Are these imports belong to the module you are exporting your Component with redux connect? because you are importing Home and then export it again with redux connect according to your question example — amirhaa, Sep 11 '19 at 09:31
And here is my Home Component: class Home extends Component { constructor(props) { super(props); } componentDidMount() { this.props.getTopCategoryDetails();} render() { const { topCategory } = this.props; return ( Hi ) } } export default connect(mapStateToProps, mapDispatchToProps)(Home); — Abhishek siva, Sep 11 '19 at 09:33
I imported Home component in App.js and I exported connect in Home component — Abhishek siva, Sep 11 '19 at 09:36
I really want to help but the codes you provided seems fine and I can't find the problem, I think it would be better If you edit your question and add extra information with code formatting — amirhaa, Sep 11 '19 at 09:47
Stuck with this past two days, but without implementing connect and other redux concepts my app is running correctly, I don't know what is the exact problem — Abhishek siva, Sep 11 '19 at 09:54
Added additional information now, can anyone please help me? — Abhishek siva, Sep 12 '19 at 03:08
I found that the issue is with react-redux version 7.0.1, so I downgraded it to 5.0.1 and now it is working fine. — Abhishek siva, Sep 12 '19 at 09:32

score 1 · Accepted Answer · answered Sep 12 '19 at 09:37

Finally, I solved my problem by downgrading react-redux from 7.0.2 to 5.1.1, the problem is that in react-redux 7.0.2 connect() method returns object but in react-navigation 2.18.2 it assumed to be function I guess, so there is a type mismatch, therefore I have to downgrade react-redux to 5.1.1.

Error: The Component for route 'HomeScreen' must be a React Component while using Redux connect()

1 Answers1