React native invariant violation error

Question

I want to implement redux in my react-native app, I imported provider in App.js but when I wrap App content inside <Provider store={store}></Provider> it gives me this error:

Invariant Violation: Objects are not valid as a React child (found: object with .... object with keys {$$typeof, type, key, ref, props, _owner, _store}).

I know that I can't render object in return method but what I am supposed to do, how to connect app to redux ?

import React, { Component } from 'react';

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// import reducer from './reducers/index';

import TabNavigation from './navigation/TabNavigation';
import StackNavigation from './navigation/StackNavigation';

//const store = createStore(reducer, applyMiddleware(thunk));

export default class App extends React.Component{

  render() {
    return (
    //<Provider store={store}>
        <TabNavigation />
      //</Provider>
      );
  }
}

It's commented out now and it works, if I uncomment it it gives the error...

Answer 1

I see something is wrong on this line.

//const store = createStore(reducer, applyMiddleware(thunk));

The second parameter is the initial state and you are passing middleware there. See if this can solve it.

If that does not solve it, then the problem would be in the Component TavNavigation is rendering.