---
id: react-native-android
title: React Native - Manual Android Setup
sidebar_label: Manual Android Setup
---
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](https://reactnative.dev/docs/upgrading).
:::

## Dependencies

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

You should also explicitly depend on [SoLoader`](https://github.com/facebook/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](https://github.com/facebook/react-native/blob/6f627f684bb6506a677c9632b2710e4a541690a9/template/android/app/src/debug/java/com/helloworld/ReactNativeFlipper.java).

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")}>Buildiing a React Natuive Plugin</Link> tutorial!