Ionic with Capacitor removing white screen after splash?

5
votes

trying to solve the white screen problem after the splash screen then it loads, how do we remove it? i tried to set timeout but still not working.

with cordova i can set it up but i'm failing using capacitor

3
ionic-frameworkcapacitor
Where exactly do you fail? You should edit your question and explain it and probably show some code. This increases your chances of getting a helpfull answer. - marsh-wiggle
when the app loads it shows a splash screen then after it shows a white screen before loading the app fully. can you assist? - Nedlogs
As mentioned by @marsh-wiggle, add some code screenshots. Specifically your ngOnInit() method in app.component.ts.. there must be some blocking code which is resulting in the white screen. - Chetan Bansal

3 Answers

4
votes

Try this.

capacitor.config.json - on plugins

"plugins": {
            "SplashScreen": {
              "launchShowDuration": 5000,
              "launchAutoHide": true,
              "androidScaleType": "CENTER_CROP",
              "androidSplashResourceName": "splash",
              "splashFullScreen": false,
              "splashImmersive": false
            }
          },
          "android": {
            "allowMixedContent": true
          }

And then in android/app/src/main/res/values/styles.xml file:

Change the below:

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

To:

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <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:windowIsTranslucent">true</item>
   </style>

The launchShowDuration is probably what you're after. In case you do get an issue with the splash image width being stretched, the xml will solve that...

1
votes

Capacitor 3+ / Ionic 5+ / Angular 12+

This works for me:

capacitor.config.json

 "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "showSpinner": true
    }
  }

app.component.ts

 ngOnInit(): void {
    this.initializeApp();
  }

 private initializeApp(): void {
   
    // other code here

    setTimeout(() => {
      SplashScreen.hide();
    }, 2000);
  }
1
votes

I had the same problem.

capacitor for control needed to install the splashScreen plug-in.

This works for me:

npm i --save @capacitor/splash-screen

capacitor.config.json // .ts

"plugins": {
"SplashScreen": {
  "launchShowDuration": 10000,
  "launchAutoHide": false
}}

app.component.ts

import {SplashScreen} from '@capacitor/splash-screen';
setTimeout(() => {
    SplashScreen.hide();
  }, 2000);