Last week after work I was working on one of my side projects, and wanted to install Redux into a new app I’m working on which is using Wix’s React Native Navigation. However, I quickly realized that the old Redux boiler plate code that I normally use for my React Navigation based apps (not to be confused React Native Navigation from Wix) wasn’t going to work. I assumed that React Native Navigation would have a section about Redux on their site, but I wasn’t able to find anything. In fact, I actually wasn’t able to get installed in my after work coding session and pushed this work off to the weekend, which brings me here to you now writing this blog post!
Okay so here is what I’ve found: React Native Navigation used to have a helper function called registerComponentWithRedux that you could use. Unfortunately this function has since been deprecated. But the good news is, the Wix team left an excellent comment in their source code with instructions on how to install Redux into your React Native Navigation app:
registerComponentWithRedux is deprecated and will be removed in the next version! Please use Navigation.registerComponent instead. Visit the docs for more information https://wix.github.io/react-native-navigation/api/component#registering-a-component-wrapped-with-providers
https://github.com/wix/react-native-navigation/blob/b53f13c60fe6498ad1690adf1dfd7509f602965c/lib/src/Navigation.ts
Then if you head on over to the React Native Navigation docs you can check out the section on Registering a component wrapped with Providers. The code snippet they provide demonstrating how to do this looks something like:
// Source Code by Wix Published into the Public Domain
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);
Boom! There you have it. Simply wrap your screens with Redux