React-native: Question: React Native upgrade 0.61.5: Flipper exception

[nicolashemonic]

Hello,

I upgraded React Native to 0.61.5, the iOS and Android parts compile successfully. The iOS app launch also successfully but not the Android app.

The Android app launch and stuck on splash screen with no error so I activated logs adb logcat and I found an error about Flipper:

System.err: java.lang.ClassNotFoundException: com.facebook.flipper.ReactNativeFlipper

After 2 day of try I have no idea how to resolve this issue. I have follow all migration procedure for React Native 0.6+ and all packages. This is where I am:

package.json

    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/pro-light-svg-icons": "^5.11.2",
        "@fortawesome/pro-solid-svg-icons": "^5.11.2",
        "@fortawesome/react-native-fontawesome": "^0.1.0",
        "@react-native-community/async-storage": "^1.6.3",
        "@react-native-community/netinfo": "^4.6.1",
        "@react-native-firebase/analytics": "^6.1.0",
        "@react-native-firebase/app": "^6.1.0",
        "bugsnag-react-native": "^2.23.2",
        "react": "16.9.0",
        "react-native": "0.61.5",
        "react-native-config": "^0.11.7",
        "react-native-dark-mode": "^0.2.1",
        "react-native-datepicker": "^1.7.2",
        "react-native-device-info": "^5.3.1",
        "react-native-gesture-handler": "^1.5.2",
        "react-native-iphone-x-helper": "^1.2.1",
        "react-native-keychain": "^4.0.1",
        "react-native-picker-select": "^6.3.3",
        "react-native-reanimated": "^1.4.0",
        "react-native-screens": "^2.0.0-alpha.17",
        "react-native-svg": "^9.13.3",
        "react-navigation": "^4.0.10",
        "react-navigation-drawer": "^2.3.3",
        "react-navigation-stack": "^1.10.3",
        "react-redux": "^7.1.1",
        "redux": "^4.0.1",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.3.0"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/preset-env": "^7.2.0",
        "@babel/runtime": "^7.6.2",
        "@types/enzyme": "^3.1.15",
        "@types/enzyme-adapter-react-16": "^1.0.3",
        "@types/jest": "^24.0.12",
        "@types/node": "^12.11.5",
        "@types/react": "^16.8.16",
        "@types/react-native": "^0.60.23",
        "@types/react-native-datepicker": "^1.7.0",
        "@types/react-native-vector-icons": "^6.4.4",
        "@types/react-navigation": "^3.4.0",
        "@types/react-redux": "^7.0.8",
        "@types/react-test-renderer": "^16.8.1",
        "@types/redux-logger": "^3.0.6",
        "@types/sinon": "^7.0.2",
        "babel-jest": "^24.8.0",
        "babel-plugin-transform-remove-console": "^6.9.4",
        "enzyme": "^3.7.0",
        "enzyme-adapter-react-16": "^1.7.0",
        "enzyme-to-json": "^3.3.5",
        "jest": "^24.8.0",
        "jest-fetch-mock": "^2.0.1",
        "metro-react-native-babel-preset": "^0.57.0",
        "pre-commit": "^1.2.2",
        "react-dom": "^16.6.3",
        "react-test-renderer": "^16.12.0",
        "sinon": "^7.2.2",
        "snapshot-diff": "^0.4.1",
        "ts-jest": "^24.0.2",
        "tslint": "^5.17.0",
        "typescript": "^3.7.3"
    },

android/app/build.gradle

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

configurations.all {
     resolutionStrategy {
       force "com.facebook.soloader:soloader:0.8.0"
     }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into "libs"
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

apply plugin: "com.google.gms.google-services"

MainActivity.java

package com.dedge.centralinventory;

import android.os.Bundle;
import com.facebook.react.ReactFragmentActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactFragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

MainApplication.java

package com.dedge.centralinventory;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;

import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            @SuppressWarnings("UnnecessaryLocalVariable")
            List<ReactPackage> packages = new PackageList(this).getPackages();
            // Packages that cannot be autolinked yet can be added manually here, for example:
            // packages.add();
            return packages;
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        initializeFlipper(this); // Remove this line if you don't want Flipper enabled
    }

    /**
     * Loads Flipper in React Native templates.
     *
     * @param context
     */
    private static void initializeFlipper(Context context) {
        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.facebook.flipper.ReactNativeFlipper");
                aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            } catch (NoSuchMethodException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            }
        }
    }
}

I tried to remove this line initializeFlipper(this); but it did not change anything.

If anyone of you tell me what could be the origin of the problem I will be grateful 🙏🏻

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.

[luiza-avelino]

I'm having the same issue. Did you find any solution?

[nicolashemonic]

Hello @luiza-avelino

I was two issues that stuck my app on splash screen.

• First issue was because of Flipper exception, I removed initializeFlipper(this); in MainApplication.java (don't worry it's an optional feature of RN).
• Second issue was because when I removed react-native-splash-screen from my app I miss to remove the override of onCreate() method in MainApplication.java on Android side that stuck my app on splash screen.

The advice I can give you is 1/ to remove the usage of Flipper initializeFlipper(this); 2/ to empty all the cache of React Native 3/ to verify well what you modified in your app (if the error appeared during the update of React Native as was the case for me).

Good luck!