Flipper: Question: How do i remove Flipper from React Native?

[fabriciosautner]

After the React Native update, Flipper is installed automatically and this creates many problems. As for example, slow all Builds, especially on iOS.

I also think that the build file on both Android and iOS should get bigger. In Pods File, for example, there are many Flipper entries.

I would like to find a way to remove the Flipper, as we will not need it.

[cekkaewnumchai]

cc. @mweststrate

[passy]

Basically search for "Flipper" in your project, and remove it. On Android there are a few dependencies declared and file added to your project, which is referenced from your Application class. If you get rid of that, that's it.

[mweststrate]

I just removed Flipper from a freshly generated project (from both Android and iOS), and for reference this is what the diff looks like (this can be useful if you want to add it later again as well):

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 28fd6d7..0c593da 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -194,18 +194,6 @@ dependencies {

     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
-      exclude group:'com.facebook.fbjni'
-    }
-
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.facebook.flipper'
-    }
-
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.facebook.flipper'
-    }
-
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")
diff --git a/android/app/src/debug/java/com/awesomeproject7/ReactNativeFlipper.java b/android/app/src/debug/java/com/awesomeproject7/ReactNativeFlipper.java
deleted file mode 100644
index 98c38f0..0000000
--- a/android/app/src/debug/java/com/awesomeproject7/ReactNativeFlipper.java
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
- * directory of this source tree.
- */
-package com.awesomeproject7;
-
-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.react.ReactFlipperPlugin;
-import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.network.NetworkingModule;
-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()));
-      client.addPlugin(new ReactFlipperPlugin());
-      client.addPlugin(new DatabasesFlipperPlugin(context));
-      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
-      client.addPlugin(CrashReporterPlugin.getInstance());
-
-      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
-      NetworkingModule.setCustomClientBuilder(
-          new NetworkingModule.CustomClientBuilder() {
-            @Override
-            public void apply(OkHttpClient.Builder builder) {
-              builder.addNetworkInterceptor(new 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
-      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-      if (reactContext == null) {
-        reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
-              @Override
-              public void onReactContextInitialized(ReactContext reactContext) {
-                reactInstanceManager.removeReactInstanceEventListener(this);
-                reactContext.runOnNativeModulesQueueThread(
-                    new Runnable() {
-                      @Override
-                      public void run() {
-                        client.addPlugin(new FrescoFlipperPlugin());
-                      }
-                    });
-              }
-            });
-      } else {
-        client.addPlugin(new FrescoFlipperPlugin());
-      }
-    }
-  }
-}
diff --git a/android/app/src/main/java/com/awesomeproject7/MainApplication.java b/android/app/src/main/java/com/awesomeproject7/MainApplication.java
index 7f770f7..373eba3 100644
--- a/android/app/src/main/java/com/awesomeproject7/MainApplication.java
+++ b/android/app/src/main/java/com/awesomeproject7/MainApplication.java
@@ -44,37 +44,5 @@ public class MainApplication extends Application implements ReactApplication {
   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.awesomeproject7.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();
-      }
-    }
   }
 }
diff --git a/android/gradle.properties b/android/gradle.properties
index 1bbc8cc..95b56fe 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -23,6 +23,3 @@
 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.33.1
diff --git a/ios/AwesomeProject7/AppDelegate.m b/ios/AwesomeProject7/AppDelegate.m
index 894a701..eaa4042 100644
--- a/ios/AwesomeProject7/AppDelegate.m
+++ b/ios/AwesomeProject7/AppDelegate.m
@@ -4,32 +4,10 @@
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>

-#if DEBUG
-#import <FlipperKit/FlipperClient.h>
-#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
-#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
-#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
-#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
-#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
-
-static void InitializeFlipper(UIApplication *application) {
-  FlipperClient *client = [FlipperClient sharedClient];
-  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
-  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
-  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
-  [client addPlugin:[FlipperKitReactPlugin new]];
-  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
-  [client start];
-}
-#endif
-
 @implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-#if DEBUG
-  InitializeFlipper(application);
-#endif

   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
diff --git a/ios/Podfile b/ios/Podfile
index e27177a..4b3efc1 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -1,49 +1,6 @@
 platform :ios, '9.0'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

-def add_flipper_pods!(versions = {})
-  versions['Flipper'] ||= '~> 0.33.1'
-  versions['DoubleConversion'] ||= '1.1.7'
-  versions['Flipper-Folly'] ||= '~> 2.1'
-  versions['Flipper-Glog'] ||= '0.3.6'
-  versions['Flipper-PeerTalk'] ||= '~> 0.0.4'
-  versions['Flipper-RSocket'] ||= '~> 1.0'
-
-  pod 'FlipperKit', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configuration => 'Debug'
-
-  # List all transitive dependencies for FlipperKit pods
-  # to avoid them being linked in Release builds
-  pod 'Flipper', versions['Flipper'], :configuration => 'Debug'
-  pod 'Flipper-DoubleConversion', versions['DoubleConversion'], :configuration => 'Debug'
-  pod 'Flipper-Folly', versions['Flipper-Folly'], :configuration => 'Debug'
-  pod 'Flipper-Glog', versions['Flipper-Glog'], :configuration => 'Debug'
-  pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configuration => 'Debug'
-  pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configuration => 'Debug'
-  pod 'FlipperKit/Core', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/CppBridge', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FBDefines', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configuration => 'Debug'
-end
-
-# Post Install processing for Flipper
-def flipper_post_install(installer)
-  installer.pods_project.targets.each do |target|
-    if target.name == 'YogaKit'
-      target.build_configurations.each do |config|
-        config.build_settings['SWIFT_VERSION'] = '4.1'
-      end
-    end
-  end
-end
-
 target 'AwesomeProject7' do
   # Pods for AwesomeProject7
   pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
@@ -84,14 +41,6 @@ target 'AwesomeProject7' do

   use_native_modules!

-  # Enables Flipper.
-  #
-  # Note that if you have use_frameworks! enabled, Flipper will not work and
-  # you should disable these next few lines.
-  add_flipper_pods!
-  post_install do |installer|
-    flipper_post_install(installer)
-  end
 end

 target 'AwesomeProject7-tvOS' do

[fabriciosautner]

Perfect! Solved my problem!

[liukefu2050]

I agree

Whether this problem can cause attention and set switch function

[thecodecafe]

I know this has been closed but consider making this an optional thing in react native, it usually took me 10 minutes to build in BuddyBuild but with Flipper pre-installed my builds take up to 27 minutes, that's 170% increase in build time. Just feedback for the react and flipper team.

[blexxed]

Also for you to not remove the flipper pods in node_modules you can comment or delete these lines in your Podfile

use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end

then pod install again

[douglasjunior]

How to just disable Flipper when building on a CI/CD like Microsoft AppCenter?

After upgrade from RN 0.61 to 0.63 the iOS build time increases 2x, and a think that Flipper is the reason.

I would like to use Flipper in development, but disable it during the Archive.

[mweststrate]

@douglasjunior as far as we know Apple doesn't provide any option to conditionally build any dep (even when not included). If you find something let us know.

[douglasjunior]

Thanks for answering.

I was able to disable by commenting the flipper on the Podfile.

It's possible to conditionally disable the Flipper dependency based on a environment variable, or something like that?

[anhnch]

@mweststrate this saves me a tremendous amount of building time. Flipper takes 4/5 of my building time, while I don't need it at all. I confirm that all I need is to comment them out and pod install again

[mweststrate]

Feel free hack a script together that comments out these lines in CI or something :) I completely agree that building Flipper feels quite dumb and is a waste of time. But as stated before, afaik there are no tools in apple's / cocoapods toolchain to make that declaratively conditional, regardless how much we'd like to. It's not that we want to waste this time, so if anyone has a smarter solution please let us know!

[lauriharpf]

I was able to disable by commenting the flipper on the Podfile.

It's possible to conditionally disable the Flipper dependency based on a environment variable, or something like that?

Ruby syntax works in the Podfile, so you should be able to do something like this to exclude Flipper from pod installs via an environment variable:

  if ENV['EXCLUDE_FLIPPER'] != "true"
    use_flipper!
    post_install do |installer|
      flipper_post_install(installer)
    end
  end

[lauriharpf]

But as stated before, afaik there are no tools in apple's / cocoapods toolchain to make that declaratively conditional, regardless how much we'd like to. It's not that we want to waste this time, so if anyone has a smarter solution please let us know!

Could the GCC_PREPROCESSOR_DEFINITIONS argument to xcodebuild be useful here? E.g. running

xcodebuild ... GCC_PREPROCESSOR_DEFINITIONS='$GCC_PREPROCESSOR_DEFINITIONS EXCLUDE_FLIPPER=1'

excludes Flipper from the build, if the #if DEBUG statements wrapping Flipper in AppDelegate.m are replaced with

#if defined (DEBUG) && ! defined (EXCLUDE_FLIPPER)

Together with using an ENV in the Podfile, this seems to allow a working (hacky) solution for excluding Flipper.

[douglasjunior]

Ruby syntax works in the Podfile, so you should be able to do something like this to exclude Flipper from pod installs via an environment variable:

  if ENV['EXCLUDE_FLIPPER'] != "true"
    use_flipper!
    post_install do |installer|
      flipper_post_install(installer)
    end
  end

It worked exactly as I expected, thanks!

The build time on the AppCenter dropped from 51 to 35 minutes! 🎉

[sbrighiu]

What I see in my build is at least 2 minutes or 3 extra for building Flipper and adjacent libraries when building on iOS ... this is not ok. Had to remove it.. sorry.

[soorajnraju]

Also for you to not remove the flipper pods in node_modules you can comment or delete these lines in your Podfile

use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end

then pod install again

It worked for me

[donatoaguirre24]

I was able to improve my build time by ~6 minutes by disabling Flipper on the CI environment. I achieved it using the following configuration:

Read an environment variable on the Podfile as @lauriharpf suggested and check if the Flipper headers are defined in the AppDelegate.m file as @brentvatne suggested.

Most CI services out there (CircleCI, AppCenter, etc) automatically set the CI environment variable.

Podfile

AppDelegate

[mweststrate]

Would moving the block to target Development work as well for skipping CI builds?

[donatoaguirre24]

Would moving the block to target Development work as well for skipping CI builds?

Yes, I think it would work too. I prefer my implementation to have Flipper always working locally (each of my targets points to a different backend env)

[douglasjunior]

@donatoaguirre24 Why did you add these checks to AppDelegate?

Here I didn't need to change anything, just #ifdef FB_SONARKIT_ENABLED was enough.

[donatoaguirre24]

@douglasjunior because I faced some issues with the Flipper header files, but maybe is not always needed

[mweststrate]

Documented disabling Flipper: https://fbflipper.com/docs/troubleshooting/#opting-out-from-flipper-ios.

Also locking the conversation know so that this remains the bottom comment :). Feel free to open new issues for follow up questions.