error: cannot find symbol ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

[LayMui]

New Version

0.71.7

Old Version

0.67.5

Build Target(s)

android emulator

Output of react-native info

System:
OS: macOS 13.3.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 212.56 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.19.1 - /usr/local/opt/node@16/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.3 - /usr/local/opt/node@16/bin/npm
Watchman: 2023.04.17.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.12.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 28, 29, 30, 31, 32, 33
Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0, 34.0.0
System Images: android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8309675
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: ^0.71.7 => 0.71.7
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Issue and Reproduction Steps

yarn to install all dependencies
set environment variables as needed for android
export ANDROID_SDK_ROOT=/Library/Android/sdk
export ANDROID_HOME=/Library/Android/sdk
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.0.14.jdk/Contents/Home
export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/Contents/Home"
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$PATH

launch the android emulator

cd android
yarn android

build error:

BUILD FAILED in 1m 5s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/xxxx/android/app/src/main/java/com/usermanagement/testapp/MainApplication.java:61: error: cannot find symbol
ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
^
symbol: variable ReactNativeFlipper
location: class MainApplication
1 error

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.

• What went wrong:
  Execution failed for task ':app:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

• Try:

Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.

• What went wrong:
  java.lang.StackOverflowError (no error message)

• Try:

Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.
==============================================================================

• Get more help at https://help.gradle.org

BUILD FAILED in 1m 5s

at makeError (/xxxx/node_modules/execa/index.js:174:9)
at /xxxxx/node_modules/execa/index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (/xxxx/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:82:7)
at async Command.handleAction (/xxxx/node_modules/@react-native-community/cli/build/index.js:108:9)

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[cortinico]

Do you have the ReactNativeFlipper.java files? You should have 2 of them? Can you show what's their path (run find . | grep ReactNativeFlipper) and what's their content?

[LayMui]

okay I got this issue resolved after
I added the another ReactNativeFlipper.java with similar content in the debug path
/android/app/src/debug/java/com/xxx/ReactNativeFlipper.java
/android/app/src/release/java/com/xxx/ReactNativeFlipper.java

[jasonkahkeat]

find . | grep ReactNativeFlipper

I am facing similar issue when trying to deploy a staging build with fastlane to Firebase App Distribution. Below is the result of find . | grep ReactNativeFlipper

./node_modules/react-native/template/android/app/src/release/java/com/helloworld/ReactNativeFlipper.java ./node_modules/react-native/template/android/app/src/debug/java/com/helloworld/ReactNativeFlipper.java ./android/app/src/release/java/com/{appName}/ReactNativeFlipper.java ./android/app/src/debug/java/com/{appName}/ReactNativeFlipper.java

Below is the content of debug/java/com/{appName}/ReactNativeFlipper.java. I'm not sure if this has to do with renaming the identifier of the app, as I did rename the app from com.appname to something like com.app.name. But I've also ensured that all the old ID have been renamed to the new one.

/**
 * Copyright (c) Meta Platforms, Inc. and 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.app.name;

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.ReactInstanceEventListener;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;

/**
 * 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.
 */
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 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 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());
      }
    }
  }
}

[cortinico]

trying to deploy a staging build with fastlane to Firebase App Distribution

Is it because you now have a staging build type as well? If so you then need a staging/java/com/{appName}/ReactNativeFlipper.java file as well

[jasonkahkeat]

I've tried duplicating the file from release into a newly created staging folder, but the same error appears. Do I need to change the configuration on build.gradle as well? (Sorry I'm not too familiar with the native part)

buildTypes in build.gradle

    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        releaseStaging {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            matchingFallbacks = ['release']
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

[cortinico]

into a newly created staging folder

The folder needs to be inside releaseStaging/java/com/{appName}/ReactNativeFlipper.java as your buildTypes definition

[jasonkahkeat]

into a newly created staging folder

The folder needs to be inside releaseStaging/java/com/{appName}/ReactNativeFlipper.java as your buildTypes definition

Oh thank you so much! It works now and I think I've got a better understanding.