React Native - Manual Android Setup - Flipper

import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link';

:::note The information within this page is meant for people manually adding Flipper to a React Native 0.62+ app. This should only be necessary if you have an existing app that cannot be upgraded with the React Native Upgrade tool. :::

Dependencies

Flipper is distributed via Maven Central: add the dependencies to your build.gradle file.

You should also explicitly depend on SoLoader` instead of relying on transitive dependency resolution, which is getting deprecated with Gradle 5.

groovy

repositories {
  mavenCentral()
}

dependencies {
  debugImplementation('com.facebook.flipper:flipper:0.35.0') {
    exclude group:'com.facebook.fbjni'
  }

  debugImplementation('com.facebook.flipper:flipper-network-plugin:0.35.0') {
    exclude group:'com.facebook.flipper'
  }
}

These exclusions are currently necessary to avoid some clashes with FBJNI shared libraries.

Application Setup

For maximum flexibility, it's recommended you move the Flipper initialization to a separate class that lives in a debug/ folder, so that Flipper code never gets referenced in a release build.

java

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.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.react.ReactInstanceManager;
import okhttp3.OkHttpClient;

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()));
    }
  }
}

Note that this only enables the Layout Inspector plugin. For details of more plugins, see the React Native template.

In your Application implementation, call the static method using reflection. This gives us a lot of flexibility, but can be quite noisy. Alternatively, recreate an empty ReactNativeFlipper class in a release/ folder, so you can call into the method directly.

java

public class MainApplication extends Application implements ReactApplication {
  // ...

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes
         Flipper, since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.example.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

Further Steps

To create your own plugins and integrate with Flipper using JavaScript, take a look at the <Link to={useBaseUrl("/docs/tutorial/react-native")}>Building a React Native Plugin</Link> tutorial!