Skip to content

Instantly share code, notes, and snippets.

@alexxsanchezm
Forked from megahertz/MobxRnnProvider.js
Created August 15, 2018 15:46
Show Gist options
  • Save alexxsanchezm/f42d8d1739b3c5dde5130c0fc9927470 to your computer and use it in GitHub Desktop.
Save alexxsanchezm/f42d8d1739b3c5dde5130c0fc9927470 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.
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
};
}
}
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' }
});
}
import AuthStore from './AuthStore';
import UserStore from './UserStore';
export default {
auth: new AuthStore(),
users: new UserStore()
};
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