react-native-modals: Invariant Violation with Redux connected components

I’m hitting an Invariant Violation error that goes like this:

Invariant Violation: Could not find "store" in the context of "Connect(ConnectedSubComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(ConnectedSubComponent) in connect options.

I’ve noticed that this only happens when using react-redux connect() to connect a component into redux store and placing this as the child component in the popup dialog.

I reproduced the error for you to take a look at here: https://github.com/tuomohopia/reduce-fail

Am I using this library the correct way or is this an actual bug that is discovered?

I’m using Android with emulator.

Versions:

Windows 10
node v10.15.3
react-native-popup-dialog 0.17.0
react-native v0.59.2
redux 4.01
react-redux 6.01

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 18 (1 by maintainers)

Most upvoted comments

The workaround is to wrap the content inside the modal, with a provider that consumes the relevant reducers. I overcame the problem with this method. The example is as below:

// the reducers contain the one that the component inside the modal targets
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

<Modal
  visible={this.state.modalState}
  onDismiss={() => {
	...
  }}
  onTouchOutside={() => {
	this.setState({modalState: false});
  }}
  onHardwareBackPress={() => {
	this.setState({modalState: false});
	return true;
  }}>
  <Provider store={store}>
	<View>
	// the content
	</View>
  </Provider>
</Modal>

MasoudShah on Jan 31, 2020