Skip to content

Set up Filpper with Your React Native Application

April 3rd, 2020 - Tutorial(1 min)

TL;DR: Install OpenSSL and watchman if you want to benefit from using flipper

RN 0.62 was launched recently, with support for a new interesting tool (for me) named flipper. As I was using the previous combination of dev tools and reactotron, I was curious to test the new tool.

I’ve updated my app (via creating a new one and migrating the code bit by bit), downloaded and launched flipper, to see the same logs I saw in the console. Most disappointing. So, here’s my process to getting things right:

Prerequisites

I have found the following to be essential:

  1. React-native 0.62 (most recent at the time of writing),
  2. Flipper (d’oh!),
  3. OpenSSL (I used the windows binaries from here),
  4. Watchman - You can use their own steps to install.
  5. The relevant SDKs. For the moment, I only use Android.

Process

Add Flipper to the path, so you can launch it from the command line. Add OpenSSL, Watchman and the Android SDK to the path, because Flipper needs them. Go to Flipper’s options and set the SDK accordingly.

Launch Flipper and then launch your app (e.g. via yarn android). You should see Flipper connected to your app now:

flipper

I have also added the DB browser for flipper plugin and the reactotron plugin, just in case :)

HTH,

Share on
Reddit
Linked in
Whatsapp

A little experiment: