React Native Xstate Inspector
Inspect your V5 xstate machines using StatelyAI's inspect tool with React Native and Expo apps
See the Demo App for reference implementation
Expo Dev Tool Plugin
Activate the plugin by pressing Shift + 'm' in the expo packager terminal and select expo-xstate-inspect
This should open up the inpsector in a web browser
See the README for implementation details.
Sky Inspector (stately.ai hosted webpage inspector)
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.
See the README for implementation details.
In-App Floating Inspector
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.
Using multiple inspectors
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
Todo Tasks
Contributing
Contributions are very welcome!
Notes:
@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)
