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> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 !