React native fatal error and app crashing after installing firebase and maps

Question

I'm creating a simple app that will use react-native-firebase and react-native-maps. I had the maps up and running with no issues following the documentation for installation. Following I have installed Firebase and have also followed the tutorial. I ran into several errors on the way, but cleaning up gradle build etc eventually got me the "build successful" message. However the app keeps on crashing on start. The logcat from Android Studio points out this error:

 FATAL EXCEPTION: create_react_context
Process: com.demoapp, PID: 13267
java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/internal/zzbfm;
    at com.airbnb.android.react.maps.MapsPackage.createViewManagers(MapsPackage.java:39)
    at com.facebook.react.ReactInstanceManager.getOrCreateViewManagers(ReactInstanceManager.java:770)
    at com.facebook.react.CoreModulesPackage.createUIManager(CoreModulesPackage.java:170)
    at com.facebook.react.CoreModulesPackage.access$200(CoreModulesPackage.java:53)
    at com.facebook.react.CoreModulesPackage$7.get(CoreModulesPackage.java:128)
    at com.facebook.react.CoreModulesPackage$7.get(CoreModulesPackage.java:125)
    at com.facebook.react.LazyReactPackage$2$1.next(LazyReactPackage.java:102)
    at com.facebook.react.LazyReactPackage$2$1.next(LazyReactPackage.java:89)
    at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:44)
    at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1212)
    at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1182)
    at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1120)
    at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:123)
    at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:943)
    at java.lang.Thread.run(Thread.java:764)
 Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.gms.internal.zzbfm" on path: DexPathList[[zip file "/system/framework/org.apache.http.legacy.boot.jar", zip file "/data/app/com.demoapp-0Fn4BfYJM0KChb969SjTxA==/base.apk"],nativeLibraryDirectories=[/data/app/com.demoapp-0Fn4BfYJM0KChb969SjTxA==/lib/x86, /data/app/com.demoapp-0Fn4BfYJM0KChb969SjTxA==/base.apk!/lib/x86, /system/lib]]
    at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:134)

And here is my build.gradle

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 27
        supportLibVersion = "28.0.0"
        googlePlayServicesVersion = "11.8.0"
        androidMapsUtilsVersion = "0.5+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
         classpath 'com.google.gms:google-services:4.0.1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}



task wrapper(type: Wrapper) {
    gradleVersion = '4.7'
    distributionUrl = distributionUrl.replace("bin", "all")
}

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

In case it's necessary here is also my package-json file with all the versions of libraries I am using:

{
  "name": "DemoApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.4",
    "react-native-firebase": "^5.2.2",
    "react-native-gesture-handler": "^1.0.15",
    "react-native-maps": "^0.23.0",
    "react-navigation": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Any help would be appreciated! Is it a wrong google play services version? What could be causing this issue?

Edit: Full error log of after adding multidex. The device is connected and you can see it after running adb devices from the cmd.

    Building and installing the app on the device (cd android && gradlew.bat installDebug)...

> Configure project :
Warning: Please apply google-services plugin at the bottom of the build file.

> Configure project :react-native-firebase
react-native-firebase: using React Native prebuilt binary from C:\workspace\copleybros\DemoApp\node_modules\react-native\android

> Task :app:compileDebugJavaWithJavac
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:4: error: cannot find symbol
import android.app.MultiDexApplication;
                  ^
  symbol:   class MultiDexApplication
  location: package android.app
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:17: error: cannot find symbo
public class MainApplication extends MultiDexApplication implements ReactApplication {
                                     ^
  symbol: class MultiDexApplication
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:19: error: incompatible types: MainApplication cannot be converted to Application
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
                                                                       ^
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:19: error: cannot find symbol  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
                                                   ^
  symbol: constructor (MainApplication)
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:46: error: method does not override or implement a method from a supertype
  @Override
  ^
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:48: error: cannot find symbol    super.onCreate();
    ^
  symbol:   variable super
  location: class MainApplication
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:49: error: no suitable method found for init(MainApplication,boolean)
    SoLoader.init(this, /* native exopackage */ false);
            ^
    method SoLoader.init(Context,int) is not applicable
      (argument mismatch; MainApplication cannot be converted to Context)
    method SoLoader.init(Context,boolean) is not applicable
      (argument mismatch; MainApplication cannot be converted to Context)
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
7 errors


    > Task :app:compileDebugJavaWithJavac FAILED

FAILURE: Build 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.

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

Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/4.10.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 9s
48 actionable tasks: 1 executed, 47 up-to-date
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

Command failed: gradlew.bat installDebug

Error: Command failed: gradlew.bat installDebug
    at checkExecSyncError (child_process.js:601:13)
    at Object.execFileSync (child_process.js:621:13)
    at runOnAllDevices (C:\workspace\copleybros\DemoApp\node_modules\react-native\local-cli\runAndroid\runAndroid.js:299:19)
    at buildAndRun (C:\workspace\copleybros\DemoApp\node_modules\react-native\local-cli\runAndroid\runAndroid.js:135:12)    at isPackagerRunning.then.result (C:\workspace\copleybros\DemoApp\node_modules\react-native\local-cli\runAndroid\runAndroid.js:65:12)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Answer 1

Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.gms.internal.zzbfm" on path: DexPathList[[zip file "/system/framework/org.apache.http.legacy.boot.jar", zip file "/data/app/com.demoapp-0Fn4BfYJM0KChb969SjTxA==/base.apk"],nativeLibraryDirectories=[/data/app/com.demoapp-0Fn4BfYJM0KChb969SjTxA==/lib/x86, /data/app/com.demoapp-0Fn4BfYJM0KChb969SjTxA==/base.apk!/lib/x86, /system/lib]]
    at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:134)

This line suggests that it could be a Dex issue. You should enable multidex support for your app.

In your dependencies in your app/build.gradle you must add:

dependencies {
  implementation 'com.android.support:multidex:1.0.3'
}

In your app/build.gradle you need to set the following in your defaultConfig

android {
    defaultConfig {
        ...
        multiDexEnabled true
    }
    ...
}

And finally you will need to extend MultiDexApplication in your MainApplication.java like this:

public class MainApplication extends MultiDexApplication implements ReactApplication {

To read more about multidex you can check the documentation here .

Update

Looking at your updated error message it seems like you are importing MultiDexApplication wrongly in your MainApplication.java

> Task :app:compileDebugJavaWithJavac
C:\workspace\copleybros\DemoApp\android\app\src\main\java\com\demoapp\MainApplication.java:4: error: cannot find symbol
import android.app.MultiDexApplication;
                  ^
  symbol:   class MultiDexApplication
  location: package android.app

Currently you have it as

import android.app.MultiDexApplication;

But it should be

import android.support.multidex.MultiDexApplication;

Answer 2

Most of the developer in React Native and Flutter are facing issue due to Android X . You may go through this https://developer.android.com/jetpack/androidx/migrate

or you may go with library and build tool version related to 27 not 28.

Answer 3

So in the end this is what solved the problem: downgrading those to 15.0.0

  implementation "com.google.android.gms:play-services-base:15.0.0"
  implementation "com.google.firebase:firebase-core:15.0.0"

and using

 googlePlayServicesVersion = "15.0.1"

also, at the very bottom of build.gradle

 com.google.gms.googleservices.GoogleServicesPlugin.config.disableVersionCheck = true

Only all of this combined with Andrew's and Sanjeev's answers got me there. Thanks to both of you for your input!