fix: Allow users to enable Flipper (#121)

Author: tido64

.rubocop.yml

@@ -1,17 +1,33 @@
 AllCops:
   Exclude:
     - "**/node_modules/**/*"
-  TargetRubyVersion: 2.3
+  TargetRubyVersion: 2.6
 
 Layout/LineLength:
   Max: 100
 
+Lint/UnusedMethodArgument:
+  AllowUnusedKeywordArguments: true
+
 Metrics/AbcSize:
   Enabled: false
 
 Metrics/MethodLength:
   Enabled: false
 
+Metrics/CyclomaticComplexity:
+  IgnoredMethods: [
+    make_project!,
+    use_react_native!,
+    use_test_app_internal!
+  ]
+
+Metrics/PerceivedComplexity:
+  IgnoredMethods: [
+    use_react_native!,
+    use_test_app_internal!
+  ]
+
 Naming/FileName:
   Exclude:
     - !ruby/regexp /-\d+\.\d+\.rb$/
@@ -34,3 +50,9 @@ Style/HashTransformKeys:
 
 Style/HashTransformValues:
   Enabled: true
+
+Style/TrailingCommaInArrayLiteral:
+  EnforcedStyleForMultiline: comma
+
+Style/TrailingCommaInHashLiteral:
+  EnforcedStyleForMultiline: comma

Gemfile.lock

@@ -1,24 +1,27 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ast (2.4.0)
-    jaro_winkler (1.5.4)
-    minitest (5.14.0)
+    ast (2.4.1)
+    minitest (5.14.1)
     parallel (1.19.1)
-    parser (2.7.0.5)
+    parser (2.7.1.3)
       ast (~> 2.4.0)
     rainbow (3.0.0)
+    regexp_parser (1.7.1)
     rexml (3.2.4)
-    rubocop (0.80.1)
-      jaro_winkler (~> 1.5.1)
+    rubocop (0.85.1)
       parallel (~> 1.10)
       parser (>= 2.7.0.1)
       rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.7)
       rexml
+      rubocop-ast (>= 0.0.3)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 1.7)
+      unicode-display_width (>= 1.4.0, < 2.0)
+    rubocop-ast (0.0.3)
+      parser (>= 2.7.0.1)
     ruby-progressbar (1.10.1)
-    unicode-display_width (1.6.1)
+    unicode-display_width (1.7.0)
 
 PLATFORMS
   ruby

android/app/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlinVersion = "1.3.70"
+    ext.kotlinVersion = "1.3.72"
 
     def buildscriptDir = buildscript.sourceFile.getParent()
     apply from: "$buildscriptDir/../test-app-util.gradle"
@@ -34,12 +34,22 @@ def testAppDir = file("$projectDir/../../")
 apply from: file("${testAppDir}/test-app.gradle")
 applyTestAppModule(project, "com.sample")
 
-project.ext.react = [enableHermes: true]
+project.ext.react = [
+  enableFlipper: hasProperty('FLIPPER_VERSION'),
+  enableHermes: true,
+]
 
 android {
     compileSdkVersion 29
     buildToolsVersion "29.0.3"
 
+    // TODO: Remove this block when minSdkVersion >= 24. See
+    // https://stackoverflow.com/q/53402639 for details.
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
     defaultConfig {
         applicationId "com.sample"
         minSdkVersion 21
@@ -55,6 +65,12 @@ android {
         pickFirst "lib/x86_64/libc++_shared.so"
         pickFirst "lib/x86/libc++_shared.so"
     }
+
+    sourceSets {
+        if (project.ext.react.enableFlipper) {
+            debug.java.srcDirs += 'src/flipper/java'
+        }
+    }
 }
 
 def hermesEnginePath = findNodeModulesPath(projectDir, "hermes-engine") ?: findNodeModulesPath(projectDir, "hermesvm")
@@ -86,4 +102,16 @@ dependencies {
     testImplementation "junit:junit:4.13"
     androidTestImplementation "androidx.test.ext:junit:1.1.1"
     androidTestImplementation "androidx.test.espresso:espresso-core:3.2.0"
+
+    if (project.ext.react.enableFlipper) {
+        debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+            exclude group:'com.facebook.fbjni'
+        }
+        debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
+            exclude group:'com.facebook.flipper'
+        }
+        debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+            exclude group:'com.facebook.flipper'
+        }
+    }
 }

android/app/src/flipper/java/com/sample/react/ReactNativeFlipper.kt

@@ -0,0 +1,58 @@
+package com.sample.react
+
+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.ReactInstanceManager
+import com.facebook.react.ReactInstanceManager.ReactInstanceEventListener
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.modules.network.NetworkingModule
+
+@Suppress("unused")
+object ReactNativeFlipper {
+    @JvmStatic
+    fun initialize(context: Context?, reactInstanceManager: ReactInstanceManager) {
+        if (!FlipperUtils.shouldEnableFlipper(context)) {
+            return
+        }
+
+        val client: FlipperClient = AndroidFlipperClient.getInstance(context)
+        client.addPlugin(InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()))
+        client.addPlugin(DatabasesFlipperPlugin(context))
+        client.addPlugin(SharedPreferencesFlipperPlugin(context))
+        client.addPlugin(CrashReporterPlugin.getInstance())
+
+        val networkFlipperPlugin = NetworkFlipperPlugin()
+        NetworkingModule.setCustomClientBuilder { builder ->
+            builder.addNetworkInterceptor(FlipperOkhttpInterceptor(networkFlipperPlugin))
+        }
+        client.addPlugin(networkFlipperPlugin)
+
+        client.start()
+
+        // FrescoFlipperPlugin needs to ensure that ImagePipelineFactory is
+        // initialized and must therefore be run after all native modules have
+        // been initialized.
+        val reactContext = reactInstanceManager.currentReactContext
+        if (reactContext == null) {
+            reactInstanceManager.addReactInstanceEventListener(
+                object : ReactInstanceEventListener {
+                    override fun onReactContextInitialized(reactContext: ReactContext) {
+                        reactInstanceManager.removeReactInstanceEventListener(this)
+                        reactContext.runOnNativeModulesQueueThread { client.addPlugin(FrescoFlipperPlugin()) }
+                    }
+                })
+        } else {
+            client.addPlugin(FrescoFlipperPlugin())
+        }
+    }
+}

android/app/src/main/java/com/sample/react/TestAppReactNativeHost.kt

@@ -3,6 +3,7 @@ package com.sample.react
 import android.app.Activity
 import android.app.Application
 import android.content.Context
+import android.util.Log
 import com.facebook.react.PackageList
 import com.facebook.react.ReactInstanceManager
 import com.facebook.react.ReactNativeHost
@@ -83,6 +84,20 @@ class TestAppReactNativeHost @Inject constructor(
 
         SoLoader.init(application, false)
         reactInstanceManager.createReactContextInBackground()
+
+        if (BuildConfig.DEBUG) {
+            try {
+                Class.forName("com.sample.react.ReactNativeFlipper")
+                    .getMethod("initialize", Context::class.java, ReactInstanceManager::class.java)
+                    .invoke(null, application, reactInstanceManager)
+            } catch (e: ClassNotFoundException) {
+                Log.i(
+                    "ReactTestApp",
+                    "To use Flipper, define `FLIPPER_VERSION` in your `gradle.properties`. "
+                        + "If you're using React Native 0.62, you should use `FLIPPER_VERSION=0.33.1`."
+                )
+            }
+        }
     }
 
     override fun createReactInstanceManager(): ReactInstanceManager {
@@ -116,7 +131,7 @@ class TestAppReactNativeHost @Inject constructor(
         val latch = CountDownLatch(1)
         var packagerIsRunning = false
         DevServerHelper(
-            DevInternalSettings.withoutNativeDeltaClient(context) {},
+            DevInternalSettings(context) {},
             context.packageName,
             BundleStatusProvider { BundleStatus() }
         ).isPackagerRunning {

ios/ReactTestApp.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 51;
+	objectVersion = 52;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -277,7 +277,7 @@
 				};
 			};
 			buildConfigurationList = 19ECD0CD232ED425003D8557 /* Build configuration list for PBXProject "ReactTestApp" */;
-			compatibilityVersion = "Xcode 9.3";
+			compatibilityVersion = "Xcode 11.0";
 			developmentRegion = en;
 			hasScannedForEncodings = 0;
 			knownRegions = (

ios/ReactTestApp/ReactInstance.swift

@@ -71,6 +71,19 @@ final class ReactInstance: NSObject, RCTBridgeDelegate, RCTTurboModuleLookupDele
             object: nil
         )
     #endif
+
+    #if USE_FLIPPER
+        if let flipper = FlipperClient.shared() {
+            flipper.add(FlipperKitLayoutPlugin(
+                rootNode: application,
+                with: SKDescriptorMapper()
+            ))
+            flipper.add(FKUserDefaultsPlugin(suiteName: nil))
+            flipper.add(FlipperKitReactPlugin())
+            flipper.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
+            flipper.start()
+        }
+    #endif
     }
 
     init(forTestingPurposesOnly: Bool) {

ios/ReactTestApp/ReactTestApp-Bridging-Header.h

@@ -17,5 +17,14 @@
 #import <React/RCTVersion.h>
 #import <ReactTestApp-DevSupport/ReactTestApp-DevSupport.h>
 
+#if USE_FLIPPER
+#import <FlipperKit/FlipperClient.h>
+#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
+#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+#endif
+
 #import "React+Compatibility.h"
 #import "UIViewController+ReactTestApp.h"