Ionic with Capacitor removing white screen after splash?

Question

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

Answer 1

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...

Answer 2

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);

Answer 3

You can change the color in capacitor.config with backgroundColor.

{
    "appId": "io.ionic.starter",
    "appName": "app",
    "webDir": "build",
    "bundledWebRuntime": false,
    "backgroundColor": "#ff0000" // <-- here
}

You don't need download the extra package "@capacitor/SplashScreen" lol.

Disclaimers: I'm speaking for Capacitor v3 and Ionic v5