react-native-xstate-floating-inspect

Inspect your V5 xstate machines using an In-App inspector

See the Demo App for reference implementation

Add the package to your dependencies

1$ npm install react-native-xstate-floating-inspect

Usage

There are two ways to use this tool. You can either construct your own inspector using our hook, or you can use our Context Provider which will make the inspector available to your entire app. Only a single instance can be alive at a given time, so pick the use case that works best for you.

Once you create the inspector, be sure to render the floating window near the root of your view hierarchy

Create a single use Inspector

1import {
2  FloatingInspector,
3  useFloatingXStateInspector,
4} from "react-native-xstate-floating-inspect";
5
6const Component = () => {
7  const inspector = useXStateInspectorDevTool();
8  const [state, send] = useMachine(machine, {
9    inspect: inspector?.inspect,
10  });
11
12  const [isFloatingVisible, setIsFloatingVisible] = useState(true);
13
14  return (
15    <>
16        ...
17        {isFloatingVisible && (
18            <FloatingInspector onClosePress={() => setIsFloatingVisible(false)} />
19        )}
20    </>
21  )
22}
23

Use Provided Inspector from Context

First, create a Provider that will internally create the inspector.

1import { FloatingXStateInspectorProvider } from 'react-native-xstate-floating-inspect';
2
3const App = () => (
4    <FloatingXStateInspectorProvider>
5        {/* rest of app */}
6        <FloatingInspector onClosePress={() => setIsFloatingVisible(false)} />
7    </FloatingXStateInspectorProvider>
8);

Then in a component where you have a machine, grab the inspector using this hook.

1import { useProvidedXstateFloatingInspector } from 'react-native-xstate-floating-inspect';
2
3 const inspector = useProvidedXstateFloatingInspector();
4  const [state, send] = useMachine(audioMachine, {
5    inspect: inspector?.inspect,
6  });

This uses the already created inspector in the Context. It is null for production builds.

Troubleshooting

Compilation issue - Cannot find EventTarget

The error looks like this...

ERROR  
  PartySocket requires a global 'EventTarget' class to be available!
  You can polyfill this global by adding this to your code before any partysocket imports: 
  
  import 'partysocket/event-target-polyfill';

Instead of using this polyfill, we can install 'event-target-shim' and then polyfill it.

import { EventTarget, Event } from 'event-target-shim';
global.EventTarget = EventTarget;
global.Event = Event;