CODEWITHSUNDEEP
iosangularsplash-screencapacitor
Darrow Hartman
Darrow Hartman

Reputation: 4383

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.

Upvotes: 0

Views: 6622

Answers (2)

jcesarmobile
jcesarmobile

Reputation: 53301

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.

Upvotes: 1

Manojkumar Muthukumar
Manojkumar Muthukumar

Reputation: 323

First, install cordova-res:

npm install -g cordova-res

cordova-res expects 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

Next, run the following to generate all images then copy them into the native projects:

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

resources/icon.(png|jpg) must be at least 1024×1024px

resources/splash.(png|jpg) must be at least 2732×2732px

Upvotes: 0

Related Questions