Flipper integration on React Native and Android app.

Welcome to our blog, where today we’re going to take a closer look at Flipper — the mobile debugging platform. Flipper is a powerful tool that enables developers to debug their mobile apps quickly and easily, with real-time feedback and intuitive debugging capabilities.

What is Flipper?

Flipper was developed by Facebook, and it’s a lightweight and easy-to-use platform that can be used on both Android and iOS devices. With Flipper, you can quickly inspect and modify the data that your app is generating, view the network traffic, and monitor the performance of your app in real time.

One of the key benefits of Flipper is that it offers a unified debugging experience across multiple platforms. This means that you can use the same tool for debugging your Android and iOS apps, without having to switch between different tools or environments. Flipper also offers a wide range of plugins that can be used to extend its functionality, making it even more versatile and powerful.

One of the most useful features of Flipper is its ability to capture and replay the interactions that users have with your app. This means that you can see exactly what your users are doing, and how they’re interacting with your app, which can be incredibly valuable for improving the user experience and identifying any issues or bugs.

In summary, Flipper is a powerful and versatile mobile debugging platform that offers developers a wide range of tools and capabilities for debugging their apps quickly and easily. Whether you’re developing for Android or iOS, Flipper is a must-have tool that can help you streamline your development process and deliver high-quality apps to your users.

Prerequisites for using flipper on Android

Before using Flipper on Android, there are a few prerequisites that you should be aware of. Here are the main things you need to know:

1. You should have knowledge of android development using the Gradle build system.
2. Should be familiar with the react-native app development.
3. You need a running android emulator or a real device connected via USB.
4. Basic debugging knowledge.
5. Flipper desktop application installed.
6. VS Code for react-native development

By following the below steps, you’ll be able to use Flipper to debug your Android apps quickly and easily, with real-time feedback and intuitive debugging capabilities. Flipper is a powerful tool that can help you streamline your development process and deliver high-quality apps to your users.

Let's jump into the integration process and make our development life easier by debugging react-native applications.

• Download the Flipper desktop version of the application using the below link.
  https://fbflipper.com/
• Start a new react-native project using the below command.
  ~ npx create-react-native-app <App Name>
  In my case: ~ npx create-react-native-app FlipperTest
• Open the newly created react-native project in the Visual Studio Code.

Run ~npm start to run the metro bundler to start as shown in the above image.

Also in the VS code terminal run the below command to allow the metro bundler to connect to the device or the emulator being run.

~ adb reverse tcp:8097 tcp:8097

• Navigate to the android project/folder created inside the react-native project and open it in the android studio.

Run the android app from the android studio.

• Now open the desktop version of the Flipper app and check if you can see your emulator/real device on it.

As you can see on the left panel the FlipperTest app is being shown on the desktop app.

Note: The Flipper app has several plugins available on the platform but by default, only Logs and Crash Reporter are enabled.

Good that you have come so far, with the above steps we have set up the basic integration of the Flipper with the react-native android app.

As a next step, we are going to integrate the RN perf monitor plugin on the Flipper app which is the most important and useful tool in debugging react-native apps in terms of performance. Without wasting further time let's jump into the integration steps of the RN perf monitor.

• This requires changes on react-native as well as on the android side.
• Go to the VS code and open the package.json file where the react-native dependencies are mentioned.
• We need to mention two dependencies. Within the dependencies block add “react-native-flipper”: “⁰.183.0”, and in the devDependencies block add “react-native-flipper-performance-plugin”: “.3.1”. Now run the ~npm install command for the dependencies to be added in the node modules.

"react-native-flipper": "^0.183.0"

"react-native-flipper-performance-plugin": "^0.3.1"

• Now move to the android studio and open the app level .gradle file. We need to add certain dependencies on the native android project as well to set up the perf monitor.

    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

• Check for the ReactNativeFlipper.java file under com.flippertest package.

If not present please add the below file in the debug folder of your app as shown in the below image.

• Now to enable the RN perf monitor we need to add plugin support on the native side. In order to do that open the ReactNativeFlipper file and add the below line.

import tech.bam.rnperformance.flipper.RNPerfMonitorPlugin;
.....
.....
.....
client.addPlugin(new RNPerfMonitorPlugin(reactInstanceManager));

package com.flippertest;

import android.content.Context;
import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.android.utils.FlipperUtils;
import com.facebook.flipper.core.FlipperClient;
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
import com.facebook.react.ReactInstanceEventListener;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;
import tech.bam.rnperformance.flipper.RNPerfMonitorPlugin;

/**
 * Class responsible of loading Flipper inside your React Native application. This is the debug
 * flavor of it. Here you can add your own plugins and customize the Flipper setup.
 */
public class ReactNativeFlipper {
  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
    if (FlipperUtils.shouldEnableFlipper(context)) {
      final FlipperClient client = AndroidFlipperClient.getInstance(context);

      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
      client.addPlugin(new RNPerfMonitorPlugin(reactInstanceManager));
      client.addPlugin(new DatabasesFlipperPlugin(context));
      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
      client.addPlugin(CrashReporterPlugin.getInstance());

      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
      NetworkingModule.setCustomClientBuilder(
          new NetworkingModule.CustomClientBuilder() {
            @Override
            public void apply(OkHttpClient.Builder builder) {
              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
            }
          });
      client.addPlugin(networkFlipperPlugin);
      client.start();

      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
      // Hence we run if after all native modules have been initialized
      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
      if (reactContext == null) {
        reactInstanceManager.addReactInstanceEventListener(
            new ReactInstanceEventListener() {
              @Override
              public void onReactContextInitialized(ReactContext reactContext) {
                reactInstanceManager.removeReactInstanceEventListener(this);
                reactContext.runOnNativeModulesQueueThread(
                    new Runnable() {
                      @Override
                      public void run() {
                        client.addPlugin(new FrescoFlipperPlugin());
                      }
                    });
              }
            });
      } else {
        client.addPlugin(new FrescoFlipperPlugin());
      }
    }
  }
}

• Now just run the android application and do a ~npm start on the react-native side.
• Install the RN perf monitor plugin on the desktop Flipper app and enable it. You should see it in the disabled plugin section once the plugin is installed.

• Enable the plugin and it will move the above section to the left panel.

Last point to check is the path for the android SDK on the Flipper app should be same as the one on the android studio.

That's it folks you have successfully enabled the Flipper and also the perf monitor plugin for the android app. Thanks for coming so far and taking the time to read.

Please put a comment or DM me if you find any issues while integrating.