bug: Android app stuck at Splash Screen when first running after installation

Bug Report

Capacitor Version

@capacitor/cli: 4.2.0
@capacitor/core: 4.2.0
@capacitor/android: 4.2.0
@capacitor/ios: 4.2.0

Platform(s)

Android

Current Behavior

After installing an app that created from Capacitor 4 on Android, when first opening it, it stuck at Splash Screen. It is needed to force stop it and run it again to solve the problem.

This is only happened when launchAutoHide: false is set in capacitor.config.ts.

Here is the demo: https://streamable.com/thpma9

Everything is OK when I stay at Capacitor 3.

Expected Behavior

The app never stuck at Splash Screen.

Code Reproduction

In capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'Example App',
  webDir: 'www',
  bundledWebRuntime: false,
  android: {
    initialFocus: false
  },
  plugins: {
    SplashScreen: {
      useDialog: false,
      androidScaleType: "CENTER_CROP",
      launchAutoHide: false,
      androidSplashResourceName: "splash",
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
    }
  },
  cordova: {
    preferences: {
      ScrollEnabled: 'false',
      BackupWebStorage: 'none',
      orientation: 'portrait'
    }
  },
  server: {
    iosScheme: "ionic"
  }
};

export default config;

In ionic-app/android/app/src/main/res/values/styles.xml, below is added

<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
    <item name="android:background">@drawable/splash</item>
</style>

Other Technical Details

npm --version output: 8.11.0

node --version output: v16.15.1

pod --version output (iOS issues only):

Additional Context

To fix this issue, I temporarily downgraded the project to Capacitor 3. In ionic-app/android/app/src/main/res/values/styles.xml, I changed back the code to

  <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">#00a5aa</item>
  </style>

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks! Ionitron 💙

@tomfong What device (and Android version) are you using? We have also received reports of this issue, but I cannot reproduce it with the devices I have. All our reports were using Android 10.

@hoi4 I've tested on Samsung (Android 12), Sony (Android 9) and Pixel (Android 11) with the app that used tab interface. All of them occurred this problem.

Recently I found a workaround, that is, if you disable "auto hide splash", you must do await SplashScreen.hide() in ionViewDidEnter() or ionViewWillEnter() on tabs.page.ts. I used to execute the hide method on the inner pages under tabs page, instead of tabs page itself.

@tomfong Do I understand you correctly, that you originally used launchAutoHide: false and did never call SplashScreen.hide() in your code?

@hoi4 Originally I set launchAutoHide: false and called SplashScreen.hide() on the inner page that's under tab.

Now I change to call SplashScreen.hide() on the tab page before the app is routed to inner page.

@tomfong Ok, if you also used ionViewDidEnter(), your SplashScreen.hide() was just not called which is why the splash screen was not removed. So I think we can close this issue as it does not relate to Capacitor :)

@hoi4 it seems you misunderstood my point... Where I used to call SplashScreen.hide() originally did not cause any problem when the app was still at capacitor 3.

At capacitor 4, the original logic also did not cause this problem if I force close the app and reopen it again. It only happened at the time I installed it and then open it first time.

I see, sorry! Could you check if ionViewDidEnter on the nested page is actually called? (your original solution which worked for Capacitor 3).

@hoi4 I've added console.log and confirmed that ionViewDidEnter on the nested page was called properly.

@tomfong I see, it would be great if you could provide a repo with minimal reproduction. I originally thought that I had a similar issue, but I think it's not the case.

@hoi4 I can't reproduce it now too. Don't know what's the trick. Anyway, thanks for your help.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.