0
# Ionic Native Splash Screen
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @ionic-native/splash-screen
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @ionic-native/splash-screen`
10

11
## Core Imports
12

13
```typescript
14
import { SplashScreen } from '@ionic-native/splash-screen';
15
```
16

17
For Angular applications, also import from core:
18

19
```typescript
20
import { IonicNativePlugin } from '@ionic-native/core';
21
```
22

23
## Basic Usage
24

25
```typescript
26
import { Component } from '@angular/core';
27
import { SplashScreen } from '@ionic-native/splash-screen';
28

29
@Component({
30
  selector: 'app-home',
31
  templateUrl: 'home.page.html'
32
})
33
export class HomePage {
34
  constructor(private splashScreen: SplashScreen) {}
35

36
  showSplash() {
37
    this.splashScreen.show();
38
  }
39

40
  hideSplash() {
41
    this.splashScreen.hide();
42
  }
43
}
44
```
45

46
## Architecture
47

48
The Splash Screen plugin follows the Ionic Native architecture pattern:
49

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

56
## Capabilities
57

58
### Show Splash Screen
59

60
Displays the application splash screen programmatically.
61

62
```typescript { .api }
63
/**
64
 * Shows the splashscreen
65
 */
66
show(): void;
67
```
68

69
### Hide Splash Screen
70

71
Hides the application splash screen programmatically.
72

73
```typescript { .api }
74
/**
75
 * Hides the splashscreen
76
 */
77
hide(): void;
78
```
79

80
## Service Class
81

82
```typescript { .api }
83
/**
84
 * Main service class for controlling splash screen display
85
 * Extends IonicNativePlugin and provides Angular dependency injection
86
 */
87
@Injectable()
88
export class SplashScreen extends IonicNativePlugin {
89
  show(): void;
90
  hide(): void;
91
}
92
```
93

94
## Inherited Methods
95

96
The `SplashScreen` class inherits utility methods from `IonicNativePlugin`:
97

98
```typescript { .api }
99
/**
100
 * Static methods available on the SplashScreen class
101
 */
102
interface IonicNativePlugin {
103
  /** Returns boolean indicating if the plugin is installed */
104
  static installed(): boolean;
105
  /** Returns the original Cordova plugin object */
106
  static getPlugin(): any;
107
  /** Checks if the plugin is available and installed */
108
  static checkInstall(): boolean;
109
  /** Returns the plugin's name */
110
  static getPluginName(): string;
111
  /** Returns the plugin's reference path */
112
  static getPluginRef(): string;
113
  /** Returns the plugin's install name */
114
  static getPluginInstallName(): string;
115
  /** Returns the plugin's repository URL */
116
  static getPluginRepo(): string;
117
  /** Returns array of supported platforms */
118
  static getSupportedPlatforms(): string[];
119
}
120
```
121

122
## Plugin Configuration
123

124
The plugin is configured with the following metadata:
125

126
```typescript { .api }
127
interface PluginConfig {
128
  pluginName: 'SplashScreen';
129
  plugin: 'cordova-plugin-splashscreen';
130
  pluginRef: 'navigator.splashscreen';
131
  repo: 'https://github.com/apache/cordova-plugin-splashscreen';
132
  platforms: ['Amazon Fire OS', 'Android', 'iOS', 'Windows'];
133
}
134
```
135

136
## Decorator Types
137

138
```typescript { .api }
139
interface CordovaOptions {
140
  /** Set to true if the wrapped method is a sync function */
141
  sync?: boolean;
142
  /** Set to true to return an observable */
143
  observable?: boolean;
144
  /** Callback order, set to reverse if success/error callbacks are first 2 arguments */
145
  callbackOrder?: 'reverse';
146
  /** Callback style */
147
  callbackStyle?: 'node' | 'object';
148
  /** Set custom index for success callback function */
149
  successIndex?: number;
150
  /** Set custom index for error callback function */
151
  errorIndex?: number;
152
  /** Success function property name for object callback style */
153
  successName?: string;
154
  /** Error function property name for object callback style */
155
  errorName?: string;
156
  /** Supported platforms for this method */
157
  platforms?: string[];
158
}
159
```
160

161
## Platform Support
162

163
- **Amazon Fire OS**: Full support
164
- **Android**: Full support  
165
- **iOS**: Full support
166
- **Windows**: Full support
167

168
## Setup Requirements
169

170
1. **Install the Ionic Native packages**:
171
   ```bash
172
   npm install @ionic-native/core @ionic-native/splash-screen
173
   ```
174

175
2. **Install the Cordova plugin**:
176
   ```bash
177
   ionic cordova plugin add cordova-plugin-splashscreen
178
   ```
179

180
3. **Add to Angular module providers**:
181
   ```typescript
182
   import { SplashScreen } from '@ionic-native/splash-screen';
183
   
184
   @NgModule({
185
     providers: [
186
       SplashScreen,
187
       // other providers...
188
     ]
189
   })
190
   export class AppModule { }
191
   ```
192

193
4. **Inject into components**:
194
   ```typescript
195
   constructor(private splashScreen: SplashScreen) { }
196
   ```
197

198
## Error Handling
199

200
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:
201

202
```typescript
203
if (SplashScreen.installed()) {
204
  this.splashScreen.show();
205
} else {
206
  console.log('Splash screen plugin not available');
207
}
208
```