NOTICE: This package is no longer maintained / deprecated

The react native team has officially deprecated flipper.

Please see this project for a replacement

This uses Expo DevTools and also provides an in-app floating inspector.

react-native-flipper-xstate

This packages allows Android and iOS apps to use the Flipper-plugin-xstate plugin to visualize and interact with their xstate machines.

Dependencies

This package depends on the native package React Native Flipper, so you will have to recompile the native apps before using this plugin.

Usage

Install the Flipper plugin on your desktop app

Install the package

1$ yarn add react-native-flipper-xstate

To use, simply import and call the inspect function at the root of your project (index.js) You will only want to do this in Debug/Dev builds.

1import { inspect } from "react-native-flipper-xstate";
2
3if (__DEV__) {
4  inspect();
5}

You also must specify the devTools option when creating your machines. Here is an example using the useMachine hook.

1const [current, send] = createMachine(machine, { devTools: true });

Todo

• Get Typescript to work