react-native-offline: ReduxNetworkProvider with react-native-navigation - could not find store

Hi,

I’m trying to use the v4.x.x with react-native-navigation and can’t make the new ReduxNetworkProvider work.

Here is a simple example of what I’m trying to do

import { applyMiddleware, combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import { reducer as networkReducer } from 'react-native-offline';

const rootReducer = combineReducers({
    network: networkReducer
});
const store = createStore(rootReducer, applyMiddleware(thunk, logger));

// Registering the screen as described here https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration?id=registering-screens-with-wrapping-provider-component
Navigation.registerComponent('Home', () => (props) => (
        <Provider store={ store }>
            <Home {...props} />
        </Provider>
    ), () => Home);

In my Home component, I can access the network isConnected value, though it is always true. So I’ve tried to add the ReduxNetworkProvider with a pingInterval to check the connectivity.

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

class Home extends Component {
    render() {
        return (
            <ReduxNetworkProvider pingInterval={3000}>
                <Text>You're { this.props.isOnline ? 'online' : 'offline' }</Text>
            </ReduxNetworkProvider>
        );
    }
}

function mapStateToProps({ network }) {
    return {
        isOnline: network.isConnected
    }
}
export default connect(mapStateToProps)(Home);

But then I get the following error: Screenshot 2019-04-16 at 11 18 59

It looks like the ReduxNetworkProvider is not a descendant of the react-redux <Provider> component. Am I using it the wrong way?

Lib used:

"react": "16.8.3",
"react-native": "0.59.4",
"react-native-navigation": "2.17.0",
"react-native-offline": "4.3.1",
"react-redux": "7.0.2",
"redux": "4.0.1",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0"

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 6
  • Comments: 17 (2 by maintainers)

Most upvoted comments

Same here using react-navigation.

Hi,

I searched a solution to use the react-redux ^7.1.0 in my app and to use this package too.

According to the changelog of react-redux, the ^7.1.0 seems be ok for the this package. I looked the code for the ReduxProvider and I didn’t see any requirements to not use ^7.1.0. Someone can confirm ? I don’t know if the other components provided by this package need the ^6.0.0 of react-redux, but for redux, it works on my side.

So to do the tricks with yarn, I used the resolutions method. Add in your package.json :

"resolutions": {
    "react-redux": "^7.1.0"
  },

Then execute and try it in your app. rm -rf nodes_modules yarn install

Latest version 4.3.2 should resolve the issue, please give it a try