Ionic splash screen not loading

Question

I have checked and double checked Stack Overflow for an answer on this and i really can't find one. I am building an app using the ionic framework and although i have never had this issue before, for some reason the splash screen will not work. I'm just getting a completely white screen followed by a delay before the initial view loads. Here are the steps i have taken so far.

I have generated the ionic resources by adding in the splash.png and icon.png images and using the 'ionic resources' command in the terminal (This works fine and generates the assets, icon does work)

Usually this would be enough for it to display the splash screen based on the default ionic framework set up, but no luck.

My config xml file looks like this

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>App name</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="[e-mail]" href="http://example.com.com/">
      Your Name Here
    </author>
  <allow-navigation href="http://*/*"/>
  <content src="index.html"/>
  <access origin="*"/>
  <access origin="tel:*" launch-external="yes"/>
  <access origin="mailto:*" launch-external="yes"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="ShowSplashScreen" value="true"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="true"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="FadeSplashScreen" value="false"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
  </feature>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <icon src="resources\ios\icon\icon.png" width="57" height="57"/>
    <icon src="resources\ios\icon\[e-mail]" width="114" height="114"/>
    <icon src="resources\ios\icon\icon-40.png" width="40" height="40"/>
    <icon src="resources\ios\icon\[e-mail]" width="80" height="80"/>
    <icon src="resources\ios\icon\icon-50.png" width="50" height="50"/>
    <icon src="resources\ios\icon\[e-mail]" width="100" height="100"/>
    <icon src="resources\ios\icon\icon-60.png" width="60" height="60"/>
    <icon src="resources\ios\icon\[e-mail]" width="120" height="120"/>
    <icon src="resources\ios\icon\[e-mail]" width="180" height="180"/>
    <icon src="resources\ios\icon\icon-72.png" width="72" height="72"/>
    <icon src="resources\ios\icon\[e-mail]" width="144" height="144"/>
    <icon src="resources\ios\icon\icon-76.png" width="76" height="76"/>
    <icon src="resources\ios\icon\[e-mail]" width="152" height="152"/>
    <icon src="resources\ios\icon\icon-small.png" width="29" height="29"/>
    <icon src="resources\ios\icon\[e-mail]" width="58" height="58"/>
    <icon src="resources\ios\icon\[e-mail]" width="87" height="87"/>
    <splash src="resources\ios\splash\Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources\ios\splash\Default-667h.png" width="750" height="1334"/>
    <splash src="resources\ios\splash\Default-736h.png" width="1242" height="2208"/>
    <splash src="resources\ios\splash\Default-Landscape-736h.png" width="2208" height="1242"/>
    <splash src="resources\ios\splash\Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="resources\ios\splash\Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="resources\ios\splash\Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources\ios\splash\Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources\ios\splash\Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
  </platform>
  <icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
</widget>

All of the paths to the images are correct i've double checked. Im not getting any errors during my build and none when i emulate. I just cannot get anything to show. The white screen does show for 3 seconds, so i'm pretty sure its an issue with the app finding the relevant splash images.

Answer 1

You need to change the <platform> section to have file names as screen.png as shown below. Your path for screen.png is incorrect Whenever you use any name for SplashScreen other than splash you need to update the config: https://cordova.apache.org/docs/en/3.1.0/cordova/splashscreen/splashscreen.html#android

<platform name="android">

  <splash src="platform-resources/android/res/drawable-ldpi/screen.png" density="ldpi" />

  <splash src="platform-resources/android/res/drawable-mdpi/screen.png" density="mdpi" />

  <splash src="platform-resources/android/res/drawable-hdpi/screen.png" density="hdpi" />

  <splash src="platform-resources/android/res/drawable-xhdpi/screen.png" density="xhdpi" />

  <splash src="platform-resources/android/res/drawable-xxhdpi/screen.png" density="xxhdpi" />
</platform>

Answer 2

1. go to: /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js
2. change cacheImages property to false
3. remove android platform
4. re-add android platform
5. regenerate resources

And in config.xml make sure the code is configured as follows:

<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
<preference name="SplashScreen" value="screen"/>