bug: splashFullScreen and splashImmersive values not respected.

[sebinbenjamin]

Bug Report

The splash screen does not hide the status bar or software navigation buttons even after setting both "splashFullScreen": true and "splashImmersive": true.

Capacitor Version

npx cap doctor output:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.0.0

  @capacitor/core: 2.0.0

  @capacitor/android: 2.0.0

  @capacitor/electron: 2.0.0

  @capacitor/ios: 2.0.0

Installed Dependencies:

  @capacitor/ios not installed

  @capacitor/electron not installed


  @capacitor/cli 2.0.0

  @capacitor/core 2.0.0

  @capacitor/android 2.0.0

[success] Android looking great! 👌

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

Expected Behavior

Both status bar and software navigation buttons should be hidden as per Capacitor docs for Splash Screen API.

Sample Application Repo

The issue recreated on Ionic (Angular) blank starter app - https://github.com/sebinbenjamin/capacitor-bug-report

Sample Code

capacitor.config.json

{
  "appId": "com.example.app",
  "appName": "exampleApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "linuxAndroidStudioPath": "/opt/google/android-studio/bin/studio.sh",
  "backgroundColor": "#ffffffff",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 5000
    }
  },
  "splashFullScreen": true,
  "splashImmersive": true
}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Plugins, StatusBarStyle } from '@capacitor/core';

const { StatusBar, SplashScreen } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      if (this.platform.is('hybrid')) {
        StatusBar.setBackgroundColor({ color: 'white' });
        StatusBar.setStyle({ style: StatusBarStyle.Light });
        SplashScreen.hide();
      }
    });
  }
}

Reproduction Steps

1. Create a blank starter project using Ionic CLI
2. Build the project using - ionic build --prod
3. Add capacitor for android - npx cap add android
4. Add the plugin for Splash Screen and set splashImmersive | splashFullScreen to true in capacitor.config.json.
5. Run npx cap sync and npx cap open android

Other Technical Details

npm --version output:
6.12.0
node --version output:
v12.13.0
pod --version output (iOS issues only):

Other Information

• The issue is the same on an emulator as well as a real device.
• The documentation at https://capacitor.ionicframework.com/docs/apis/splash-screen#full-screen-immersive needs more clarification. Is splashImmersive a superset of splashFullScreen? Is it required to use splashFullScreen if we already have splashImmersive as true,

[jcesarmobile]

Yeah, docs are wrong, you can’t use both of them.

Also, you are using them outside the plugin preferences.

[sebinbenjamin]

Oh ok. So you mean to say that I've got to move splashImmersive to SplashScreen.

{
  "appId": "com.example.app",
  "appName": "exampleApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "linuxAndroidStudioPath": "/opt/google/android-studio/bin/studio.sh",
  "backgroundColor": "#ffffffff",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 4000,
      "splashImmersive": true
    }
  }
}

So is the above correct? It's still not working.

[xzilja]

I created pr to handle case where both of these flags are set i.e. prioritise splashImmersive as it will also hide statusbar.

On my end it behaves correctly. I'd suggest making sure you:

1. Re-buld your project with new config
2. Sync & Clear your build
3. Re-install on simulator

[ramseyfeng]

@sebinbenjamin is this issue solved? I tried with the latest capacitor 3.0-rc, the full splash screen is still not working on the android platform.

[sebinbenjamin]

@sebinbenjamin is this issue solved? I tried with the latest capacitor 3.0-rc, the full splash screen is still not working on the android platform.

Uhh.. Sorry. I did not actually investigate. Got busy with uni.

[speedyhoopster3]

@ramseyfeng issue is not solved for me!

[ivanov84]

If you want to hide status bar on app launch then add this code to style.xml:

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:background">@drawable/splash</item>
</style>

Also you need to add in capacitor config:

"splashFullScreen": true

[ionitron-bot]

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.