CODEWITHSUNDEEP
ionic-frameworksplash-screencapacitorionic5
Mohammed Iqbal khan
Mohammed Iqbal khan

Reputation: 11

how to remove or disable ionic 5 default splash screen ionic version 5

How can I replace Ionic 5 default splash screen with a custom HTML or Lottie one?

default spash screen

My package.json is

{
  "name": "safenotes",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/fire": "^6.1.1",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@capacitor/android": "^2.4.3",
    "@capacitor/core": "2.4.3",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage": "^2.3.1",
    "firebase": "^8.1.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@capacitor/cli": "2.4.3",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project"
}

Upvotes: 1

Views: 484

Answers (1)

Linuslabo
Linuslabo

Reputation: 1628

Unfortunately it looks like only png files are supported at the moment.

You need to use Capacitor Assets (formerly known as cordova-res).

Install it globally:

$ npm install -g cordova-res

Than prepare the following files in the resources folder:

resources/
├── android
|   ├── icon-background.png (1)
|   └── icon-foreground.png (1)
├── icon.png
└── splash.png
config.xml (2)

Then generate all the required icons and splash screens with:

$ cordova-res

You can also use the --copyoption to automatically copy the files into the android/ios projects, e.g.:

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

(1) These icons are only necessary if you want adaptive icons for android to be generated. They must be present if your android project already uses default adaptive icons from capacitor.

(2) Config file is optional as well, check the docs for updated instructions and many more details.

Upvotes: 1

Related Questions