Prevent the white screen on App Load

[iteearmah]

Is there a way to prevent the first white screen the appears when the App is launched

[mpost]

Currently this is the screen you see when first launching the app and the js vm loads. What would you like to do with it?

[iteearmah]

to customize it like a splash screen

[cookieguru]

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

[iteearmah]

it seems the splashscreen loads when the app is already loaded.

[iteearmah]

I wish we can add an image property to that particular white screen.

[mpost]

Rather without a plugin similar to how the ios cordova build allows to provide splash screens.

[iteearmah]

Yeah....something without a plugin

[iteearmah]

Or is there a way to hide that white screen?

[mpost]

the white screen is the apps actvity while the js vm and your app get loaded so showing a custom image in the style of https://material.google.com/patterns/launch-screens.html makes sense.

[iteearmah]

Hoping the Team added that function soon...really need it.

[mpost]

@iteearmah In general, if your load times are so long that you see the white screen for a long time (in a production app where the sources are bundled) you should consider to modularize your app more.

[iteearmah]

Ok....Will do that then

[mpost]

We have added Android support for the <splash ..> element in the config.xml. Here is how you can use it:

<platform name="android">
  <splash src="res/android/drawable-xxxhpdi/splash.png" density="xxxhdpi"/>
  <splash src="res/android/drawable-xxhpdi/splash.png" density="xxhdpi"/>
  ...
</platform>

The src path and file name is relative to the config.xml. It can be any arbitrary path and file name. The density attribute has to be the name of an Android drawable bucket (without the leading drawable-). The image you provide is actually shown as an "app image". See material guidelines for further styling details.

The image you provided is shown on a light background. This can currently not be changed in the Tabris.js 1.x stream. In the Tabris.js 2.x stream you are able to provide a custom theme in the config.xml that controls the splash screen appearance. being able to configure your theme also allows you to create a splash screen with a dark background:

<platform name="android">
  <!-- Set dark splash screen -->
  <preference name="ThemeSplash" value="@style/Theme.Tabris.SplashScreen" />
</platform>

The available splash base themes in Tabris.js 2 are:

• @style/Theme.Tabris.SplashScreen (dark theme)
• @style/Theme.Tabris.Light.SplashScreen (light theme; default)

Support for the <splash .. /> Is available in the 1.x and 2.x nightlies. Please let us know how it works out for you.

[mpost]

Closing as implemented

[maoamid]

@mpost this implementation require cordova plugin add cordova-plugin-splashscreen for android and ios?

[cookieguru]

@maoamid No