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
```