292c710f9e
Summary: Restyle of the page, including changes to spelling, grammar, links, and structure (where relevant). Reviewed By: lblasa Differential Revision: D36249814 fbshipit-source-id: 94d809fe2d2cba8c18891128e13cb05196998d59
115 lines
4.2 KiB
Plaintext
115 lines
4.2 KiB
Plaintext
---
|
|
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 recommwended 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!
|