Black screen on Android 12

Ionic Framework
1

That’s super weird on emulator our app works perfectly and I can build for Android 10 and it works on every Android 10 phone. But on Android 12 devices of our friends and in-store, I only have a black screen.

Any idea!?

Thank you for your time :slight_smile:

Ionic 4
Angilar 8
Cordova 10
Android SDK 31

2022-06-11_02-31~2
2022-06-11_02-31~2650×998 121 KB

20220611_173041
20220611_1730411920×3950 262 KB

2

maybe it’s a dumb question but: have you tried to run the app in debug mode and inspect it with chrome devices? Maybe the console shows errors.

3

Hi @fryser007, how are you? I’m facing the same issue. Did you find any solution? I dont have any idea about why this is happening :confused:

4

Same here (Android 10). There are no console errors and looking at the page in DevTools, the body element seems to be using the dark mode styles. So it looks like the app thinks it should be using dark mode, even though the phone is not set to use dark mode, nor are any of the dark mode emulation options set in DevTools.

No idea what’s causing it, but it wasn’t doing this before (and I’m not sure that I’ve upgraded anything that might be affecting this since I last debugged it).

5

If it is related to dark mode, this should do the trick to disable it - Installed app suddenly becomes dark - #6 by twestrick

From my understanding, Android WebView had a semi-recent update causing this.

6

Hi guys

Yes I found the solution.

First, you should know how to debug your device because chances are it will not be exactly the same error.

So to debug after you build/install a debug version of your app on an Android 12 Device

BEFORE opening your app use a terminal console software on your PC WITH A SEARCH FUNCTION
I use personally Tilix

  1. Enable USB debug on device
  2. Connect with USB
  3. On PC type: adb devices
  4. Get IN your device with adb shell
  5. Once inside the device: logcat *:E
  6. Then open quickly your app and let it crash with the black screen
  7. A wall of error will show up on the terminal. Use the search function and type the ID of your app like: com.my.app
  8. Then try to pinpoint YOUR errors

For ME, I had 3 problems:

  1. The screen was Black/White/Blank because Ionic Native Storage was out of date. Android Level 30+ uses a new storage system. For me, it was blocking my Authorization Token stored. So gave me a black screen. If you update your package it should work.

  2. My app was still crashing due to Multidex. Here’s the problem/solution: https://forum.ionicframework.com/t/java-lang-runtimeexception-unable-to-instantiate-application-android-hardware-bluetooth/224599

  3. And finally in the logcat if you see android.permission.BLABLABLA like

android.permission.BLUETOOTH_CONNECT
android.permission.BLUETOOTH_SCAN

It’s most likely you’ll need to add permissions in your config.xml
AND IMPORTANT FOR ANDROID API 30+
Android Permissions | Android Device and Ionic App Permissions
It will FORCE an android modal popup a permission modal to allow whatever native function you need. You MUST use this on API 30+

Good luck

7

Thanks @twestrick - for me, it turned out to be related to the WebView change. Following the trail through a number of issues led me to this issue.

TL;DR - the WebView update exposed an issue in Capacitor (to be fixed in v4), which needs a minor change in styles.xml to allow the user’s theme selection to be used correctly.

1 Like