Search code examples
iosangularsplash-screencapacitor

Ionic ios capacitor splash screen working, but unable to add images

I am trying to display a custom splash screen using ionic capacitor. I followed the splash screen documentation and got it working for general color backgrounds. But when I attempt to add images, it doesn't work. Here is my code:

capacitor.config.json:

"SplashScreen": {
   "launchShowDuration": 2000,
  "launchAutoHide": false,
  "backgroundColor": "#00FF00",
  "androidSplashResourceName": "splash",
  "androidScaleType": "CENTER_CROP",
  "showSpinner": false,
  "androidSpinnerStyle": "large",
  "iosSpinnerStyle": "small",

  "spinnerColor": "#999999",
  "splashFullScreen": true,
  "splashImmersive": true,
  "layoutName": "launch_screen",
  "useDialog": true
 },

app.component.ts:

console.log('waiting starts!')
SplashScreen.show({
  showDuration: 2000,
  autoHide: true
});


this.platform.ready().then(async() => 
{
  console.log('waiting ends')
  SplashScreen.hide()

  StatusBar.setStyle({style:Style.Default});
  ...

source: https://capacitorjs.com/docs/apis/splash-screen

In my json file I had the screen set to green (with the backgroundColor parameter), which works:

Green Screen

But I am unable to get the splash image to work using this documentation: https://capacitorjs.com/docs/guides/splash-screens-and-icons. This is my current setup:

enter image description here

enter image description here

And after following this tutorial (https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-capacitor-projects/) and running cordova-res ios --skip-config --copy it doesn't work. Does anyone know what is going wrong? I think it may have something to do with my launchscreen storyboard. Earlier in the project, someone else messed around with it so now it looks like this:

enter image description here

Note: the test image I was using for the splash screen is just a blue canvas, so that's what is on the splash asset if anyone is wondering.

Solution

  • On iOS the Splash plugin uses the configured Launch Storyboard (LaunchScreen.storyboard by default), so if you messed with it that can be the reason why it no longer works. It should contain a ImageView that loads the Splash.png image. Well, you don't really need to show the image, whatever you add to it will be shown, images, texts.

    On Android, as you configured the layoutName, it will use whatever you have in the layout called launch_screen.xml and not the image.