Inspect your V5 xstate machines using StatelyAI's inspect tool with React Native and Expo apps

See the Demo App for reference implementation

This should open up the inpsector in a web browser

As of June 2024, the createSkyInspector from stately does not work with React Native. I've created a tool that allows this to work with React Native. This behaves just like the expo dev tool, but it allows anyone to view the inspector through a web browser using a public URL.

This should work for all React Native projects (not only Expo)

See the floating-inspector README for info on how to use the in-app floating inspector.

You can use both inspectors by using the combineObservers helper function.

import { combineObservers } from "react-native-xstate-inspect-core";

// your component
const inspectors = [expoPluginInspector, floatingInspector];
const combinedInspectors = useMemo(() => {
return combineObservers(inspectors);
}, [expoPluginInspector, floatingInspector]);

const [state, send] = useMachine(DemoMachine, {
inspect: combinedInspectors,
});

See the Demo App for reference implementation

• (Floating Inspector) - Zoom buttons appear on Android but not iOS. Fix this.
• (Floating Inspector) - Show loading indicator when webview is loading inspector. (show error view if offline)
• (Floating Inspector) - Test memory leaks
• (Floating Inspector) - Expose the WebViewInspector as a standalone component (not floating)
• (Floating Inspector) - Consider clamping/bounding the floating window to device screen. (similar to this)
• (Both) - listen for hot/live reload, so we can reload the inspectors

Contributions are very welcome!

@statelyai/inspect is using a very old version of partysocket (0.25). I added a dependency on their latest version (1.0) to address some of the react native issues (another issue)