React Native Support?

[spatialvlad]

Hey guys!

Thanks for the great work on making it easier to work with Statecharts.

I know it might be out of scope of what you plan to do, but it would be really great to see XState Devtools working with React Native as well.

One of the (many) benefits of XState is making it easier to share code between web and mobile by moving most of the logic to shared statecharts, while keeping presentational part as specific as it needs to be.

Unfortunately XState Devtools (similar to regular Redux Devtools) is not really working with React Native currently. Most RN developers use React Native Debugger package that combines multiple tools as a stand-alone package: https://github.com/jhen0409/react-native-debugger

I'm not sure though that XState is popular enough at the moment for the maintainers of the React Native Debugger to also add XState Devtools into it. Thus, probably it is more realistic to add RN support in XState Devtools.

As I mentioned above, I'm not sure if it is something you envision adding to this great package. But if it happens, it would be greatly appreciated.

Thanks.

[amitnovick]

Hi @spatialvlad, thanks for letting me know about this! I'm happy to see your interest 😊

Now, I'm not too familiar with React Native tooling, but I believe it should be pretty straightforward to connect it to chrome remote debugger. Once you've connected the debugger, you should just be able to use this extension from Chrome as usual. 👌

I hate to send you off to a documentation without having tried it myself, but this seems like a solved solution by the React team. If you're feeling as optimistic about this as I am, and have some time to check it out, please give this official RN doc a try.

I can understand If you're reluctant to switch out the standalone Electron-based inspection tool app you've linked with Chrome itself, but that's not really an open platform that I can do anything about. At best I could ask the maintainers to integrate it, but as you've said, I don't know if they would consider it worth their time.

[spatialvlad]

@amitnovick ,

Thanks for your prompt reply. Connecting React Native to Chrome Remote Debugger is a trivial task. And it indeed would allow using this extension as usual, but for a different use-case - opening a web application in a browser on a device, but not a native/RN application.

With RN the process is somewhat different. One needs to run the app either on a virtual device/emulator or on a psychical device and enable debugger in the app. Then RN opens a special page that looks like this:

As the page states, React Native JS code runs as a web worker inside this tab. and it provides limited debugging capability in Chrome Dev Tools. In particular, nothing happens in both Redux and XState DevTools.

Before your post I only tried running debug on a virtual device. After your reply I did double-check on a physical device, and unfortunately it does not provide more information.

The React Native Debugger that I mentioned above does a better job. Its Redux Tab has basic info on the Statechart - it's current state, context, actions, etc. It is already something, but unfortunately, without the visualization part that you added in your package.

I'm not sure about the mechanism React Native Debugger is able to get more debug info than the standard one. Maybe using the custom debugger way described here: https://facebook.github.io/react-native/docs/debugging#debugging-using-a-custom-javascript-debugger

As a side note, RND seems to have support for another popular dev tool - Apollo Client DevTools, though it is not enabled by default: https://github.com/jhen0409/react-native-debugger/blob/master/docs/apollo-client-devtools-integration.md

I'm not sure how open they might be in integrating Xstate DevTools or having it contributed as a PR, but it looks like it might be easier to have Xstate DevTools added to RND, since they seem to have integrated multiple dev tools already.

Sorry again for bothering you. I was just hoping to use your extension for RN development, not only web :)

[amitnovick]

In this case, no bother at all! I'm glad for the opportunity to learn about React Native tooling.

After confirming your detailed explanation with Redux DevTools author's answer, it seems like the process of debugging RN is a bit more nuanced than I initially thought, with it running the JS code inside a web worker (and not as a dedicated web page which I previously assumed).

Apparently Redux DevTools author opted to publish two separate packages:

• redux-devtools-extension
• remote-redux-devtools (for non-browser environments like RN)

The latter package implements a distinct communication channel compared to the first (the first being a communication channel with a loaded web page).

Some implementation details gathered from remote-redux-devtools

• Find the RN host
• Communicating between the package running in the web worker and the browser extension with websocket

Some thoughts

Implementing this would be non-trivial, but also not too hard: 🙏 thankfully Redux DevTools author has open sourced that code and it is right there to examine and adapt to our cause.

Right now I think that just having Chrome support it should be the priority, but integration into another RN standalone inspection tool is also welcome.

If anybody wants to make it happen, please let me know!

[xralphack]

@amitnovick please provide some way to debug on react-native

[jakubboguski]

Alternative solution: https://github.com/cpetzel/react-native-flipper-xstate