Remove the white splash screen on Cordova

You hate it ? Me too.

Yesterday I made a demo of the application that I realized for the company where I work (GovernorHub) to a friend and I was showing him that there wasn’t differences anymore with native apps but, unfortunately, I found a naughty bug.

If you look carefully to the start of your app, you will notice an ugly white splash screen just after the default Cordova image. Of course, it’s noticeable only if you don’t have a white background on your app.

I try understand the problem and here’s my explanation (nothing is 100% proven but it’s based on my read of different posts, threads, etc.) :

• Your personalized splash screen is displayed
• After the loading of the core of your app, the webview is loaded
• But there is a delay between the display of that webview and the end of the splash screen
• So the default background app is displayed which is white (I need to check if we can change that on Xcode but my knowledges are still limited)

As I read, you have to add the splash screen Cordova plugin and disable AutoHideSplashScreen and hide manually the splash screen. Well, it just added a spinner in my case.

After checking my console, I saw that I got a warning message :

WARNING: The splashscreen image Default was not found

It‘s weird because I know the name of my splash screen images Default~portrait or Default~landscape. So I checked the iOS code of the cordova plugin and I found that :

 if (imageName) {
   imageName = [imageName stringByDeletingPathExtension];
 } else {
   imageName = @"Default";
 }
 if (CDV_IsIPhone5()) {
   imageName = [imageName stringByAppendingString:@"-568h"];
 } else if (CDV_IsIPad() && isOrientationLocked) {
   switch (orientation) {
     case UIInterfaceOrientationLandscapeLeft:
     case UIInterfaceOrientationLandscapeRight:
       imageName = [imageName stringByAppendingString:@"-Landscape"];
       break;
     case UIInterfaceOrientationPortrait:
     case UIInterfaceOrientationPortraitUpsideDown:
     default:
       imageName = [imageName stringByAppendingString:@"-Portrait"];
       break;
   }
 }

This damn isOrientationLocked verification was screwing everything. Honestly I don’t understand the point of verifying it, so I removed it, and then works perfectly. And even if my device has the orientation locked, it was working without displaying the wrong image.

So until the Cordova guys fix that correctly (the code as much as the documentation), add that plugin : https://github.com/yrezgui/cordova-plugin-splashscreen

It’s the original one with just that verification removed. Enjoy coding Cordova :)