Splash screen image showing twice after iPhone x update

[neenuann8]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x

I'm submitting a ... (check one with "x") [ ] bug report

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: When the app launches the launch image in splash screen is appearing twice in iPhone X.

Expected behavior: The image should appear only once and disappear after app launches.I have tried the checklist given here: https://blog.ionicframework.com/ios-11-checklist/

Steps to reproduce: We are using the following versions for platform and libraries: xcode: 9.2 cordova ios platform: 4.2.1 ionic: 3.19.0 package.json

{
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "@types/jquery": "^2.0.39",
    "@types/moment": "^2.13.0",
    "@types/urbanairship-cordova": "^3.4.27",
    "angular2-highcharts": "^0.4.1",
    "chart.js": "^2.5.0",
    "com-sarriaroman-photoviewer": "~1.1.10",
    "cordova-ios": "~4.5.4"
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.9.2",
    /*"ionic-img-viewer": "1.3.4",*/
    "ionic-native": "2.4.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "jquery": "^3.1.1",
    "jstz": "^1.0.8",
    "phonegap-plugin-push": "1.8.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "typescript": "^2.6.1",
    "zone.js": "0.8.18",
    "cordova-plugin-health": "~0.8.3",
    "cordova-plugin-camera": "~2.3.1",
    "cordova-plugin-inappbrowser": "~1.6.1",
    "cordova-plugin-contacts": "~2.2.1",
    "cordova-plugin-x-socialsharing": "~5.1.6",
    "urbanairship-cordova": "~6.0.1",
    "cordova-plugin-customurlscheme": "~4.2.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ]
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "phonegap-plugin-push": {
        ""
      },
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-health": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-contacts": {},
      "cordova-plugin-x-socialsharing": {},
      "urbanairship-cordova": {},
      "cordova-plugin-customurlscheme": {
        "URL_SCHEME": ""
      }
    },
    "platforms": [
      "ios"
    ]
  }
}

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[kensodemann]

Updated your issue to surround the package.json contents with three back-ticks as described in the markdown guide. I did this to make it readable (just letting you know what I edited...)

[kensodemann]

Hello! Thank you for opening an issue with us!

I have attempted to duplicate this but cannot.

Questions:

• Does this happen if you generate a fresh app from one of our starters?
• Does this happen in the emulator or only when run on a physical iPhone X?

Thank you for using Ionic

[ghost]

This splash screen problem must be addressed in avocado project. Many cordova apps have splash screen issues. I downloaded 40+ angular, java, javascript tutorial apps yesterday. I could tell which ones were built on cordova. The ones built on cordova all showed gray blank screen at start on my Lollipop 5 OS HP tablet. Some of them were stuck at white blank screen and couldn't get into home screen. Now I know these apps are cordova apps. One of them had ion spinner after gray loading screen. Some of them were running fine after white blank screen but this should never be a part of normal development process. This white splash screen problem alone is a factor that degrades quality of apps built on cordova. It looks like buggy cordova splash screen causes issues on many devices including mine. Cordova's buggy splash screen can't co-exist with high quality app development.

[neenuann8]

@kensodemann

1.We are not using a fresh app.Tried a sample fresh app but the splash screen issue not seems to be there 2.The issue happens both in emulator and physical iPhone X.

Do I need to update the cordova ios platform?

[kensodemann]

@neenuann8 - That is certainly worth a try.

Here is the ionic info output for the test app I used:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : ios 4.5.3
    Ionic Framework    : ionic-angular 3.8.0

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.2 
    ios-sim           : 6.1.2 
    Node              : v8.9.0
    npm               : 5.6.0 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : /Users/kensodemann/Library/Android/sdk/

Misc:

    backend : pro

[neenuann8]

@kensodemann We are using an app which is already in live.So if we update the platform it is just like starting from scratch since we are using lot of plugins and also we have integrated urbanairship SDK for push notifications. So there would be plugin compatibility issues.Is there any other solution for this?

Also we are using legacy launch images.Do I need to switch to Launch Storyboard?

[neenuann8]

When I updated cordova ios platform to the latest version I am getting build errors. "Error: Error code 65 for command"

[kensodemann]

@neenuann8 - it looks like you have the 'console' plugin installed. Please refer to the deprecation notice here: https://github.com/apache/cordova-plugin-console

The error 65 thing is (from what I have seen) due to duplication between the newer iOS plugin and the old console plugin.

When you remove it, I have found that it is best to remove the platform/ios directory and completely reinstall the plugins (which has its own set of potential headaches at times) but otherwise Cordova doesn't seem to fully clean up after itself (at least for me, YMMV).

[kensodemann]

Is there any other solution for this?

I am not even sure updating the cordova-ios plugin is a solution to this because I have not been able to duplicate the issue and thus cannot even begin to guess what is causing it, and you were not able to duplicate it in a fresh project either. Updating the plug-in is just a shot in the dark, but then staying up to date on plugins is something that should be done anyhow, so that is a "good thing"

I am just hoping it works... :)

Also we are using legacy launch images.Do I need to switch to Launch Storyboard?

I believe if you create a default project it just uses the images in resources in all cases since that is what is compatible across platforms. I don't think you need to switch there.

[kensodemann]

@neenuann8 - I am going to close this as it is not an Ionic Framework issue and more of a support question since it is not something that occurs with a freshly generated application. I hope your experimentations work out for you.

If not, I urge that you ask this question on our forum or on our slack channel. You will reach a much wider audience there, perhaps even someone who has run across this as well.

Thanks for using Ionic!

[mlynch]

@jamesharvey2 Capacitor (formerly, Avocado) will fix this launch image issue. You are correct that Cordova apps do not set a launch image for Android, which leaves the gray screen on boot. I am actually working on this right now and it's going well. I agree it's a must have.

[ghost]

@mlynch Awesome. I'm glad to hear that. Cordova's splash screen definitely tells users "this app is built on cordova". It has distinctive problems which can be observed on older devices running Android 4.4.1 and 5.1. I find it to be not very stable.

Please use SVG, HTML, CSS3 for splash screen. Splash screen plug-ins for NativeScript, React Native may inspire you:

https://github.com/crazycodeboy/react-native-splash-screen

https://www.npmjs.com/package/nativescript-splashscreen

It should come with stable animation... and I think it should load all necessary files without showing gray screen or white screen.

Thanks in advance.

[mlynch]

@jamesharvey2 sure, a couple of things. Using HTML or CSS isn't possible for the splash, and none of those plugins are doing that. The reason the splash is used is due to load time of the web view, so you don't have the web environment ready yet.

Which is fine, because each project will have a set of splash screen images anyways and we'll automatically load and show them so it'll feel snappy and users won't notice any gray screens.

I'm following best practices for splash screens on modern Android, so I might deviate a bit from the way Cordova does it today.

[ghost]

@mlynch Great, I can't wait to see that. Ability to use SVG is still recommended though.

In my opinion, NativeScript has very table splash screen among others. https://play.google.com/store/apps/details?id=org.nativescript.examples&hl=en

You can try their free test app and see how it behaves. All of their apps never fail with splash screen although I find NS to be still laggy

[ghost]

@mlynch A question: is Capacitor going to be compatible with Ionic native plugins? Many of cordova plugins are now aged but those native plugins are working well although there are a few bugs which will not be fixed. I wonder if you guys will integrate them or just abandon them. Native audio plugin, for instance, is pretty well-written.

[mlynch]

@jamesharvey2 yes we will have Cordova/Ionic Native plugin compatibility. Possibly not for the first release but it's on the roadmap and is a priority for us. We want to make sure you can use all the great plugins out there, but we want to make improvements to the "runtime" layer and core plugins (like splash, geolocation, filesystem, etc.)

[ghost]

@mlynch

and don't forget Android Java API access:

https://developer.android.com/reference/packages.html

and perhaps compatibility with SDK:

http://www.superpowered.com/

I think it would be great if Capacitor ships with some of these SDKs pre-installed & ideally with typescript command interface. In my opinion, these SDKs are better to be included. All of cordova plugins will not match specification of the SDK like this and many of SDK packages are 100% open source. Then why aren't we allowed to use?

https://www.mapbox.com/

One of the factors which makes cordova behind Java or objective-C apps is its incompatibility with these SDK packages. Some of them are outstanding and they allow you to get lots of useful functionalities which are not available in plugins.

[ghost]

I will submit SDK integration to Capacitor as a new feature request.

[ghost]

@mlynch @kensodemann And here are other useful open source SDKs for android & iOS. Any Java developers can install and get access to them for free:

https://www.artoolkit.org/

https://code.facebook.com/projects/172312162959990/facebook-sdk-for-android/

https://rtrsdk.com/

https://jodel.com/opensource/android/

There are many more... and they can do so much more than cordova plugins. It would be amazing if Capacitor integrate some of them with simplified typescript interface so users can get access to all of them without having to build java app from scratch. Many top companies seem to endorse these SDKs..

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.