I have a problem with the apache cordova (with ionic 3), this issue only happens on iphone X.
When the app starts, it displays the default ionic splash screen (like this, but scaled):
And after some milliseconds this "default splash screen" gets replaced by the correct one (the splash that I designed for the app).
These are my splash images:
<splash src="resources/ios/splash/Default#2x~iphone.png" />
<splash src="resources/ios/splash/Default#2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default-568h#2x~iphone.png" />
<splash src="resources/ios/splash/Default-667h.png" />
<splash src="resources/ios/splash/Default-736h.png" />
<splash src="resources/ios/splash/Default-Landscape#2x~ipad.png" />
<splash src="resources/ios/splash/Default-Landscape#~ipadpro.png" />
<splash src="resources/ios/splash/Default-Landscape-736h.png" />
<splash src="resources/ios/splash/Default-Landscape~ipad.png" />
<splash src="resources/ios/splash/Default-Portrait#2x~ipad.png" />
<splash src="resources/ios/splash/Default-Portrait#~ipadpro.png" />
<splash src="resources/ios/splash/Default-Portrait~ipad.png" />
<splash src="resources/ios/splash/Default~iphone.png" />
I also tried changing the Launch Screen File (Also checking the default CDVLaunchScreen) and I don't find any reference to this default ionic splash screen, how can I find where is this "image" or whatever, or find a solution?
Thanks
There have been several reported issues relating to the Cordova splashscreen and iPhone X, however none of them exhibit the symptom you're describing.
The first thing to check is that you've definitely replaced all the default splashscreen images in resources/ios/splash/ with your own custom ones.
Secondly check you are using the most recent versions of the cordova-ios platform and cordova-plugin-splashscreen since recent releases have incorporated fixes for some of these iPhone X-specific issues.
Finally, another option is to switch to using LaunchStoryboard images for your splashscreens.
This is the newer way to do iOS splashscreens and easier to maintain than the legacy Launch Images, since you need less images - it's even possible to have a single launch screen image.
I have not the exact solution but i tried with this solution and its working fine.
First open Xcode and set splash screen of iphoneX 1125 × 2436 px image into (project name)->Resources->images.xassests folder then select LaunchImages see below image.
I resolved the issue by upgrading Cordova Splashscreen plugin.
cordova plugin rm cordova-plugin-splashscreen --save
cordova plugin add cordova-plugin-splashscreen#latest
cordova prepare
Thanks to #Jaydeep Kataria, I digged a bit deeper and found a solution (!!!)
In my case, app was missing a splash screen for iPhoneX portrait, so:
Open XCode and go to Resources/Images.xcassets
Select missing image and take a look at the right side bar
From the right side bar get the image File Name (e.g. Default-2436h.png) and an image size (e.g. 2436 x 1125)
Make an image of a proper size, make its file name exactly as it displayed in the right side bar of XCode and put to folder src-cordova/res/screen/ios
Add the link to the image into your config.xml file:
<splash height="2436" src="res/screen/ios/Default-2436h.png" width="1125" />
Build the project and open it in XCode
That's it !!!
Related
Does Cordova support single-size icons for iOS and if so, how to add it to config.xml?
I removed all the different icon sizes and just left
<icon height="1024" src="src/resources/images/Icons/ios/Icon-App-1024x1024.png" width="1024" />
But either way, I only get the default Cordova icon to display.
If I set it to single size in Xcode it works as expected.
Deployment is through Azure Pipeline, so I can´t set it manually for release.
I'm using Cordova 6.5.0 with platform ios 4.3.1. I have installed the SplashScreen plugin and am using Legacy Launch Images
I have prepared splash screen images of the below sizes, added them in config.xml and placed them in project_folder/res/screen/ios
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
After building the app, I can see in Xcode that all the above images are reflected in the LaunchImage asset catalog under unassigned category.
When I run the app on iPhone 5 (iOS 10), I get a launch screen followed by a white screen (with loading indicator) for 1 second, followed by the app's main screen. Also in the Xcode console, I can see the below warning
WARNING: The splashscreen image named Default-568h was not found
Whereas I expect it to display the splash screen for 10 seconds (SplashScreenDelay)
Follow the syntax in Legacy Launch Image. There is no <splash src="res/screen/ios/Default-568h.png" width="640" height="1136"/> in the config.xml
I am using PhoneGap for creating iOS application for iOS9+. As per guide line I have added following code in Config.xml to set the splash screen.
// set the cordova plugin
<plugin name="cordova-plugin-splashscreen" source="npm" spec=">1.0.0" />
// set splash screen for iPad only
<platform name="ios">
<gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<gap:splash gap:platform="ios" height="1536" src="res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
</platform>
Then I used following command in 'Terminal' to generate iOS platform
phonegap build ios --device
It copies all the splash images in iOS platform.
But it show default Phonegap splash screens image when I launch the app. I checked in iOS project 'Images.xcassets'-> 'LaunchImage, it is showing default PhoneGap images. It is not showing splash Image which I mentioned in Config.xml file. How do I set the splash images using config.xml for iOS?
First add the Splash screen plugin
cordova plugin add cordova-plugin-splashscreen
Then in config.xml add these lines.
<!-- iOS splash screen -->
<!-- iPad -->
<splash src="www/res/screen/ios/Default-Portrait.png" platform="ios" width="768" height="1024" />
<splash src="www/res/screen/ios/Default-Landscape.png" platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<splash src="www/res/screen/ios/Default-Portrait#2x.png" platform="ios" width="1536" height="2048" />
<splash src="www/res/screen/ios/Default-Landscape#2x.png" platform="ios" width="2048" height="1536" />
<!-- Default splash screen -->
<splash src="splash.png" />
Make sure of the image width and height should be same as it is defined in config.xml.
or try default splashscreen.
Just keep full size splash screen image where your config.xml is located it will copy the splash.png file for all platform it is not recommended this will increase the app size but you can check if that works.
Cheers.
You need to change/replace the image files in splash screen directory (www/res/screen/ios/).
By default it contains images of phone gap
I can't seem to get my splash screen to show instead of the default. I have these lines in my config.xml:
<gap:splash src="splash.png" />
<gap:splash src="splash/screen1.png" gap:platform="ios" width="320" height="480" />
I have splash.png in both the upper root and the root of www (not sure which is the right one). I'm using the regular iPhone simulator (not 4 or 5) and I've also tried building/hydrating and sending to my 3gs and it still uses the default. I also tried replacing the default splash screen files in the Resources/splash/ folder but that doesn't work either.
Edit: Also tried putting in every type of width/height specified for iphones, still no go.
I forgot Phonegap can be a buggy POS sometimes. I had to delete the app from my device then re-add it (not hydrating) and the splash screen shows now. Still not working on the simulator, though.
I'm trying to configure a splashscreen for a landscape mode ipad app using phonegap build. I used the specification mentioned in phonegap documentation (https://build.phonegap.com/docs/config-xml), however it doesn't seem to work. It seems to be a problem with the splashcreen tag, because the icons work just fine.
I'm running an iPad with iOS 5.1. Has anyone had a similar problem ?
Any help would be much appreciated.
Here is my config.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.myapp"
version = "1.0.0">
<name>myapplication</name>
<description>myapplication</description>
<author href="https://www.myapp.org" email="my#app.org">myapp</author>
<preference name="orientation" value="landscape" />
<gap:splash src="gfx/ios/splashscreen_landscape.png" width="1024" height="748"/>
<gap:splash src="gfx/ios/splashscreen_portrait.png" width="768" height="1004"/>
<icon src="gfx/ios/icon57x57.png" width="57" height="57"/>
<icon src="gfx/ios/icon72x72.png" width="72" height="72"/>
<icon src="gfx/ios/icon114x114.png" width="114" height="114"/>
</widget>
Turns out that height is 768 instead of 748 (no status bar), so i ended up with this tag in my config.xml:
<gap:splash src="gfx/ios/splashscreen_tablet.png" width="1024" height="768"/>
And the splashscreen_tablet.png, must also be rotated by 90 degrees. It should be a 768x1024 png. It works the same way offline webapps do.