Skip to content

Commit

Permalink
Move Flipper integration to a separate Gradle module inside `ReactAnd…
Browse files Browse the repository at this point in the history
…roid` (facebook#37688)

Summary:
Pull Request resolved: facebook#37688

This moves the `ReactNativeFlipper` classes used to configure Flipper on Android from the template to
a separate Gradle artifact that will be published under the coordinates:
```
com.facebook.react:flipper-integration:0.73.x
```

This reduces the footprint of Flipper on the app template and makes easier for user on 0.73 to migrate
to Kotlin (as they will now have to migrate only 2 files rather than 4).

Changelog:
[Android] [Changed] - Move Flipper integration to a separate Gradle module inside `ReactAndroid`

Reviewed By: huntie

Differential Revision: D46441588

fbshipit-source-id: e197f29b7386b52091b8d38ed09bbd8f74a997df
  • Loading branch information
cortinico authored and yayvery committed Jan 11, 2024
1 parent 7768980 commit 6e92ee9
Show file tree
Hide file tree
Showing 14 changed files with 146 additions and 96 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ project.xcworkspace
/packages/react-native/ReactAndroid/gradlew.bat
/packages/react-native/ReactAndroid/external-artifacts/build/
/packages/react-native/ReactAndroid/external-artifacts/artifacts/
/packages/react-native/ReactAndroid/flipper-integration/build/
/packages/react-native/ReactAndroid/hermes-engine/build/
/packages/react-native/ReactAndroid/hermes-engine/.cxx/
/packages/react-native/template/android/app/build/
Expand Down
2 changes: 2 additions & 0 deletions ReactAndroid/flipper-integration/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Make sure we never publish the build folders to npm.
build/
61 changes: 61 additions & 0 deletions ReactAndroid/flipper-integration/build.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

plugins {
id("com.android.library")
id("maven-publish")
id("signing")
id("org.jetbrains.kotlin.android")
}

group = "com.facebook.react"
version = parent.publishing_version

repositories {
// Normally RNGP will set repositories for all modules,
// but when consumed from source, we need to re-declare
// those repositories as there is no app module there.
mavenCentral()
google()
}

android {
compileSdk 33
buildToolsVersion = "33.0.0"
namespace "com.facebook.react.flipper"

defaultConfig {
minSdk = 21
}

compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}

kotlin {
jvmToolchain(11)
}

dependencies {
implementation project(':packages:react-native:ReactAndroid')
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.squareup.okhttp3', module:'okhttp'
}
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
}

publishing {
multipleVariants {
withSourcesJar()
allVariants()
}
}
}

apply from: "../publish.gradle"
2 changes: 2 additions & 0 deletions ReactAndroid/flipper-integration/gradle.properties
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Version of flipper SDK to use for this integration
FLIPPER_VERSION=0.182.0
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

package com.facebook.react.flipper

import android.content.Context
import com.facebook.flipper.android.AndroidFlipperClient
import com.facebook.flipper.android.utils.FlipperUtils
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.ReactInstanceEventListener
import com.facebook.react.ReactInstanceManager
import com.facebook.react.bridge.ReactContext
import com.facebook.react.modules.network.NetworkingModule

/**
* Class responsible of loading Flipper inside your React Native application. This is the debug
* flavor of it. Here you can add your own plugins and customize the Flipper setup.
*/
object ReactNativeFlipper {
@JvmStatic
fun initializeFlipper(context: Context, reactInstanceManager: ReactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
val client = 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()

// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
// Hence we run if after all native modules have been initialized
val currentReactContext = reactInstanceManager.currentReactContext
if (currentReactContext == null) {
reactInstanceManager.addReactInstanceEventListener(
object : ReactInstanceEventListener {
override fun onReactContextInitialized(context: ReactContext) {
reactInstanceManager.removeReactInstanceEventListener(this)
context.runOnNativeModulesQueueThread { client.addPlugin(FrescoFlipperPlugin()) }
}
})
} else {
client.addPlugin(FrescoFlipperPlugin())
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@
* LICENSE file in the root directory of this source tree.
*/

package com.facebook.react.uiapp;
package com.facebook.react.flipper

import android.content.Context;
import com.facebook.react.ReactInstanceManager;
import android.content.Context
import com.facebook.react.ReactInstanceManager

/**
* Class responsible of loading Flipper inside your React Native application. This is the release
* flavor of it so it's empty as we don't want to load Flipper.
*/
public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
object ReactNativeFlipper {
@Suppress("UNUSED_PARAMETER")
@JvmStatic
fun initializeFlipper(context: Context, reactInstanceManager: ReactInstanceManager) {
// Do nothing as we don't want to initialize Flipper on Release.
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ internal object DependencyUtils {
/**
* This method takes care of configuring the resolution strategy for both the app and all the 3rd
* party libraries which are auto-linked. Specifically it takes care of:
* - Forcing the react-android/hermes-android version to the one specified in the package.json
* - Forcing the react-android/hermes-android/flipper-integration version to the one specified in
* the package.json
* - Substituting `react-native` with `react-android` and `hermes-engine` with `hermes-android`.
*/
fun configureDependencies(
Expand Down Expand Up @@ -83,6 +84,7 @@ internal object DependencyUtils {
configuration.resolutionStrategy.force(
"${groupString}:react-android:${versionString}",
"${groupString}:hermes-android:${versionString}",
"${groupString}:flipper-integration:${versionString}",
)
}
}
Expand Down
5 changes: 1 addition & 4 deletions packages/rn-tester/android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -156,14 +156,11 @@ android {
dependencies {
// Build React Native from source
implementation project(':packages:react-native:ReactAndroid')
implementation project(':packages:react-native:ReactAndroid:flipper-integration')

// Consume Hermes as built from source only for the Hermes variant.
hermesImplementation(project(":packages:react-native:ReactAndroid:hermes-engine"))

debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}")
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")

jscImplementation jscFlavor

androidTestImplementation 'junit:junit:4.12'
Expand Down
3 changes: 0 additions & 3 deletions packages/rn-tester/android/app/gradle.properties
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ org.gradle.parallel=true
android.useAndroidX=true
android.enableJetifier=true

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.182.0

# RN-Tester is building with NewArch always enabled
newArchEnabled=true
# RN-Tester is running with Hermes enabled and filtering variants with enableHermesOnlyInVariants
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.react.flipper.ReactNativeFlipper;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;
import com.facebook.react.shell.MainReactPackage;
Expand Down
5 changes: 5 additions & 0 deletions settings.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,10 @@ include(":packages:react-native:ReactAndroid:hermes-engine")
project(":packages:react-native:ReactAndroid:hermes-engine").projectDir =
file("ReactAndroid/hermes-engine/")

include(":packages:react-native:ReactAndroid:flipper-integration")

project(":packages:react-native:ReactAndroid:flipper-integration").projectDir =
file("ReactAndroid/flipper-integration/")

// Include this so the build can recognize plugins {id("com.facebook.react")}
includeBuild("packages/react-native-gradle-plugin/")
7 changes: 1 addition & 6 deletions template/android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,8 @@ android {
dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation("com.facebook.react:react-android")
implementation("com.facebook.react:flipper-integration")

debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.squareup.okhttp3', module:'okhttp'
}

debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
if (hermesEnabled.toBoolean()) {
implementation("com.facebook.react:hermes-android")
} else {
Expand Down
3 changes: 0 additions & 3 deletions template/android/gradle.properties
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,6 @@ android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.182.0

# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
Expand Down

0 comments on commit 6e92ee9

Please sign in to comment.