Splash screen white


#1

Hi,

I am using Ionic3. I created a custom icon and splash screen for my app. I created a splash.png (2732x2732) in the resources folder.

I then run ionic cordova platform add android and automatically returned me:
ionic cordova resources android --force
:heavy_check_mark: Collecting resource configuration and source images - done!
:heavy_check_mark: Filtering out image resources that do not need regeneration - done!
:heavy_check_mark: Uploading source images to prepare for transformations - done!
:heavy_check_mark: Generating platform resources: 18 / 18 complete - done!
:heavy_check_mark: Modifying config.xml to add new image resources - done!

I can see the new images have been generated for my icon and splash:
resources/android/splash and resources/android/icon

my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>gamesearch</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="30000" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="1.1.19" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
    <engine name="android" spec="7.1.0" />
</widget>

I then run:

ionic cordova run android
to build the app on emulater, the icon appers normally, but the splash does not load, there is a white screen:

If anyone can help, I would appreciate it.


#2

Up, anyone can help-me?


#3

Instead of ionic cordova run android try running the normal run command

ionic cordova build android


#4

I tried this command too, the splash keeps appearing white


#5

Was there any errors in the command window?
Have a look at the console window and see what is reported there.


#6

No error was displayed:

ionic cordova build android
Running app-scripts build: --platform android --target cordova
[14:46:29]  build dev started ... 
[14:46:29]  clean started ... 
[14:46:29]  clean finished in 8 ms 
[14:46:29]  copy started ... 
[14:46:29]  deeplinks started ... 
[14:46:29]  deeplinks finished in 19 ms 
[14:46:29]  transpile started ... 
[14:46:33]  transpile finished in 3.33 s 
[14:46:33]  preprocess started ... 
[14:46:33]  preprocess finished in less than 1 ms 
[14:46:33]  webpack started ... 
[14:46:33]  copy finished in 3.47 s 
[14:46:39]  webpack finished in 6.09 s 
[14:46:39]  sass started ... 
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[14:46:40]  sass finished in 1.11 s 
[14:46:40]  postprocess started ... 
[14:46:40]  postprocess finished in 5 ms 
[14:46:40]  lint started ... 
[14:46:40]  build dev finished in 10.64 s 
> cordova build android
Android Studio project detected

[14:46:42]  lint finished in 2.38 s 
ANDROID_HOME=/home/dias/Android/Sdk
JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
studio
Subproject Path: CordovaLib
Subproject Path: app
Starting a Gradle Daemon (subsequent builds will be faster)

publishNonDefault is deprecated and has no effect anymore. All variants are now published.

The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

	at build_bptnp9bkk21dxkv3hjyjndwz.run(/home/dias/gamesearch/platforms/android/app/build.gradle:143)
:CordovaLib:preBuild
 UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE

:CordovaLib:compileDebugAidl

:CordovaLib:compileDebugRenderscript

:CordovaLib:checkDebugManifest UP-TO-DATE
:CordovaLib:generateDebugBuildConfig
 
UP-TO-DATE

:CordovaLib:prepareLintJar
 
UP-TO-DATE

:CordovaLib:generateDebugResValues
 
UP-TO-DATE

:CordovaLib:generateDebugResources

:CordovaLib:packageDebugResources

:CordovaLib:platformAttrExtractor
 
UP-TO-DATE
:CordovaLib:processDebugManifest
 
UP-TO-DATE
:CordovaLib:processDebugResources

:CordovaLib:generateDebugSources

:CordovaLib:javaPreCompileDebug
 UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac
 UP-TO-DATE
:CordovaLib:processDebugJavaRes
 NO-SOURCE
:CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug
 UP-TO-DATE
:app:preBuild
 UP-TO-DATE
:app:preDebugBuild
 
UP-TO-DATE
:app:compileDebugAidl

:CordovaLib:packageDebugRenderscript
 
NO-SOURCE

:app:compileDebugRenderscript

:app:checkDebugManifest
 
UP-TO-DATE

:app:generateDebugBuildConfig
 
UP-TO-DATE

:app:prepareLintJar
 
UP-TO-DATE

:app:generateDebugResValues
 
UP-TO-DATE

:app:generateDebugResources

:app:mergeDebugResources

:app:createDebugCompatibleScreenManifests
 UP-TO-DATE
:app:processDebugManifest
 
UP-TO-DATE
:app:splitsDiscoveryTaskDebug
 
UP-TO-DATE

:app:processDebugResources

:app:generateDebugSources
:app:javaPreCompileDebug
 UP-TO-DATE
:app:compileDebugJavaWithJavac
 
UP-TO-DATE
:app:compileDebugNdk
 NO-SOURCE
:app:compileDebugSources UP-TO-DATE
:CordovaLib:mergeDebugShaders
 
UP-TO-DATE

:CordovaLib:compileDebugShaders

:CordovaLib:generateDebugAssets
:CordovaLib:mergeDebugAssets
 UP-TO-DATE
:app:mergeDebugShaders 
UP-TO-DATE
:app:compileDebugShaders

:app:generateDebugAssets
:app:mergeDebugAssets
 
UP-TO-DATE

:app:transformClassesWithStackFramesFixerForDebug
 
UP-TO-DATE

:app:transformClassesWithDesugarForDebug
 
UP-TO-DATE

:app:transformClassesWithDexBuilderForDebug
 
UP-TO-DATE

:app:transformDexArchiveWithExternalLibsDexMergerForDebug
 
UP-TO-DATE

:app:transformDexArchiveWithDexMergerForDebug
 
UP-TO-DATE

:CordovaLib:compileDebugNdk
 
NO-SOURCE

:CordovaLib:mergeDebugJniLibFolders
 
UP-TO-DATE
:CordovaLib:transformNativeLibsWithMergeJniLibsForDebug
 
UP-TO-DATE
:CordovaLib:transformNativeLibsWithIntermediateJniLibsForDebug 
UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNativeLibsWithMergeJniLibsForDebug
 UP-TO-DATE
:app:processDebugJavaRes 
NO-SOURCE
:app:transformResourcesWithMergeJavaResForDebug
 
UP-TO-DATE
:app:validateSigningDebug

:app:packageDebug

:app:assembleDebug

:app:cdvBuildDebug


BUILD SUCCESSFUL
 in 32s

46 actionable tasks: 12 executed, 34 up-to-date


#7

What about in the console window?


#8

Using ionic -lab, the console window shows these errors:

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:66
util.js:66 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

In the emulator, device and the terminal does not appear any error.


#9

I am out of suggestions!


#10
  • Test on a real device
  • Connect this device with a cable to your laptop
  • Debug it with the chrome javascript console

from @joshmorony survival kit:


#11

I tried and the problem persists


#12

What was the stacktrace in the chrome dev javascript console?


#13

Did you try adding the splashscreen plugin ?
“cordova-plugin-splashscreen”


#14

Start with a new app - add the splash screen and make sure that works.


#15

totally miss that in his/her config.xml, you are right, cordova-plugin-splashscreen seems to be missing, well spotted


#16

yes, exactly! Thanks


#17

Make sure you have installed the plugin and the ionic-native lib:

    ionic cordova plugin add cordova-plugin-splashscreen

    npm install --save @ionic-native/splash-screen

Then, put this line in your config.xml:

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

Hope this helps.


#18

@ramon worked out
thank you all for the answers


#19

@diaslucas what worked out?

could you select the answer which worked out aka mark your question as solved? someone might face the same problem as you in the future, could help him/her


#20

how top add this plugin i have the same problem