React-native: Hermes enabled bundle causes white screen when installed from Google Play

[desmondmc]

Compiling a release with Hermes enabled causes a white screen after downloading from Google Play.

Literally everything else works fine, it only breaks after being uploaded to Google Play.

• Debug builds work.
• ./gradlew installRelease works.
• Even extracting the apks from the .aab using bundletool and installing them with adb on a device works.

I know that Hermes is running because global.HermesInternal != null, not to mention it's lightning fast 💨.

React Native version: 0.65.0
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
Memory: 22.53 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.8.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 23, 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.3
System Images: android-26 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5791312
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

1. Compile and package release build with Hermes enabled
2. Upload it to Google Play (Alpha or Beta)
3. Once the app is available download and install the version from Google Play
4. Launch the app -> White Screen

Describe what you expected to happen:

I expect bundles compiled with Hermes enabled to behave the same after being uploaded to Google Play.

Snack, code example, screenshot, or link to a repository:

• My build.gradle
• Device logs from adb logcat when launching the Play Store version of the app: hermes-prod-logs.txt

[anurag060]

Facing the same issue @desmondmc. Recently upgraded my project from 0.57.8 to 0.60.5. Also enabled def enableSeparateBuildPerCPUArchitecture = true and def enableProguardInReleaseBuilds = true. Can you please write here if you find a solution

[anurag060]

@desmondmc try uploading the apks instead of the app bundle. In my case, uploading the app bundle to the play store showed a white blank screen on start up. But, uploading all the apks generated(with def enableSeparateBuildPerCPUArchitecture = true) did the trick. Give it a try.

[herio]

Facing the same problem only when upload the bundleRelease to play store, assembleRelease is OK.
"react-native": "0.60.5",
"hermes-engine": "0.1.1",

[githubdoramon]

A (terrible) workaround is to first run assembleRelease (so the js bundle is generated), and then run bundleRelease.

I don't think this is related to Hermes though, since even when I disabled it I still have the same problem with bundling the app

[desmondmc]

Just tested with react-native 0.61.1. Still broken 😢

[panvourtsis]

same issue with @herio any test locally on debug or release is working. Only version returning the white screen is from the bundleRelease to play store

react-native: 0.60.4

[LydGol90]

I am getting the same issue, also only when I upload bundle to play store with Hermes enabled. assembleRelease works fine and all works fine with Hermes disabled. RN version 0.61.1

[longnk-1447]

.

[radko93]

Please upvote the first post, don't post +1 or same issue. You can subscribe to this issue on the right side.

[IamMasterWayne]

+1

[RichardLindhout]

[Alaa-Ben]

Hey guys !

For me, it turned out it was a problem of SoLoader, which was fixed in 0.8.0. React Native 0.61.1 doesn't use this version yet, so the solution was to set it up manually by adding the following to app/build.gradle:

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

I hope it works for you too :)

[radko93]

@Alaa-Ben cool. I will se if I can submit this as a PR.

[Alaa-Ben]

@radko93 Bumping SoLoader to 0.8.0 in the gradle properties should do the trick. Shoud I open a PR ?

[radko93]

@Alaa-Ben feel free, this should look like this https://github.com/facebook/react-native/commit/07d1075f372bb864ddc62b9c8f613b03becfa568

[RichardLindhout]

@Alaa-Ben Have you enabled hermes?

App crashes in the pre-launch rapport of the Google Play.

com.facebook.react.common.JavascriptException: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
This error is located at:
    in c
    in RCTView
    in Portal.Host
    in c
    in c
    in n
    in _
    in f
    in p
    in GestureHandlerRootView
    in y
    in v
    in RCTView
    in RCTView
    in h, js engine: hermes, stack:

[Alaa-Ben]

@RichardLindhout Yes, Hermes is enabled. I had 2 issues (only when downloading from GooglePlay) before forcing Soloader to 0.8.0. Either:

1. White screen / crashes after splash screen.
2. App works but launches as debug (warning toasts, shaking device would make the debug menu appear, ...) even though it's supposed to be a release build (built with bundleRelease).

[RichardLindhout]

I have this know, maybe this can not work.

configurations.all {
    resolutionStrategy { force "com.facebook.soloader:soloader:0.8.0" }
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support' && requested.name != 'multidex') {
            details.useVersion "${rootProject.ext.supportLibVersion}"
        }
    }
}

[radko93]

I can confirm that the solution from @Alaa-Ben worked for me when deploying to Google Play.

[desmondmc]

Can also confirm that @Alaa-Ben's solution worked for me. Nice work 👍

[paolospag]

Confirm, this change on app/build.gradle file works fine with Hermes enabled and Android App Bundle:

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

[RichardLindhout]

For me this did not work, we're using react-native-navigation. It works with .apk though so we switched back to that.

[radko93]

Hey guys !

For me, it turned out it was a problem of SoLoader, which was fixed in 0.8.0. React Native 0.61.1 doesn't use this version yet, so the solution was to set it up manually by adding the following to app/build.gradle:

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

I hope it works for you too :)

Unfortunately, https://github.com/facebook/react-native/pull/26759 breaks 0.61.x branch so an official fix will be included in 0.62 when it's released. This is a preferred workaround probably.

[gamingumar]

@Alaa-Ben solution worked for me in 0.61.2 but after upgrading to 0.61.3 I am getting error again in play store aab. (apk works fine)

couldn't find DSO to load: libhermes-executor-debug.so

[RichardLindhout]

I had that error at build time and cleaning my build fixed that error

[gamingumar]

@RichardLindhout I am getting this error in play store pre launch report. Installing from play store crashes app on launch. I have also tried ./gradlew clean
Can you tell me the commands that worked for you and if you are using 0.61.3?

[RichardLindhout]

I still use the APK build and I'm on 0.61.3.
Here are more people with the same problem: https://github.com/facebook/react-native/issues/26938

[RichardLindhout]

Maybe here is something valuable to find: https://github.com/facebook/react-native/issues/25537

[radko93]

@gamingumar I use the workaround I posted in this issue with 0.61.3 without any issues. I use CI to deploy the so the environment is always clean.

[TylerNRobertson]

@radko93 The provided workaround above did not solve the issue for us on RN 0.61.3. The app launch still hangs on a white screen when we upload an aab.

[RichardLindhout]

@TylerNRobertson Are you using react-native-navigation?

[TylerNRobertson]

@RichardLindhout Yes I am. Does that have another step thats needed? Or currently no workaround for using RNN?

[roots-ai]

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

where should this code be put?
inside
android { }

or

with apply plugin:

[jstheoriginal]

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

where should this code be put?

inside

android { }

or

with apply plugin:

It just goes at the file’s root; not inside anything. I put mine there yesterday to fix this issue and it resolved the crash the next release I did.

[roots-ai]

@jstheoriginal This didn't work for me

configurations.all {
    resolutionStrategy {
        force 'org.webkit:android-jsc:r241213'
        force "com.facebook.soloader:soloader:0.8.0"
    }
}

On RN 0.61.4

[jstheoriginal]

@jstheoriginal This didn't work for me

configurations.all {
    resolutionStrategy {
        force 'org.webkit:android-jsc:r241213'
        force "com.facebook.soloader:soloader:0.8.0"
    }
}

Odd. Are you sure you did a full clean before creating the new build?

[roots-ai]

@jstheoriginal Cleaning did resolve the issue of the app getting hanged.
But now the app is crashing with these logs (only with playstore)

  at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets (CatalystInstanceImpl.java)
  at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets (CatalystInstanceImpl.java)
  at com.facebook.react.bridge.JSBundleLoader$1.loadScript (JSBundleLoader.java)
  at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle (CatalystInstanceImpl.java)
  at com.facebook.react.ReactInstanceManager.createReactContext (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$000 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$100 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$200 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$902 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$1000 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$1102 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$1300 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager.access$1400 (ReactInstanceManager.java)
  at com.facebook.react.ReactInstanceManager$5.run (ReactInstanceManager.java)
  at java.lang.Thread.run (Thread.java:818)

[radko93]

@roots-ai

@jstheoriginal This didn't work for me

configurations.all {
    resolutionStrategy {
        force 'org.webkit:android-jsc:r241213'
        force "com.facebook.soloader:soloader:0.8.0"
    }
}

On RN 0.61.4

why do you set different JSC version when you use Hermes? You can either use JSC or Hermes.

[roots-ai]

@radko93

I had just disabled it for dev.

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

now trying with jsc removed.

[roots-ai]

Just for other's reference.

The previous issue was resolved. It was because of adding apply ./react.gradle to buid.gradle.

Removing it and adding the entire path in the react-native bundle resolved it.

[TylerNRobertson]

@roots-ai by removing the react.gradle apply at the top of the file, where do you add the path for the bundle? I can't seem to locate where it needs to be changed.

[roots-ai]

Just update the react.gradle in node_modules/react-native/.

and run react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Strange but it works.

[gamingumar]

I am getting this error in 0.61.4

E/SoLoader: couldn't find DSO to load: libjscexecutor.so

in android 6 nexus device. working fine in new devices like galaxy s9

[ScreamZ]

I almost died because of that… Thanks so much to the guys who gave great answer at this post @grabbou could you please save our life and take this in RN ?🙏🏻

[palerdot]

I can confirm @Alaa-Ben solution fixed the blank screen issue when deployed to google play

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

This is very very scary since the the production build with react-native run-android --variant=release works totally fine, but internally it builds an apk, while deploying to playstore it is in the form of aab which totally blanked out because of this issue. Many thanks again to @Alaa-Ben. Personally issue kind of reinforces how fragile is to use react native as I bump into these kind of weird things time and again.

[Alaa-Ben]

The play store offers a 'test store' for internal tests. I recommend using it from time to time, specially when upgrading React Native versions.

[rendomnet]

Is this fixed already or should we use force "com.facebook.soloader:soloader:0.8.0"?

[rendomnet]

@Alaa-Ben how can we test store?

[Alaa-Ben]

@rendomnet Go your app's page on the google play console and select 'App releases' on the left menu. There you'll have many tracks (production track, open track, closed track, etc.). What you want is the 'internal test track'. I believe one is created by default, if not add one. Add the aab you want to test to this track, then add your google email to the list of internal testers. Finally, if you log in on a phone to the play store using the email you added to the list of internal testers, you will be able to access your test version (and the others won't see it of course).

[amixel]

Hey guys !

For me, it turned out it was a problem of SoLoader, which was fixed in 0.8.0. React Native 0.61.1 doesn't use this version yet, so the solution was to set it up manually by adding the following to app/build.gradle:

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

I hope it works for you too :)

Thanks, solve it with me, I was trying to find out these errors, I was able to find out when disabled Hermes.
Then I searched and found this solution

[panda0603]

@Alaa-Ben Was trying to solve this issue for past 2 days until I met your comment. Thank you very much!! I have found one problem though. Indeed bundleRelease now works in google playstore when I enable SoLoader(0.8.0), it is debug mode(i.e. just react-native run-android) that doesn't work anymore. App crashes on start. So at the moment, I have to comment out

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

on android/app/build.gradle when I use debug mode to develop, and enable that part again for bundleReleases. Am I the only one with this issue??

[Alaa-Ben]

@panda0603 I didn't have this issue, do you have a stacktrace ?

[panda0603]

@Alaa-Ben react-native log-android doesn't produce anything on crash so I've checked adb logcat.
Here are some following text:

2-10 11:50:52.112 15540 15540 E SoLoader: couldn't find DSO to load: libjscexecutor.so
12-10 11:50:52.256  1973  1992 E BatteryExternalStatsWorker: no controller energy info supplied for wifi
12-10 11:50:52.328  1930  1950 E SurfaceFlinger: ro.sf.lcd_density must be defined as a build property
12-10 11:50:52.388 15540 15570 E eglCodecCommon: GoldfishAddressSpaceHostMemoryAllocator: ioctl_ping failed for device_type=5, ret=-1
12-10 11:50:52.952 15540 15585 E SoLoader: couldn't find DSO to load: libc++_shared.so caused by: dlopen failed: "/data/data/com.weather/lib-main/libc++_shared.so" has unexpected e_machine: 40 (EM_ARM)
12-10 11:50:52.954 15540 15585 E SoLoader: couldn't find DSO to load: libhermes.so caused by: APK was built for a different platform
12-10 11:50:52.955 15540 15585 E AndroidRuntime: FATAL EXCEPTION: create_react_context
12-10 11:50:52.955 15540 15585 E AndroidRuntime: Process: com.weather, 
12-10 11:50:52.955 15540 15585 E AndroidRuntime: java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so caused by: APK was built for a different platform
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:789)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:639)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:577)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:525)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.hermes.reactexecutor.HermesExecutor.<clinit>(HermesExecutor.java:20)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.hermes.reactexecutor.HermesExecutorFactory.create(HermesExecutorFactory.java:27)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:952)
12-10 11:50:52.955 15540 15585 E AndroidRuntime:        at java.lang.Thread.run(Thread.java:764)

Something to do with hermes? But works fine on production with Hermes so I think it is something else. Debug mode works fine when I comment out SoLoader 0.8.0

Very Similar case below, only that I have issue when I use SoLoader version 0.8.0
https://github.com/facebook/react-native/issues/25646

[douglasjunior]

Hey guys !

For me, it turned out it was a problem of SoLoader, which was fixed in 0.8.0. React Native 0.61.1 doesn't use this version yet, so the solution was to set it up manually by adding the following to app/build.gradle:

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

I hope it works for you too :)

This worked for me, thanks.

[mxmzb]

This issue should be more visible I think. Quite some time of trying and googling until I found it. The provided solution worked for me.

[Gark]

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

And remove shrinkResources true if exists for release buildType. This combination helps.

[ScreamZ]

@grabbou Can have a look on this? Everybody is commenting the same answer and this is a true bug :p

[kubilaykiymaci]

This bug has been fixed, you can see in 0.62 version.

SO_LOADER_VERSION: 0.8.0

https://github.com/facebook/react-native/blob/0.62-stable/ReactAndroid/gradle.properties

[Frekansapp]

i'am facing this issue RN 0.61.5

[kartikk]

Hey guys !

For me, it turned out it was a problem of SoLoader, which was fixed in 0.8.0. React Native 0.61.1 doesn't use this version yet, so the solution was to set it up manually by adding the following to app/build.gradle:

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

I hope it works for you too :)

In addition to forcing the soloader version, I had to exclude libjscexecutor.so in app/build.gradle to get the app working. This does not seem to break anything else.

packagingOptions {
    exclude '**/libjscexecutor.so'
}

[AlexandrDobrovolskiy]

@Alaa-Ben Was trying to solve this issue for past 2 days until I met your comment. Thank you very much!! I have found one problem though. Indeed bundleRelease now works in google playstore when I enable SoLoader(0.8.0), it is debug mode(i.e. just react-native run-android) that doesn't work anymore. App crashes on start. So at the moment, I have to comment out

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

on android/app/build.gradle when I use debug mode to develop, and enable that part again for bundleReleases. Am I the only one with this issue??

This solution works with real devices but breaks react-native run-android on emulators, the app's crashing after open with errors like this:

java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libyoga.so caused by: APK was built for a different platform

Fixed
According to master branch of react-native https://github.com/facebook/react-native/blob/master/ReactAndroid/gradle.properties you need to change SoLoader version to 0.8.2

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

[SuhairZain]

We've been getting crash reports on our production app after upgrade to RN 0.61.5. Happens only to a minority of users, and we're unable to reproduce it on any of our test devices. We've released versions with hermes both disabled and enabled and we got the error libhermes.so could not be found on all of these. Also tried forcing the SoLoader version at 0.8.0. Same issue. Is anyone else facing the same?

What we've tried so far:

1. Hermes disabled (where we started).
2. Hermes enabled.
3. Hermes disabled and SoLoader forced at 0.8.0.
4. Hermes enabled and SoLoader forced at 0.8.0.

When we tried running a fresh RN app on an emulator, the app crashed immediately. It doesn't seem to be the same issue, but could be related. https://github.com/facebook/react-native/issues/28308

[benjipott]

Seems to be only google play test devices that throw this error. No worries

[SuhairZain]

@benjipott Is there a way to know if the device is a google play test device?

[mtiziano]

still throwing this error

[wibb36]

Still the same issue with RN 0.62.1

[Lipo11]

I'm on the 0.62.2 version and this bug has been fixed!

[radko93]

I can also confirm that is fixed now without any workarounds.

[elmotan95]

0.62.2 still have this issue when run on bluestack with release variant.

[tuanth89]

@RichardLindhout Which crash report module are you using ? Can you give me name of this crash report ? Thanks

[RichardLindhout]

This was done by testing in Google Play store. I use RNN and we switched back to APK to work around this issue. Are you using React Native Navigation too?

[tuanth89]

This was done by testing in Google Play store. I use RNN and we switched back to APK to work around this issue. Are you using React Native Navigation too?

Thank for reply. i use React Navigaiton. I want to know when app crash and trace log from it, like your screenshoot.

[mym0404]

Now, React Native 0.63 is using SO_LOADER 0.8.2. Then can we bundle application as aab without any further configurations?

[radko93]

@mym0404 yes, it should work directly.

[mrousavy]

I'm on 0.63.2 and this issue is still not fixed for me! Cannot run the Android App in Debug or Release with Hermes enabled or disabled on my Emulator!

[desmondmc]

Closing this issue as the original bug as described has been fixed.

[SnowLew]

@Alaa-Ben Was trying to solve this issue for past 2 days until I met your comment. Thank you very much!! I have found one problem though. Indeed bundleRelease now works in google playstore when I enable SoLoader(0.8.0), it is debug mode(i.e. just react-native run-android) that doesn't work anymore. App crashes on start. So at the moment, I have to comment out

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

on android/app/build.gradle when I use debug mode to develop, and enable that part again for bundleReleases. Am I the only one with this issue??

This solution works with real devices but breaks react-native run-android on emulators, the app's crashing after open with errors like this:

java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libyoga.so caused by: APK was built for a different platform

Fixed
According to master branch of react-native https://github.com/facebook/react-native/blob/master/ReactAndroid/gradle.properties you need to change SoLoader version to 0.8.2

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

Using this, all work fine in React-Native 0.60.6.