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.

Answer 1

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.

Answer 2

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