It’s easy to add an iOS or Android splash screen into an Ionic Angular app using the @capacitor/splash-screen package. This is a simple and effective way to provide a pleasing visual experience to the user while the app is loading.
In this article, I will explore how to add an iOS and Android splash screen to an Ionic Angular app using the @capacitor/splash-screen package.
Setting Up The App
First, I will start by creating a new Ionic Angular project. To do this, you will need to have the Ionic CLI installed. If you don’t have it installed, you can install it by running the following command:
npm install -g @ionic/cli
Once the Ionic CLI is installed, you can create a new Ionic Angular project by running the following command:
ionic start my-app blank
This will create a new Ionic Angular project in a directory called “my-app”.
Adding Capacitor and the Splash Screen Plugin
Next, we will install the @capacitor/splash-screen package by running the following commands:
npm install @capacitor/splash-screen
npx cap sync
Once the package is installed, we can now import it into our Ionic Angular project. To do this, we will open the “app.component.ts” file and import the SplashScreen component:
import { SplashScreen } from '@capacitor/splash-screen';
In the constructor of your app.component.ts file, you can use the SplashScreen.show() and SplashScreen.hide() methods to show and hide the splash screen respectively.
constructor(private splashScreen: SplashScreen) {
this.splashScreen.show();
// Do some initialization
this.splashScreen.hide();
}
Before Ionic Version 5
For Ionic versions below 5 you will also need to configure the splash screen settings in the config.xml file of your project.
- For iOS, you will need to add the following to your config.xml:
<preference name="SplashScreen" value="launch-screen" />
<preference name="SplashScreenDelay" value="3000" />
- For Android, you will need to add the following to your config.xml:
<preference name="SplashModes" value="portrait" />
<preference name="SplashScreen" value="launch_screen" />
<preference name="SplashScreenDelay" value="3000" />
Ionic Version 5 and Later
For Ionic 5 and after, you can update the configuration file , capacitor.config.json and add
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
}
In the SplashScreen property you can add any of available options documented.
Conclusion
With these simple steps, you now have a working iOS and Android splash screen for your Ionic Angular app using Capacitor and the the @capacitor/splash-screen plugin.