If you’re a React Native developer, you’ve possibly heard of Reactotron, the best way to debug the JavaScript side of a React Native app.

If you haven’t, go watch this video by Darin Wilson at Chain React now!

Recently, Facebook also built a debugging app called Flipper which has historically been focused on the native side of mobile apps. You can learn more about it here.

Reactotron handles the JavaScript side and Flipper handles the native side. This sounds like a perfect match for debugging React Native apps end-to-end. But in the past, you had to run two apps in order to take advantage of it.

Flipper’s Network debugging screen

Reactotron’s Timeline screen

That is, until today!

Infinite Red is ecstatic to announce Reactotron-in-Flipper, a brand-new plugin for Flipper that brings all of the goodness of Reactotron to Flipper. Now, you can set up Flipper, bring in Reactotron-in-Flipper, and debug your React Native apps on both the native and JavaScript sides.

But don’t worry — the standalone Reactotron desktop app will keep working and keep receiving updates!

Reactotron-in-Flipper screenshot

Caveats

One caveat before we get too much further: it will be React Native 0.62+ only due to requirements of the react-native-flipper lib.

How does it work?

We separated much of the logic behind Reactotron (the Electron-based desktop app) into separate modules:

Core UI

https://github.com/infinitered/reactotron-core-ui/

The main Reactotron user interface

https://github.com/infinitered/reactotron-core-ui/ The main Reactotron user interface Core Server

https://github.com/infinitered/reactotron-core-server

Websocket server that receives messages from the client

https://github.com/infinitered/reactotron-core-server Websocket server that receives messages from the client Reactotron

https://github.com/infinitered/reactotron

The standalone desktop app

https://github.com/infinitered/reactotron The standalone desktop app Reactotron-in-Flipper

https://github.com/infinitered/flipper-plugin-reactotron

The Flipper plugin itself

https://github.com/infinitered/flipper-plugin-reactotron The Flipper plugin itself Reactotron React Native client

https://github.com/infinitered/reactotron-react-native

The client-side package that goes in your React Native app

Reactotron and Reactotron-in-Flipper both use Core UI to display information. This means if we want to make a new user interface, we just add it to Core UI and release new versions of Reactotron and Reactotron-in-Flipper that reference the new version of Core UI.

Reactotron’s React Native client is capable of sending messages to the Reactotron standalone desktop app or the Reactotron-in-Flipper plugin. The standalone app uses Core Server to establish a websocket connection, while the Reactotron-in-Flipper plugin uses the existing Flipper connection. They both share “manager” code to avoid duplication.

So, this sounds great. How do I get started?

For Reactotron standalone desktop app, just click here and follow the instructions.

For Reactotron-in-Flipper:

Install Flipper (fbflipper.com) and configure it for your app

(in React Native 0.62 and higher, it is preconfigured for you — and following the upgrade helper to 0.62+ will configure Flipper for you for projects < 0.62) Install the plugin in Flipper

(Flipper -> Manage Plugins -> Install Plugins -> flipper-plugin-reactotron) Add Reactotron’s reactotron-react-native client to your app

(instructions here) Import ReactotronFlipper and add it to your Reactotron configuration: