-
-
Save mdabbagh88/eaa429dd139f5e35326025e26d7dd45f 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() { | |
const store = new Store(); | |
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