or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-ionic-native-splash-screen

Ionic Native wrapper for Cordova splash screen plugin providing programmatic control over splash screen display in mobile applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ionic-native/splash-screen@4.20.x

To install, run

npx @tessl/cli install tessl/npm-ionic-native-splash-screen@4.20.0

index.mddocs/

Ionic Native Splash Screen

Ionic Native Splash Screen is a TypeScript wrapper for the Cordova splash screen plugin that provides programmatic control over splash screen display in Ionic applications. It offers a simple Angular service-based API with show() and hide() methods for managing splash screen visibility during application lifecycle events.

Package Information

  • Package Name: @ionic-native/splash-screen
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ionic-native/splash-screen

Core Imports

import { SplashScreen } from '@ionic-native/splash-screen';

For Angular applications, also import from core:

import { IonicNativePlugin } from '@ionic-native/core';

Basic Usage

import { Component } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  constructor(private splashScreen: SplashScreen) {}

  showSplash() {
    this.splashScreen.show();
  }

  hideSplash() {
    this.splashScreen.hide();
  }
}

Architecture

The Splash Screen plugin follows the Ionic Native architecture pattern:

  • Angular Service: Injectable service for dependency injection into components and other services
  • Cordova Plugin Wrapper: TypeScript wrapper around the native cordova-plugin-splashscreen
  • Decorator-Based Configuration: Uses @Plugin and @Cordova decorators for plugin metadata and method configuration
  • Platform Detection: Automatically detects platform capabilities and provides fallbacks
  • Synchronous Operations: Both show and hide operations are synchronous for immediate UI response

Capabilities

Show Splash Screen

Displays the application splash screen programmatically.

/**
 * Shows the splashscreen
 */
show(): void;

Hide Splash Screen

Hides the application splash screen programmatically.

/**
 * Hides the splashscreen
 */
hide(): void;

Service Class

/**
 * Main service class for controlling splash screen display
 * Extends IonicNativePlugin and provides Angular dependency injection
 */
@Injectable()
export class SplashScreen extends IonicNativePlugin {
  show(): void;
  hide(): void;
}

Inherited Methods

The SplashScreen class inherits utility methods from IonicNativePlugin:

/**
 * Static methods available on the SplashScreen class
 */
interface IonicNativePlugin {
  /** Returns boolean indicating if the plugin is installed */
  static installed(): boolean;
  /** Returns the original Cordova plugin object */
  static getPlugin(): any;
  /** Checks if the plugin is available and installed */
  static checkInstall(): boolean;
  /** Returns the plugin's name */
  static getPluginName(): string;
  /** Returns the plugin's reference path */
  static getPluginRef(): string;
  /** Returns the plugin's install name */
  static getPluginInstallName(): string;
  /** Returns the plugin's repository URL */
  static getPluginRepo(): string;
  /** Returns array of supported platforms */
  static getSupportedPlatforms(): string[];
}

Plugin Configuration

The plugin is configured with the following metadata:

interface PluginConfig {
  pluginName: 'SplashScreen';
  plugin: 'cordova-plugin-splashscreen';
  pluginRef: 'navigator.splashscreen';
  repo: 'https://github.com/apache/cordova-plugin-splashscreen';
  platforms: ['Amazon Fire OS', 'Android', 'iOS', 'Windows'];
}

Decorator Types

interface CordovaOptions {
  /** Set to true if the wrapped method is a sync function */
  sync?: boolean;
  /** Set to true to return an observable */
  observable?: boolean;
  /** Callback order, set to reverse if success/error callbacks are first 2 arguments */
  callbackOrder?: 'reverse';
  /** Callback style */
  callbackStyle?: 'node' | 'object';
  /** Set custom index for success callback function */
  successIndex?: number;
  /** Set custom index for error callback function */
  errorIndex?: number;
  /** Success function property name for object callback style */
  successName?: string;
  /** Error function property name for object callback style */
  errorName?: string;
  /** Supported platforms for this method */
  platforms?: string[];
}

Platform Support

  • Amazon Fire OS: Full support
  • Android: Full support
  • iOS: Full support
  • Windows: Full support

Setup Requirements

  1. Install the Ionic Native packages:

    npm install @ionic-native/core @ionic-native/splash-screen

  2. Install the Cordova plugin:

    ionic cordova plugin add cordova-plugin-splashscreen

  3. Add to Angular module providers:

    import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  providers: [
    SplashScreen,
    // other providers...
  ]
})
export class AppModule { }

  4. Inject into components:

    constructor(private splashScreen: SplashScreen) { }

Error Handling

The splash screen methods are synchronous and do not throw exceptions. If the underlying Cordova plugin is not available, the methods will fail silently. Use the inherited installed() method to check plugin availability:

if (SplashScreen.installed()) {
  this.splashScreen.show();
} else {
  console.log('Splash screen plugin not available');
}