Ionic 5, Capacitor 2.4 and Angular 9.1.6 splash screen issue

[marshall86]

Hi all,

I've a problem on my Ionic 5 app that use Angular and Capacitor, the problem is that once i launch the app it shows the splash screen than for a moment the screen get white and than again the splash screen and after it loads the main page.

I tried to change the capacitor confg json file with autohide: false and managing the the splash screen hide manually but it doesn't work.

Any advice? thanks

[jcesarmobile]

does it happen on iOS? Android? both? Capacitor versions?

[marshall86]

at the moment i'm testing on Android, capacitor 2.4.0. I saw that it does on Android API 30 because 28 and 29 seems to work in the simulator.

[jcesarmobile]

what do you mean by "I saw that it does on Android API 30 because 28 and 29 seems to work in the simulator."?

[marshall86]

The behaviour change between the latest android version and the previous versions

[jcesarmobile]

this doesn't answer my question

By API 30 you mean testing on a simulator with Android P? or changing the targetSdkVersion to 30?

[marshall86]

I use the simulators with Android version 8.1, 9.0 and 10.0+.
On Android 8.1, 9.0 it works correctly but on 10.0+ it shows a white screen.

Checking the logs i see:
capacitor app started
capacitor app resumed
after this i see the white screen
than my app logs

[jcesarmobile]

check #2652, some users reported white screens or flickers and was caused by that

[marshall86]

tried and it doesn't work for me .. i even tried to create a brand new ionic angular project with capacitor and i have the same problem, i see a white fade out animation before the main page.

Is there a way to hide the splash and show/hide it manually? thanks

[curiouscod3]

I am using both Android 8.X, 9.X and 10.X ..it has the same white screen issue after splash..

Can't hide and remove splash screen. can't fix the white screen issue as well. this should be resolved by the core team.

[AE1NS]

We have the same problem as described. There is a 'white flickering' when starting the app.
To reproduce:

• install any ionic starter app and add android with capacitor
• Set the launchShowDuration of the splashscreen to i.e. 3000
• when starting the app, the ionic logo flickers for a second (or change the splash to i.e. red color, you see the 'white page' flickering more)

There is no seemless transition from the inital splash when the app starts, to the loader that capacitor shows. Can you reproduce this behaviour @jcesarmobile?

[AE1NS]

One solution in my case: I set the backgroundColor property inside the capacitor.config.json:

{
    "android": {
        "backgroundColor": "#123456"
    },
    "plugins": {
        "SplashScreen": {
            ...
            "backgroundColor": "#123456"
        }
    }
}

This is ok for my case, because I have set

<item name="android:background">@null</item>

in my launch theme, because the splash screen would be stretched on i.e. a Pixel 4. So I set a color on the first startup, then with the snippet above I set the same color to prevent the flickering and then the ionic splash screen appears.

Nevertheless I would prefer a native launch with a proper sized splash screen image (no matter which physical device) and no flickering between first splash and ionic splash.

[curiouscod3]

This doesn't work unfortunately in my case.

[AE1NS]

I know, because this #960 seems to be your issue. you should hide the splashscreen manually and implement it inside an setTimeout or in events like ionViewDidEnter.

[AE1NS]

@dwieeb

ionic start ionic-flicker-reproduce blank

• Choose: Angular
• Choose: Include Capacitor

Update capacitor.config:
Add "backgroundColor": "red"
Replace "launchShowDuration": 0 with "launchShowDuration": 3000

ionic build
npx cap add android
npx cap open android

Result:
Samsung Galaxy S7 Edge

Google Pixel 4

Edit:
https://github.com/AE1NS/ionic-flicker-reproduce

[AE1NS]

Continued here: #3601

[curiouscod3]

I have the same issue.. after splash screen, it's stuck at white screen for a while. I tried all possible answers on github. Doesn't work with Ionic5.x, Capacitor2.x...can't remove splash screen also, this is weird and can make users annoying. Can't control.

[curiouscod3]

I am Thinking of moving from Ionic/Capacitor to ReactNative until the Ionic core team resolves this issue clearly. No answer.. No support.. Are they care about Enterprise business ?

[imhoffd]

If you have an enterprise contract with Ionic, please report issues through the proper channels.

No one will be able to help you without some reproduction steps. Please see our contributing guide for instructions. If it's something easily reproduced, please create a detailed issue. Otherwise, these discussions are for help from the community. Please also keep in mind our Code of Conduct and keep discussions constructive.

[AE1NS]

Well, I did list some reproduce steps in my previous post. One of the splashscreen issues is obviously occurring in the starter app. Maybe you can have a look in it. Nevertheless the described problem by @curiouscod3 seems to be this one #960

[imhoffd]

I followed your steps and didn't see any flickering. Could you create a repo? Please see our contributing guide for instructions.

[curiouscod3]

@dwieeb Hello? Honestly, I've spent so many hours for this and followed all steps and github hacks. Couldn't resolve the problems. couldn't hide splash screen and White Screen .
I just want to remove splash screen or remove the White Blank screen(not flickering) for seconds.

Could you check my Ionic/Capacitor app? I believe you'd see the White screen for a few sec whenever fresh starting.

https://bit.ly/37M5nNT
https://fullstackship.com/main/portfolio/detail/fsx-mobile

I will make a repo if you would need it after inspecting my app.
Thank you

[imhoffd]

Did you update to the latest Capacitor? There's a new version (2.4.2) which should address that issue.

[H4ad]

To resolve issues with SplashScreen, i put these settings in capacitor.config.json:

"plugins": {
  "SplashScreen": {
    "launchAutoHide": false,
    "splashFullScreen": false,
    "splashImmersive": false
  }
},

And, when the application is started, I call the following method to hide SplashScreen in app.component.ts:

import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

// after app initialize call:
await SplashScreen.hide();

And to solve the SplashScreen problem with its size on Android, I modify styles.xml by adding the following line:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
+        <item name="android:windowDisablePreview">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
+        <item name="android:windowDisablePreview">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>


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

[vikas-sawant-rwaltz]

Only used
"plugins": {
"SplashScreen": {
"launchAutoHide": false
}
},

And in app.component.ts

this.platform.ready().then(() => {
this.splashScreen.hide();
});

[aparajita]

I'll be releasing a new splash screen plugin in the next few weeks that should solve all of these problems and allows complete flexibility in what you want to use as a splash screen, including animation.

[danielehrhardt]

Do It ;)

[ahsan-alii]

Are you done or not yet ?

[sanjeed5]

@Ahhsan I think this is what @aparajita meant: https://github.com/aparajita/capacitor-splash-screen