Better React Native Debugging with Reactotron in Flipper

Reactotron-in-Flipper!

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
• Core Server
  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
• Reactotron-in-Flipper
  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:

1. 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)
2. Install the plugin in Flipper
   (Flipper -> Manage Plugins -> Install Plugins -> flipper-plugin-reactotron)
3. Add Reactotron’s reactotron-react-native client to your app
   (instructions here)
4. Import ReactotronFlipper and add it to your Reactotron configuration:

// in the import section:
import ReactotronFlipper from "reactotron-react-native/dist/flipper"
// in the configuration section
Reactotron.configure({
  name: "Name Here",
  createSocket: path => new ReactotronFlipper(path),
  // ...
})

Screenshot showing what to change in your configuration to add ReactotronFlipper

What can I do with Reactotron?

There is a ton of power under the hood of Reactotron. First, check out Darin Wilson’s talk at Chain React (same one linked above).

Gant Laborde also created a great video showing how to use Reactotron with Redux and Redux-Sagas.

Rich Evans (primary developer of Reactotron) gave a great talk at Ancient City Ruby/Rails/React 2019. When that video is available, we’ll update this article.

If you have any questions, feel free to ping us in the Infinite Red Community Slack or on Twitter: https://twitter.com/reactotron

Thanks to:

• Richard Evans: primary developer on Reactotron, who built Reactotron-in-Flipper
• Leon Kim: Infinite Red developer who worked with Rich on Reactotron-in-Flipper
• Michel Weststrate: Facebook engineer on Flipper
• Rick Hanlon II: Facebook engineer who sparked this idea with some mockups

Happy debugging!