iPhone 5 splashscreen not displaying correctly - Phonegap

Question

I'm updating my PhoneGap iOS-app to make it compatible with the iPhone 5.

I'm manually hiding the splash screen after my app has initialized.

When simulating iPhone 5: When the app starts it displays the correct splash screen ([email protected]) (hereon "the 5") but quickly hides it and instead displays the iPhone 4 splash screen (hereon "the 4"). The 4 doesn't cover the whole app, thus showing top and bottom bars of the app initializing.

I'm not entirely sure how it works but I can think of two possible scenarios: 1) Both images are displayed simultaneously but for some reason the 5 auto hides while the 4 waits for the call from the app to hide. 2) At some point when disabling manually hiding the splash screen phonegap switches out the "true" splashscreen for a "fake" one that is displayed until the javascript call from the app and phonegap just might not display correct one after this switcheroo.

Has anyone else encountered and / or solved this?

UPDATE: Tried removing and adding all splash images again but to no avail. I tried removing the smaller images (the 4 and its non-retina version) but even without the smaller ones present anywhere in the project I get the same error!

UPDATE 2: Cordova 2.2.0 has now been released, thus fixing this issue according to: http://shazronatadobe.wordpress.com/2012/10/27/whats-new-in-cordova-ios-2-2-0/

So, the recommended solution would therefore be to update your app to use Cordova 2.2.0, if that is for some reason not possible, solutions are provided below.

Solution 1

I've received two answers elsewhere but haven't had time to test them out yet: From user T123 in the Phonegap Google Group: open CDVViewController.m -- find - (void) showSplashScreen

change about line: 690

From :

else // not iPad

{

    orientedLaunchImageFile = launchImageFile;

}

To:

else // not iPad

{

    orientedLaunchImageFile = launchImageFile;

    /* Edited for 4-inch IP5 */

    if(screenBounds.size.height == 568)

        orientedLaunchImageFile = [NSString stringWithFormat:@"%@-568h", launchImageFile];

}

And from Brion who commented above, the following pull request, hoepfully to be incorporated into Cordova 2.2.0: https://github.com/apache/incubator-cordova-ios/pull/50

EDIT: Tried T123's solution and it's working for me! EDIT2: Brion's fix was incorporated in Cordova 2.2.0 which has now been released!

EDIT3: Just updating to highlight a comment for those who don't bother reading them:

For Phonegap version 1.4.1, I managed to get Hessius's fix to work like this: I copied the methods showSplashScreen, isIPad, resolveImageResource and the definition #define degreesToRadian(x) (M_PI * (x) / 180.0) from the file PGViewController.m to my MainViewController.m file. After that, XCode complained that I was assigning values to read-only attributes, so I edited the header file in PhoneGap.framework to make those two attributes readwrite. I also changed launchImageFilefrom Hessius's code to @"Default". This did the trick for me. – Joe Dyndale Oct 8 '12 at 15:23

Solution 2

The fix for this (https://issues.apache.org/jira/browse/CB-1482) is not out until 2.2. It is very risky to use the unstable version and I don't bother to compile from source code myself, so I tried the following hack:

In MainViewController.m

- (void) showSplashScreen   
{   
    CGRect screenBounds = [[UIScreen mainScreen] bounds];   
    // HACK: PhoneGap pre-2.2 does not support iphone5 splash image well, so we just skip it    
    if (screenBounds.size.height == 568) {  
        return; 
    }   
    [super showSplashScreen];   
}   

This will disable showSplashScreen for iPhone5 to avoid the shorter launch image added by PhoneGap (iOS initial launch image is showing up fine). It worked for me and I barely notice any difference by hacking off showSplashScreen for iPhone5.

Comments

[Rob Lauer]

How do you actually use this updated file in your PhoneGap project in xcode? It looks like it is an external file to the project itself. My experience adding this code and running it on the iPhone5 simulator didn't change anything.

[Hessius]

Are you using cordova 2.0 ? Cordova is added as a subproject "CordovaLib.xcodeproj" if you expand this project you see the folder "Classes", within this folder there's a subfolder "Cleaver", here you'll find the aforementioned CDVViewController.m - Make the changes here, save and presto!

[Rob Lauer]

I'm using 1.8.1 - so maybe I am out of luck?

[Hessius]

Yes, I think you might want to upgrade, for increased iOS 6 compatibility if nothing else

[Bohdi]

I am using 1.8.1 is there no way of doing a similar fix?

[Hessius]

The files are organized in a different manner, it might work, look for the file(s) mentioned above and see if it looks the same, if it does the fix should work. That being said: You should upgrade

[Joe Dyndale]

For Phonegap version 1.4.1, I managed to get Hessius's fix to work like this: I copied the methods showSplashScreen, isIPad, resolveImageResource and the definition #define degreesToRadian(x) (M_PI * (x) / 180.0) from the file PGViewController.m to my MainViewController.m file. After that, XCode complained that I was assigning values to read-only attributes, so I edited the header file in PhoneGap.framework to make those two attributes readwrite. I also changed launchImageFilefrom Hessius's code to @"Default". This did the trick for me.

[Tejas]

Thanks A LOT! :) Joe Dyndale, this solved my issue with cordova 1.7.0 .. :)

[Hessius]

@JoeDyndale Would it be ok to add your answer to the bottom of mine? Attributed to you of course. So that people who don't read the comments don't miss out.

[Joe Dyndale]

Sure, by all means... :)