This is a provider which allows to use mobx-react Provider with wix/react-native-navigation.

MobxRnnProvider.js

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
    };
  }
}

startApplication.js

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' }
  });
}

store.js

import AuthStore from './AuthStore';
import UserStore from './UserStore';

export default {
  auth: new AuthStore(),
  users: new UserStore()
};

UserScreen.js

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>
    );
  }
}

@megahertz Thanks for this snippets! 👍

Something to notice, is not possible create an object using new Store(), the store object doesn't have a constructor, it's just multiple objects, so it's gonna throws something line Object is not constructor (evaluating 'new _store.default())'

@frangeris, thank you, fixed

Thanks for the snippet. Unfortunately i faced this error below when trying to inject my mst store

"Factory.Type should not be actually called. It is just a Type signature that can be used at compile time with Typescript, by using typeof type.Type"

the model:

const movies = types
	.model("moviesName", {
		// details: {},
		// genres: [],
		// list: {},
		nowPlayingMovies: types.map(types.frozen),
		popularMovies: types.map(types.frozen)
		// searchResults: {}
	})

Any clue?

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.

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 !