PhoneGap and iPhone 6 Plus splash screen issue

Question

Ok, so while updating my app for iOS 8 and the larger iPhones I noticed an issue that I can\'t figure out how to resolve.

In my PhoneGap app, I have added a new asse

Answer 1

So, because of the complexity of the way our projects are setup, I was not able to remove and add ios/android. I did attempt to create a fresh Cordova 3.6 project and install the new splashscreen plugin but this also did not work as expected.

I was able to solve the issue, although maybe not the best solution, this is what I did.

Inside of the iOS project's CordovaLib/CDVAvailability.h file I added two lines:

#define CDV_IsIPhone6Plus() ([[UIScreen mainScreen] bounds].size.height == 736 && [[UIScreen mainScreen] bounds].size.width == 414)

#define CDV_IsIPhone6() ([[UIScreen mainScreen] bounds].size.height == 667 && [[UIScreen mainScreen] bounds].size.width == 375)

Then inside my CDVSplashScreen.m I added changed:

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;
    }
}

To:

if (CDV_IsIPhone5()) {
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if(CDV_IsIPhone6Plus()){
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if(CDV_IsIPhone6()){
    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;
    }
}

Not sure why the 568h image works correctly, but I tried specifying the 736 and 667 images, but that did not work. Simple adding those two pieces of code, now the splash screen works correctly on iPhone 6+ and 6.

Unfortunately this fix is a per project solution as it involves editing a Cordova source file.

Answer 2

None of the answers solved the problem for me - the splash still did not work correctly in iPhone 6 & 6s (while it worked well for all other iPhones). Specifically - updating the plugin, naming the images, checking Bundle Resources - non helped. Removing and adding the platform is something I always try to avoid, because it means hours of work connecting all the bits again - I tried it and even this did not help. Hopefully this post will save you all this time :-)

The only solution that worked for me was stop using asset catalog and define the splash in the APP-Info.plist file. Here are the instructions:

1. From my experience with Cordova: always backup your entire project folder. A simple copy/paste as a backup can save a lot of trouble. So start with a simple backup
2. In Xcode go to the target screen of your app, scroll down to the "App Icons and Launch Images" section. For the "Launch Images Source" click the field and change it from the launch image to "Don't use asset catalog"
3. Go to your app-Info.plist and add the following (this is the raw text. You can also use a text editor to add it):

<key>UILaunchImages</key>
  <array>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{320, 480}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{320, 480}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-568h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{320, 568}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-568h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{320, 568}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-667h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{375, 667}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-667h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{375, 667}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-736h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{414, 736}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Landscape-736h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{414, 736}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Portrait</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{768, 1024}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Landscape</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{768, 1024}</string>
      </dict>
  </array>

4. Last step: make sure your iPhone images are named as the following names I used:

   Default-568h@2x~iphone.png
   Default@2x~iphone.png
   Default-667h@2x~iphone.png
   Default~iphone.png
   Default-736h@3x~iphone.png

Until Cordova fix it I hope this answer will save you a lot of time :-)

Answer 3

Make sure that you don't have something like below in your config.xml

<preference name="SplashScreen" value="screen"/>

Answer 4

I was experiencing the same issue, which I narrowed down to the splashscreen plugin (org.apache.cordova.splashscreen). Here are the steps needed for me to fix the issue on both iPhone 6 & iPhone 6+:

1. Update to the latest version of the splashscreen plugin (which has been patched on GitHub):
   • cordova plugin remove org.apache.cordova.splashscreen
   • cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
2. Recreate the entire iOS platform through cordova:
   • cordova platform remove ios
   • cordova platform add ios
   • cordova build ios
3. Ensure your iPhone 6 & iPhone 6+ splashscreen images are named Default-667h@2x~iphone.png and Default-736h@3x~iphone.png, respectively. Then, in Xcode, drag both image files into Resources/splash under your project target in the Project Navigator (pane on the left-hand side of the screen, by default).

It appears that the splashscreen plugin creates a fake splashscreen that should ideally perfectly match the real iOS splashscreen, and when you call splashscreen.hide(), you're actually hiding the fake splashscreen. Just, in the case of iPhone 6/6+, the fake splashscreen is wrong with the version of the plugin you currently get with cordova plugin add org.apache.cordova.splashscreen, and you see the image change size and move off the screen once the real splashscreen is hidden.

Answer 5

I just updated my splashscreen plugin version 0.3.3 to 0.3.4 and splashscreen started working correctly for iphone 6 and iphone 6+ .

Answer 6

there is another probability about this question.

sometimes it would not auto create png reference to project, so even you have png, the project doesn't know about it.

so, check your Build Phases > Copy Bundle Resources

make sure all png you have on this list, if you miss something there,

add them to 'Copy Bundle Resources in Build Phases', then run application again, you might see the difference.