Migrate website to Docusaurus 2

Summary: Docusaurus 2 is quite a lot more powerful than docu 1 it turns out. This should convert the website fully. * [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 * [done] Convert landing page html * [done] Convert all images to img tags * [done] Convert all .md files to .mdx * [done] Make sure ui-doc generation and including still works * [done] Scan every page visually for sanity check * [done] Make sure footer still works * [done] Make sure search still works * [done] Change all links/ to links/index * [done] Change all links.md to links * [done] Add some custom css to make the navbar look like the old one and darken the footer. Reviewed By: passy Differential Revision: D21158717 fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
2020-04-27 04:01:24 -07:00
parent 297ca61c49
commit 5f1a0548f5
101 changed files with 5110 additions and 2159 deletions
--- a/docs/getting-started/react-native-android.mdx
+++ b/docs/getting-started/react-native-android.mdx
@@ -0,0 +1,117 @@
+---
+id: react-native-android
+title: Manually set up your React Native Android App
+sidebar_label: React Native for Android
+---
+
+These instructions are aimed at 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 JCenter. 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 {
+  jcenter()
+}
+
+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, we recommend 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. Check out [the React Native template](https://github.com/facebook/react-native/blob/6f627f684bb6506a677c9632b2710e4a541690a9/template/android/app/src/debug/java/com/helloworld/ReactNativeFlipper.java) for more plugins.
+
+In your `Application` implementation, we then 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, check out our [writing plugins for React Native](tutorial/react-native) tutorial!