React Native compatibility?

[southerneer]

Any plans for this?

[andykog]

Yeah, definitely!

[danielkcz]

I am curious how this could work. I mean with React Native you have the packager running on the computer, you can possibly get app's source from there. However, the app is running either on a connected device or in the emulator. It's not like you have a browser you can interact with.

What could be a good fit though is react-native-debugger which already has integration with Redux. I assume it could work the similar way? Can you possibly join forces together on this matter?

[birkir]

I was able to make this work

1. yarn add mobx-devtools mobx-devtools-mst
2. In your index.ios.js add

import makeInspectable from 'mobx-devtools-mst';
import { connectToDevTools } from 'mobx-devtools/lib/mobxDevtoolsBackend';

// 1. Connect to devtools (what ever mobx-devtools standalone app tells you to put in)
connectToDevTools({ host: 'localhost', port: '8098' });

// This is a dummy store
const MyStore = types.model('MyStore', { foo: 'bar' }).create();

// 2a. I use react-native-navigation, so I can do
Navigation.events().registerAppLaunchedListener(() => {
  makeInspectable(MyStore);
  startApp();
});

// 2b. If you don't use RNN you need a way to know when the devtools are connected, so 
// for the time being, use a timeout or other event handler you know works.
setTimeout(() => {
  makeInspectable(MyStore);
}, 1000);

Then the rest

1. npm install --global mobx-devtools
2. mobx-devtools
3. react-native run-ios

[elizamaria]

Works, thank you! The only problem I have is that if I am on the Components tab in Mobx Devtools it crashes the app.

[birkir]

Hmm, they are using addEventListener on the document, you could try to just polyfill this. Let me know if it works! 👍

global.document = {
  addEventListener() {},
  removeEventListener() {}
};

[elizamaria]

I don't get the same error, but there is a traverse(document) method and it crashes there.

[SagaciousLittle]

Is there any elegant way to use mobx debugging please?

[max-kim]

I connected MST to react-native-debugger with next steps:

1. npm i --save mst-middlewares
2. npm i --save-dev remotedev
3. modify your app:

import { AppRegistry } from 'react-native'
import { Provider } from 'mobx-react';
import { types as t } from 'mobx-state-tree';
import { connectReduxDevtools } from 'mst-middlewares';
import remotedev from 'remotedev';

import MyApp from './src/components/MyApp'

const RootStore = t.model('store', {
  some: t.optional(SomeModel, {}),
  other: t.optional(OtherModel, {}),
});

const store = RootStore.create();

connectReduxDevtools(remotedev, store);

const App = () => (
  <Provider store={store}>
    <MyApp />
  </Provider>
);

AppRegistry.registerComponent(appName, () => App);

This case works only with react-native-debugger, but not chrome redux-devtools.

[tmaly1980]

One thing missing from the above is passing a redux-compatible store to <Provider store={reduxStore}>, like so:

const reduxStore = asReduxStore(store); // Where asReduxStore is imported from mst-middlewares.