Splash screen doesn't work

ionic-v1
1

I’m trying to show splash screen for my app in Ionic. I’ve read many articles and tutorials and still nothing… Will it work via browser or only on device? I tried both ways and still no splash screen. Help me guys, I don’t know what am I doing wrong. Here is my code:

[config.xml]

<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<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/icon@2x.png" width="114" height="114"/>
<icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
<icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
<icon src="resources/ios/icon/icon-40@3x.png" width="120" height="120"/>
<icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
<icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
<icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
<icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
<icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
<icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
<icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
<icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
<icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
<icon src="resources/ios/icon/icon-83.5@2x.png" width="167" height="167"/>
<icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
<icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
<icon src="resources/ios/icon/icon-small@3x.png" 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@~ipadpro.png" width="2732" height="2048"/>
<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@~ipadpro.png" width="2048" height="2732"/>
<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"/>

[app.js]
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
navigator.splashscreen.show();
});
})

2

make it like this: <preference name="SplashScreenDelay" value="5000"/>

and add this to your Platform.ready function

setTimeout(function() {
            //$cordovaSplashscreen.hide();
            navigator.splashscreen.hide();
 }, 100);

PS: Check your resource file if splashcreen(jpg/png/psd) is available… and also the splashscreen plugin…

3

No improvement. I have plugin and splash files (png). Looks like everything is okay but it doesn’t work…

4

is there anything in your console log???

5

Just this:
Uncaught TypeError: Cannot read property ‘hide’ of undefined

6

you should inject $cordovaSplashscreen in run function…

7

Like this?
.run(function($ionicPlatform, $cordovaSplashscreen)

Doesn’t work for me

8

what does the console.log says?

9

If I have navigator.splashscreen.show(); console shows app.js:16 Uncaught TypeError: Cannot read property 'show' of undefined(…)
If I have setTimeout(function() { navigator.splashscreen.hide(); }, 100);

console shows the same error but but hide();

If I don’t have.avigator.splashscreen.show() or hide() console log doesn’t show anything

10

are you trying to test it in browser or in a device?? and is it ios or android?

11

I look at console in browser but I tried to test on device (Android) and still no splash screen.

12

can you remove and reinstall the splashcreen plugin??? and test it again…

13

Splashscreen does only work on device. To prevent the error in browser you should wrap a plugin check around navigator.splashscreen.hide().

if (navigator && navigator.splashscreen) { (...)

Otherwise i would suggest the same as @anicacute09

Try ionic state restore to clear all plugin data and let ionic “rebuild” your app.

14

I reinstall splashscreen plugin and do ionic state restore. Tested on device and still no success…

15 
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="10000"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="FadeSplashScreenDuration" value="1000"/>

These are my config.xml settings. Try to set “AutoHideSplashScreen” to false.

I can remember having the same problem once. Back then (iirc) i had to remove plugin through ionic and install again.

ionic plugin add // ionic plugin remove

But from your posts i assume you did this. If this is not working, did you try to set up a blank starter project and check if this error is reproducible for you?

16

@dotzilla is right… if it still has an error please make another blank project and do as we say… maybe there is something with your plugin… how do you add your plugin??? maybe the plugin you use is deprecated already…

17

I’ve do something like ionic state restore and build android platform again and now I have splash screen and icon but… It’s cordova’s icon and splash screen. Don’t know why beacuse I have my files in resources folder. I tried do ionic resources again and still have cordova’s images :frowning:

18

place your resources images inside the reosources folder of your app and run again.