cordova ios after upgrading to iOS 14 a black screen is shown and no splash screen appears

It appears that the plugin or file path is not working how it used to be on previous iOS versions. Previous version had the splash screen showing.  After upgrading to plugins, a black screen is shown.

The easiest way to simulate the problem is using iOS simulator.  A black screen will show up as the splash screen.

What is expected to happen?

Splash screen is supposed to appear immediately after opening the app. A black screen is shown and then the app is loading.

What does actually happen?

Black screen appears and no splash screen.

Versions in use

Path to a solution

First approach

My initial thoughts are as the splash screen was working previously, points me in the direction of reviewing the plugin.

Starting with Ionic splash screen reference

Ionic splash screen points to the Cordova splash screen plugin page ~ https://ionicframework.com/docs/native/splash-screen

npm install cordova-plugin-splashscreen
npm install @awesome-cordova-plugins/splash-screen
ionic cap sync

install cordova-plugin-splashscreen

Running the first command I expected no issues, as the plugin is already loaded.

Response

up to date, audited 1414 packages in 4s

install @awesome-cordova-plugins/splash-screen

Again expecting no issues for the same reason as above... response

added 2 packages, and audited 1416 packages in 8s

Minor change... updates

ionic cap sync

Synchronising the changes and rebuilding the app.  This command copies the web assets.

Test - any changes 

ionic capacitor copy ios

Copy the relevant files across to iOS.

ionic capacitor copy ios

Open in Xcode.

ionic capacitor open ios

This will launch the code in Xcode.  Now you can set the device and run.

As Capacitor doesn't build native projects, it relies on Xcode to build and deploy app binaries.  While for this  is the situation, Ionic CLI can launch a live-reload server and configure Capacitor to use it with a single command.

Run the following, then select a target simulator or device and click the play button in Xcode:

ionic capacitor run ios -l --external

Or rather than open in Xcode simplify the command, so you can select the device and launch in the simulator.  Respond accordingly when the prompt 'Which device would you like to target?' occurs.

ionic capacitor run ios

First approach test outcome

Still a black screen

Second approach

The second approach was geared around the universal name for the splash screen images.

The entry <splash src="path/to/images/ios/Default@2x~universal~anyany.jpg" /> is no longer being used for iPhones.  Instead use the entry: <splash src="path/to/images/ios/Default@2x~iphone~anyany.jpg" /> in order to get iPhone devices covered too.

For people using only the universal~anyany entry (the only entry necessary in previous iOS versions): you just have to add the iphone~anyany entry to your config.xml file and you are good to go.  Such as:

<splash src="path/to/images/ios/Default@2x~universal~anyany.jpg" />
<splash src="path/to/images/ios/Default@2x~iphone~anyany.jpg" />

Once the above changes were applied, I ran the commands

npm run build
npx cap sync
ionic capacitor copy ios
npx cap run

Second approach test outcome

Still a black screen

Third approach

This approach is to check the installation of the Cordova splash screen.  This is completed by running the command

ionic cordova plugin add cordova-plugin-splashscreen

However, if your project is capacitor then you will see a response

ERROR] Refusing to run ionic cordova plugin inside a Capacitor project.

        In Capacitor projects, Cordova plugins are just regular npm
        dependencies.

        - To add a plugin, use npm i cordova-plugin-splashscreen
        - To remove, use npm uninstall cordova-plugin-splashscreen

Won't run a Cordova plugin within a Capacitor project.  Fortunately, there is a reference for what to run next...

npm i cordova-plugin-splashscreen

Response

removed 1 package, and audited 1415 packages in 4s

Once the above changes were applied, I ran the commands

npm run build
npx cap sync
npx cap copy ios
npx cap open ios

Third approach test outcome

Still a black screen

Fourth approach

Now I'm going to review the Capacitor config file (capacitor.config.json).  The original file contained the following structure:

{
  "appId": "com.{project}.app",
  "appName": "SAFS",
  "bundledWebRuntime": false,
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": false,
      "androidSplashResourceName": "splash",
      "showSpinner": false,
      "iosSpinnerStyle": "small"
    }
  }
}

While I won't go through all the changes, I have made a few a little tweaks by going back to the @capacitor/splash-screen page and this file has now become

{
  "appId": "com.{project}.app",
  "appName": "SAFS",
  "bundledWebRuntime": false,
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": true,
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "androidSpinnerStyle": "small",
      "showSpinner": false,
      "spinnerColor": "#ffffff",
      "iosSpinnerStyle": "small",
      "splashFullScreen": true,
      "splashImmersive": true,
      "layoutName": "launch_screen",
      "useDialog": true
    }
  }
}

Post the changes above, it is time to run the npx commands to update the app:

npm run build
npx cap sync
npx cap copy ios
npx cap open ios

or chained version

npm run build && npx cap sync && npx cap copy ios && npx cap open ios

Note: nix cap sync includes nix cap copy.  There is no need to reference nix cap copy after sync.  The chained call can be

npm run build && npx cap sync && npx cap open ios

Fourth approach test outcome

Success.  The splash screen is up and running.

Fifth approach

A little searching for issues with the splash not showing can be related to Cordova.  Specifically checking that cordova-res has been installed.

First, install cordova-res:

npm install -g cordova-res

This loops in issues with not only the splash screen, but also the app icon.

cordova-res is looking for a Cordova like structure.  Place one icon and one splash screen file in a top-level resources folder within your project, like so:

resources/
   ├── icon.png
   └── splash.png

Now run the following command:

cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy

Fifth approach test outcome

Success with both the splash screen and now also the app icon.