[Solved] Splash screen blank

Ionic Framework ionic-v3
21

I like the fade effect so what I do is I reduce the duration of it and I delay it a little bit.

To do that add & tweak the following in your config.xml

  <preference name="SplashScreenDelay" value="5000"/>
  <preference name="FadeSplashScreenDuration" value="2000"/>
22

Hi

I follow your described steps Here and add a SplashScreen but after run this in emulator its show a loader over the SplashScreen . can you please help me to solve this .

image
1.png678×696 135 KB

23

Thanks! This worked for me.

24

Heeyy that worked perfectly… at least on android, in ios i have the same issue where the default splash screen shows instead of my custom splash image, any idea how to solve?

25

Did you try running ionic resources ?

26

Multiple times with no luck.

27

You can prevent the spinner from showing by using this option:
<preference name="ShowSplashScreenSpinner" value="false"/>

3 Likes
28

I read http://ionicframework.com/docs/v2/native/Splashscreen/ but not found any option

29

yes but your link is more like a tutorial, the actual documentation for the splashscreen plugin is at https://github.com/apache/cordova-plugin-splashscreen

30

ok got it

<preference name="ShowSplashScreenSpinner" value="false"/>

31

For anyone out there who drives themselves slightly insane with the erratic behaviour of a white screen between the splash and the first screen of the app, I found the following when testing on my Nexus 4 (Android 5.1.1):

Any updates made to the splash (in config.xml) does not show on the first:
ionic run android

In fact, it does not honour the settings detailed in config.xml

Instead, quit the app after first launch on the device, and re-run. This was the only way I could get the splash screen to start to behave as expected. It allowed me to have control over it using:

navigator.splashscreen.hide();

Once I have done this a few times, the app then seems to return to working as desired.

1 Like
32

Hi @shaoner thanks for this post its working for me

33

I face following behaviour on Android even after app relaunch:

  1. my splashscreen is displayed for desired SplashScreenDelay time
  2. then white screen is displayed for cca 3 seconds
  3. then my app is displayed

disregarding the SplashScreenDelay value, I always see the white screen for few seconds.

Not sure if this issue is somehow related to following warnings in JS console:

deviceready has not fired after 5 seconds.
cordova.js:1176 Channel not fired: onDOMContentLoaded
Native: deviceready did not fire within 2000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.
VM472:143 DEVICE READY FIRED AFTER 3518 ms

The JS messages are pretty confusing – at first it claims device ready has not fired after 5 seconds, and then it tells that device ready fired after 3.5 seconds.

Actually all my cordova plugins work properly.

Update 2016-05-25:
behaviour described above is when cordova-plugin-crosswalk-webview is installed. When I uninstall the crosswalk plugin, I experience following behaviour:

  1. my splashscreen is displayed for desired SplashScreenDelay time
  2. then black screen is displayed for cca 1 second
  3. then white screen is displayed for cca 2 seconds
  4. then splashscreen is displayed again and my app is not started even after long wait.
1 Like
34

Same behaviour for me, idk about those logs, haven’t looked at it.

35

I had the same issue aka the weird blank screen between the splash screen and the real first page of my app.

Followed the following solution described in that post and it solved the problem for me:

Add in config.xml:

<preference name="AutoHideSplashScreen" value="false" />

Then in app.ts, when app is ready:

import {Splashscreen} from 'ionic-native';

...

initializeApp() {
    this.platform.ready().then(() => {
        this.hideSplashScreen();
    });
}

hideSplashScreen() {
    if (Splashscreen) {
        setTimeout(() => {
            Splashscreen.hide();
        }, 100);
    }
}
2 Likes
36

For me, on Android device, it hasn’t solved it

37

In my case it worked on both iOS and Android (tested with real device)

If it could helps, here my config.xml regarding splash screen

<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="SplashScreen" value="screen"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="AutoHideSplashScreen" value="false" />
3 Likes
38

Follow these steps in sequence it updates or generates the new icon and splash. I had similar issue in ionic@2.0.0.bet.19

  1. cordova plugin remove cordova-plugin-splashscreen

  2. cordova plugin add cordova-plugin-splashscreen

  3. ionic resources

3 Likes
39

I love you, worked like a charm

1 Like
40

If you need to display the spashscreen every time do not forgot :

<preference name="SplashShowOnlyFirstTime" value="false"/>

2 Likes