Last active
January 11, 2020 09:56
-
-
Save megahertz/3aad3adafa0f7d212b81f5e371863637 to your computer and use it in GitHub Desktop.
This is a provider which allows to use mobx-react Provider with wix/react-native-navigation.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Provider } from 'mobx-react/native'; | |
const SPECIAL_REACT_KEYS = { children: true, key: true, ref: true }; | |
export default class MobxRnnProvider extends Provider { | |
props: { | |
store: Object | |
}; | |
context: { | |
mobxStores: Object | |
}; | |
getChildContext() { | |
const stores = {}; | |
// inherit stores | |
const baseStores = this.context.mobxStores; | |
if (baseStores) { | |
for (let key in baseStores) { | |
stores[key] = baseStores[key]; | |
} | |
} | |
// add own stores | |
for (let key in this.props.store) { | |
if (!SPECIAL_REACT_KEYS[key]) { | |
stores[key] = this.props.store[key]; | |
} | |
} | |
return { | |
mobxStores: stores | |
}; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Navigation } from 'react-native-navigation'; | |
import Provider from './lib/MobxRnnProvider'; | |
import store from './store'; | |
import HomeScreen from './screens/HomeScreen'; | |
export default function startApplication() { | |
Navigation.registerComponent('myapp.HomeScreen', () => HomeScreen, store, Provider); | |
Navigation.startSingleScreenApp({ | |
screen: { screen: 'myapp.HomeScreen' } | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import AuthStore from './AuthStore'; | |
import UserStore from './UserStore'; | |
export default { | |
auth: new AuthStore(), | |
users: new UserStore() | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from 'react'; | |
import { Text } from 'react-native'; | |
import { inject, observer } from 'mobx-react/native'; | |
@inject('users') | |
@observer | |
export default class UserScreen extends Component { | |
render() { | |
const { users } = this.props; | |
return ( | |
<Text>Users count: {users.length}</Text> | |
); | |
} | |
} |
My workaround (from React docs):
I wrapped my screenComponent
with a storeProviderHOC
:
import React, { Component } from 'react';
export default function storeProviderHOC(WrappedComponent, Provider, store) {
return class extends Component {
render() {
return (
<Provider {...store}>
<WrappedComponent {...this.props} />
</Provider>
);
}
};
};
Register Component:
import { Provider } from 'mobx-react';
Navigation.registerComponent(`mobX-RNN-enabled-component`, () => storeProviderHOC(ScreenComponent, Provider, myMobXStoreObject));
Doesn't appear to work with RNN v1, getting the same store is not available error
I am using registerComponentWithRedux
And it works.
Navigation.registerComponentWithRedux('myapp.HomeScreen', () => HomeScreen, store, Provider);
My package dependencies:
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-navigation": "2.0.2641",
"mobx": "4.3.1",
"mobx-react": "5.1.0"
Thank you @megahertz !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Did as suggested above.
Getting an error:
Error: MobX injector: Store 'storeName' is not available! Make sure it is provided by some Provider
Is this
Provider
compatible for RNN V2?Check this out.