trying to solve the white screen problem after the splash screen then it loads, how do we remove it? i tried to set timeout but still not working.
with cordova i can set it up but i'm failing using capacitor
4 Answers
Try this.
capacitor.config.json - on plugins
"plugins": {
"SplashScreen": {
"launchShowDuration": 5000,
"launchAutoHide": true,
"androidScaleType": "CENTER_CROP",
"androidSplashResourceName": "splash",
"splashFullScreen": false,
"splashImmersive": false
}
},
"android": {
"allowMixedContent": true
}
And then in android/app/src/main/res/values/styles.xml file:
Change the below:
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">@drawable/splash</item>
</style>
To:
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">@drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowIsTranslucent">true</item>
</style>
The launchShowDuration is probably what you're after. In case you do get an issue with the splash image width being stretched, the xml will solve that...
I had the same problem.
capacitor for control needed to install the splashScreen plug-in.
This works for me:
npm i --save @capacitor/splash-screen
capacitor.config.json // .ts
"plugins": {
"SplashScreen": {
"launchShowDuration": 10000,
"launchAutoHide": false
}}
app.component.ts
import {SplashScreen} from '@capacitor/splash-screen';
setTimeout(() => {
SplashScreen.hide();
}, 2000);
You can change the color in capacitor.config with backgroundColor.
{
"appId": "io.ionic.starter",
"appName": "app",
"webDir": "build",
"bundledWebRuntime": false,
"backgroundColor": "#ff0000" // <-- here
}
You don't need download the extra package "@capacitor/SplashScreen" lol.
Disclaimers: I'm speaking for Capacitor v3 and Ionic v5
Capacitor 3+ / Ionic 5+ / Angular 12+
This works for me:
capacitor.config.json
"plugins": {
"SplashScreen": {
"launchAutoHide": false,
"showSpinner": true
}
}
app.component.ts
ngOnInit(): void {
this.initializeApp();
}
private initializeApp(): void {
// other code here
setTimeout(() => {
SplashScreen.hide();
}, 2000);
}
Related