After splash screen, display white screen long time

Ionic Framework ionic-v3
1

I have created a sidemenu template application with Ionic 2.
When I bootstrap the app, appear a splash screen and display white screen long time.

How can I remove the white screen?

2 Likes
2

Sound like this is the (HTML/JS) app loading until it can be viewed.

How did you build your app?
What is your app doing during the white screen is displayed?

3

Hello @Sujan12

I have created Ionic 2 app based on the angular 2 with sidemenu template.
And I built my app as follows command:

ionic platform add android
ionic run android

The white screen is displayed for 7~9 sec.

1 Like
4

I had the same problem. The solution was update to 2.0 version and add the following in app.component.ts:

  constructor(platform: Platform) {
platform.ready().then(() => {
  this.hideSplashScreen();
});
  }
  hideSplashScreen() {
if (Splashscreen) {
  setTimeout(() => {
    Splashscreen.hide();
  }, 100);
 }
}
3 Likes
5
  1. Same problem on iOS builds?
  2. Tried ionic run android --prod?
  3. Are you running on a local real device or emulator?
2 Likes
6

Hello @Sujan12
I will try that way.
And I was tested on real device.

7

If you didn’t use any native plugins, you can also try to ionic upload and then use Ionic View (from the App / Play Store) to display your app - see if the same problem exists there.

8

Hello @Sujan12
Can you explain how to use Ionic view from the App / Play store?
I am very interesting to use Ionic view.
Thank you.

9

Only for debugging, but can help you pinpoint the problem:


http://docs.ionic.io/tools/view/

1 Like
10

Hello @sebafra
I have tried to fix my bug with your method.
I already developed my app with Ionic 2.
Unlikely I didn’t fix yet.

11

Thank you @Sujan12

ionic run android --prod

It’s helpful. I fixed issue with this command.
When I build release version, how can I do?

2 Likes
12

Just combine the two together:
ionic build android --prod --release

1 Like
13

Thank you for your help.
And I have some question.
Can you help me.
I am going to create the app that run background after login from back end service.
How can I do?

14

You’re welcome.

Please open a new thread and describe a bit more what exactly you are trying to do. Maybe I or someone else will be able to help.

15

@Donbelar
Could you paste here your package.json content?

Thanks

16

Thank you @sebafra

{
“name”: “”,
“author”: “”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@ionic/storage": “1.1.7”,
“ionic-angular”: “2.0.0”,
“ionic-native”: “^2.4.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“sw-toolbox”: “3.4.0”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ionic/app-scripts": “^1.1.3”,
“typescript”: “2.0.9”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-whitelist”,
“ionic-plugin-keyboard”,
“cordova-plugin-splashscreen”
],
“cordovaPlatforms”: [],
“description”: " An Ionic project"
}

17

I’ve solved that issue by setting the correct parameters on config.xml

 <preference name="AutoHideSplashScreen" value="false" />
 <preference name="SplashScreenDelay" value="10000" />
 <preference name="FadeSplashScreenDuration" value="1000" />
 <preference name="SplashScreen" value="screen" />
 <preference name="ShowSplashScreen" value="true" />
 <preference name="ShowSplashScreenSpinner" value="false" />
 <preference name="SplashShowOnlyFirstTime" value="false" />
 <preference name="FadeSplashScreen" value="true" />

Then, on my platform.ready() instruction all I do is Splashscreen.hide();

26 Likes
18

Thanks @Donbelar your package.json it’s ok.
I’ve forgot that i made the same changes proposed for @celsosantos
My config.xml is:

  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="AutoHideSplashScreen" value="false" />  
  <preference name="ShowSplashScreen" value="true"/>
  <preference name="SplashScreenDelay" value="30000"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
4 Likes
19

Thank you! This solved it for me!

1 Like
20

Hi!

This still doesn’t’ solve my problem!

1 Like