Blank white screen on Android

[monkeytronics]

Bug report

I am trying to add your excellent plugin to my Ionic 4 project. The project is building fine before hand. But I have made some changes as needed: uninstalled android platform and reinstalled with @latest to ensure it's /\ 9.0 as specified. Right now, I'm just testing in Android. I find that if I allowed the std splash plugin to coexist, it would behave as normal. It came up and then disappeared around when I'd expect it. However, the lottie splash itself was a blank screen.

Then configuring the config.xml correctly (I think), the std splash was suppressed, but the blank white screen was all I ever see.

What steps will reproduce the problem?

$ ionic info
Ionic:

Ionic CLI : 5.4.9 (C:\Users\thebi\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.3.1
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.8
@angular/cli : 7.3.8
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 13 other plugins)

Utility:

cordova-res : 0.8.1 (update available: 0.15.2)
native-run : 0.2.9 (update available: 1.2.2)

System:

Android SDK Tools : 26.1.1 (C:\Users\thebi\AppData\Local\Android\sdk)
NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

Config.xml code:
preference name="android-minSdkVersion" value="22" /
preference name="android-targetSdkVersion" value="29" /
preference name="BackupWebStorage" value="none" /
preference name="SplashMaintainAspectRatio" value="true" /
preference name="SplashScreen" value="none" /
preference name="SplashScreenDelay" value="0" /
preference name="FadeSplashScreenDuration" value="0" /
preference name="LottieAnimationLocation" value="src/assets/lottie/lottie_splash_test.json" /
preference name="LottieFullScreen" value="true" /
preference name="LottieHideTimeout" value="5000" /
preference name="WKWebViewOnly" value="true" /
preference name="AndroidXEnabled" value="true" /
preference name="GradlePluginKotlinEnabled" value="true" /

Inside app.component:
async initializeApp() {

await this.platform.ready().then(() =/\ {
  this.statusBar.styleDefault();
  // this.splashScreen.hide();

  // setTimeout(() =/\ {
    this.lottieSplashScreen.hide();
  // }, 10000)
});

Expected output

I expect to see the json file I downloaded from the Lottie site as a test.

What do you see instead?

White screen. And it is white no matter what value of background colour I selet.

Log file of the issue/error

There are some cryptic errors in the output which may or may not be the cause:

/\ Configure project :CordovaLib
[Cordova] cdvMinSdkVersion is overridden, try it at your own risk.

/\ Configure project :app
Error 'Plugin-Version' of 'unspecified' for 'com.android.build.gradle.AppPlugin@35750602' is not a valid version number
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed in version 5.0 of the Android Gradle plugin.
For more information, see http://d.android.com/r/tools/update-dependency-configurations.html.

/\ Task :app:stripDebugDebugSymbols UP-TO-DATE
WARNING: Compatible side by side NDK version was not found. Default is 21.0.6113669.
Compatible side by side NDK version was not found. Default is 21.0.6113669.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.5/userguide/command_line_interface.html#sec:command_line_warnings

Version information

$ npx cordova info
Collecting Data...

Node version: v10.15.3

Cordova version: 8.1.1

Config.xml file:

/?xml version='1.0' encoding='utf-8'?/\

/\content src="index.html" //\
/\access origin="*" //\
/\access origin="https://www.google-analytics.com" //\
/\allow-intent href="http://*/*" //\
/\allow-intent href="https://*/*" //\
/\allow-intent href="tel:*" //\
/\allow-intent href="sms:*" //\
/\allow-intent href="mailto:*" //\
/\allow-intent href="geo:*" //\
/\preference name="ScrollEnabled" value="false" //\
/\preference name="android-minSdkVersion" value="22" //\
/\preference name="android-targetSdkVersion" value="29" //\
/\preference name="BackupWebStorage" value="none" //\
/\preference name="SplashMaintainAspectRatio" value="true" //\
/\preference name="SplashScreen" value="none" //\
/\preference name="SplashScreenDelay" value="0" //\
/\preference name="FadeSplashScreenDuration" value="0" //\
/\preference name="LottieAnimationLocation" value="src/assets/lottie/lottie_splash_test.json" //\
/\preference name="LottieFullScreen" value="true" //\
/\preference name="LottieHideTimeout" value="5000" //\
/\preference name="WKWebViewOnly" value="true" //\
/\preference name="AndroidXEnabled" value="true" //\
/\preference name="GradlePluginKotlinEnabled" value="true" //\
/\platform name="android"/\
    /\allow-intent href="market:*" //\
    /\icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" //\
    /\icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" //\
    /\icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" //\
    /\icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" //\
    /\icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" //\
    /\icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" //\
    /\splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" //\
    /\splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" //\
    /\splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" //\
    /\splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" //\
    /\splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" //\
    /\splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" //\
    /\splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" //\
    /\splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" //\
    /\splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" //\
    /\splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" //\
    /\splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" //\
    /\splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" //\
    /\resource-file src="resources/android/icon/drawable-mdpi-icon.png" target="res/drawable-mdpi/ic_stat_onesignal_default.png" //\
    /\resource-file src="resources/android/icon/drawable-hdpi-icon.png" target="res/drawable-hdpi/ic_stat_onesignal_default.png" //\
    /\resource-file src="resources/android/icon/drawable-xhdpi-icon.png" target="res/drawable-xhdpi/ic_stat_onesignal_default.png" //\
    /\resource-file src="resources/android/icon/drawable-xxhdpi-icon.png" target="res/drawable-xxhdpi/ic_stat_onesignal_default.png" //\
    /\resource-file src="resources/android/icon/drawable-xxxhdpi-icon.png" target="res/drawable-xxxhdpi/ic_stat_onesignal_default.png" //\
/\/platform/\
/\platform name="ios"/\
    /\config-file parent="NSLocationWhenInUsageDescription" platform="ios" target="*-Info.plist"/\
        /\string/\ needs this permission to access the phone's Bluetooth peripheral/\/string/\
    /\/config-file/\
    /\config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist"/\
        /\string/\This app needs access to your Camera to scan QR codes on/\/string/\
    /\/config-file/\
    /\config-file parent="NSBluetoothPeripheralUsageDescription" platform="ios" target="*-Info.plist"/\
        /\string/\This app needs Bluetooth for secure communications between your phone and /\/string/\
    /\/config-file/\
    /\config-file parent="NSBluetoothAlwaysUsageDescription" platform="ios" target="*-Info.plist"/\
        /\string/\This app needs Bluetooth for secure communications between your phone and/\/string/\
    /\/config-file/\
    /\config-file parent="ITSAppUsesNonExemptEncryption" target="*-Info.plist"/\
        /\false //\
    /\/config-file/\
    /\allow-intent href="itms:*" //\
    /\allow-intent href="itms-apps:*" //\
    /\icon height="57" src="resources/ios/icon/icon.png" width="57" //\
    /\icon height="114" src="resources/ios/icon/icon@2x.png" width="114" //\
    /\icon height="40" src="resources/ios/icon/icon-40.png" width="40" //\
    /\icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" //\
    /\icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" //\
    /\icon height="50" src="resources/ios/icon/icon-50.png" width="50" //\
    /\icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" //\
    /\icon height="60" src="resources/ios/icon/icon-60.png" width="60" //\
    /\icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" //\
    /\icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" //\
    /\icon height="72" src="resources/ios/icon/icon-72.png" width="72" //\
    /\icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" //\
    /\icon height="76" src="resources/ios/icon/icon-76.png" width="76" //\
    /\icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" //\
    /\icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" //\
    /\icon height="29" src="resources/ios/icon/icon-small.png" width="29" //\
    /\icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" //\
    /\icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" //\
    /\icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" //\
    /\splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" //\
    /\splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" //\
    /\splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" //\
    /\splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" //\
    /\splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" //\
    /\splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" //\
    /\splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" //\
    /\splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" //\
    /\splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" //\
    /\splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" //\
    /\splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" //\
    /\splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" //\
    /\splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" //\
    /\icon height="20" src="resources/ios/icon/icon-20.png" width="20" //\
    /\icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" //\
    /\icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" //\
    /\icon height="29" src="resources/ios/icon/icon-29.png" width="29" //\
    /\icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" //\
    /\icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" //\
    /\icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" //\
    /\icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" //\
    /\icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" //\
    /\icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" //\
    /\icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" //\
    /\icon height="216" src="resources/ios/icon/icon-108@2x.png" width="216" //\
    /\splash height="2688" src="resources/ios/splash/Default-2688h~iphone.png" width="1242" //\
    /\splash height="1242" src="resources/ios/splash/Default-Landscape-2688h~iphone.png" width="2688" //\
    /\splash height="1792" src="resources/ios/splash/Default-1792h~iphone.png" width="828" //\
    /\splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" //\
    /\splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" //\
    /\splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" //\
/\/platform/\
/\plugin name="cordova-sqlite-storage" spec="3.2.0" //\
/\plugin name="cordova-plugin-whitelist" spec="^1.3.3" //\
/\plugin name="cordova-plugin-statusbar" spec="^2.4.2" //\
/\plugin name="cordova-plugin-device" spec="^2.0.2" //\
/\plugin name="cordova-plugin-splashscreen" spec="^5.0.2" //\
/\plugin name="cordova-plugin-ionic-webview" spec="^4.0.1"/\
    /\variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" //\
/\/plugin/\
/\plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.3" //\
/\plugin name="phonegap-plugin-barcodescanner" spec="8.0.1"/\
    /\variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" //\
/\/plugin/\
/\plugin name="cordova-plugin-file" spec="6.0.1" //\
/\plugin name="cordova-plugin-file-transfer" spec="1.7.1" //\
/\plugin name="onesignal-cordova-plugin" spec="^2.11.0" //\
/\plugin name="cordova-plugin-cleartext" spec="^1.0.0" //\
/\plugin name="cordova-plugin-ble-central" spec="^1.3.1" //\
/\plugin name="cordova-plugin-lottie-splashscreen" spec="^0.9.6" //\
/\plugin name="cordova-plugin-androidx" spec="^3.0.0" //\
/\plugin name="cordova-plugin-androidx-adapter" spec="^1.1.3" //\
/\engine name="android" spec="^9.1.0" //\

//widget/\

Plugins:

cordova-plugin-androidx,cordova-plugin-androidx-adapter,cordova-plugin-ble-central,cordova-plugin-cleartext,cordova-plugin-device,cordova-plugin-file,cordova-plugin-file-transfer,cordova-plugin-ionic-keyboard,cordova-plugin-ionic-webview,cordova-plugin-lottie-splashscreen,cordova-plugin-splashscreen,cordova-plugin-statusbar,cordova-plugin-whitelist,cordova-sqlite-storage,onesignal-cordova-plugin,phonegap-plugin-barcodescanner

Error retrieving Android platform information:
Android SDK is not set up properly. Make sure that the Android SDK 'tools' and 'platform-tools' directories are in the PATH variable.

Error: cmd: Command failed with exit code 1 Error output:
'android' is not recognized as an internal or external command,
operable program or batch file.

Please provide any additional information below.

Checklist

/!-- Please check the items below with x and remv the space. [x] NOT [x ] or [+] --/\

• If there is a (potential) plugin conflict, I've identified the conflicting plugin
• I have added a valid version output
• I have attached necessary information like a screenshot, example project or videos

[monkeytronics]

I've figured out some of the problem. I was not configuring the LottieRemoteEnabled correctly. I had incorrectly assumed that I could set it to true and still use local resources. My understanding was that it enabled a capability : not made a decisive selection.

I stumbled upon this when I decided to try grabbing an animation from a URL and it worked. Then the penny dropped.

Moving on, the next thing is to get it working from within the code at runtime. The entire reason I am using this is to enable dynamic selection of splash. My app pulls some resources from storage, and depending on those, it needs to configure the app for a different use case.

Unfortunately, the splash isn't working for me. Inside the app.component.ts, in the constructor, I have put the following code:

 async initializeApp() {
    await this.lottieSplashScreen.show('https://assets.lottiefiles.com/datafiles/99nA1a7mkSF3Oz8/data.json', true);

    await this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      // this.splashScreen.hide();

      // setTimeout(() => {
      //   this.lottieSplashScreen.hide();
      // }, 10000)
    });


    // Start Push Notifications.
    if (this.platform.is('cordova')) {
      this.setupPush();
    }
  }

The URL supplied works when selected in the config.xml. I have removed the AnimationLocation from config.xml, but left the Remoteenabled set to true. What I see is a very brief period of dark screen, followed by white screen, then the app loads.

Is there anything wrong with this implementation?

[monkeytronics]

What would be incredibly useful is worked examples using the .show & .hide functions : both for remote and local resources. On the face of it, it shouldn't be needed, but clearly there's something that I'm missing, or another poor assumption that I'm making. The best documentation is a working example! Thanks! And sorry for being that guy!

[timbru31]

Glad you were able to debug the issue yourself, I'll definitely look into either updating the documentation to make this more clear or to obsolete the flag at all. Sadly, the limitation comes from the lottie library used under the hood that it's a A or B but not both.

I bet you have seen the working demo in the /example folder, but I'll agree it makes sense to expand it a bit more :)

Could you share your project with the dynamic loading via the app.component.ts?

[monkeytronics]

Yes, thanks. I can see that works perfectly!

What I was hoping to use in my project is something like this:

async initializeApp() {
  let appType;
  let lottieJsonSource;
  try {
    appType = await this.storage.get('appType');

    switch(appType) { 
      case 'app1': { 
        lottieJsonSource = 'www/assets/lottie/splash1.json'; 
        break; 
      } 
      case 'app2': { 
        lottieJsonSource = 'www/assets/lottie/splash2.json';  
        break; 
      } 
      default: { 
        lottieJsonSource = 'www/assets/lottie/splash0.json';
        break; 
      } 
    } 
  } catch (err) {
    lottieJsonSource = 'www/assets/lottie/splash0.json';
  }

  await this.lottieSplashScreen.show(lottieJsonSource, false); 
  // await this.lottieSplashScreen.show('https://assets4.lottiefiles.com/packages/lf20_EUyLAK.json', true)
  
  
  await this.platform.ready().then(() => {
    this.statusBar.styleDefault();
    // this.splashScreen.hide();

    // setTimeout(() => {
    //   this.lottieSplashScreen.hide();
    // }, 10000)
  });


  // Start Push Notifications.
  if (this.platform.is('cordova')) {
    this.setupPush();
  }
}

I've simplified it down to to just a single line, both locally and remote, without success:

await this.lottieSplashScreen.show('https://assets4.lottiefiles.com/packages/lf20_EUyLAK.json', true)

or

await this.lottieSplashScreen.show('www/assets/lottie/splash0.json', false)

[monkeytronics]

Hi again Tim,

Do you have an example of how to use the show method. And any other things that must be set. I'm really keen to get it working on my app but I haven't figured it out yet. I still get blank screen when running the .show from inside the app.comonent.

Many thanks for this great plugin.

[gentooza]

Hi @monkeytronics

I had, what I think same problem as you.
only one question, did the app freeze in blank screen, or simply it's not loading the animation and then continues with app loading?

cheers

[monkeytronics]

Hi @gentooza I had the complete failure first but figured out that I had to remove the android platform update to cordova android 9+ and add platform again. After that, I see the issue only when trying to load with the show function. And its blank during splash, then app loads normally.

[gentooza]

Well first, I'm total newbie here heheheh

Second, what I think is, for using 'lottieSplashScreen' as it's a @ionic-native, you have to use it after platform ready.

my code:

[...]
export class AppComponent {
constructor(private platform: Platform, private background: BackgroundMode,
              private localNotifications: LocalNotifications, private ntfsSvc: NotificationsService,
              private router: Router, private global: GlobalService,
              private lottieSplashScreen: LottieSplashScreen) {
    this.global.actualRequest = -1;
    this.platform.ready().then(() => {
      this.lottieSplashScreen.show('www/assets/animation.json', false);
      setInterval (() => {
        this.lottieSplashScreen.hide();
      }, 3000);
[...]

Have you tried this?

It's strange, for avoiding the total freeze, what I had to do was to add 'LottieSplashScreen' as global provider in AppModule.

cheers

[monkeytronics]

Hi @timbru31. Hope you're good! Wanted to double check on the show() function. Do you reckon I'm doing something wrong, or misunderstanding how it should be used? Or is it not supported - and any plans to add it? Keen to figure out what my best next move is. Once again, awesome plugin. Huge respect for your work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[timbru31]

Not stale, still needs an investigation.