Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blank white screen on Android #327

Open
3 tasks
monkeytronics opened this issue Jun 30, 2021 · 11 comments
Open
3 tasks

Blank white screen on Android #327

monkeytronics opened this issue Jun 30, 2021 · 11 comments

Comments

@monkeytronics
Copy link

monkeytronics commented Jun 30, 2021

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 ([email protected])
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/[email protected]" width="114" //\
    /\icon height="40" src="resources/ios/icon/icon-40.png" width="40" //\
    /\icon height="80" src="resources/ios/icon/[email protected]" width="80" //\
    /\icon height="120" src="resources/ios/icon/[email protected]" width="120" //\
    /\icon height="50" src="resources/ios/icon/icon-50.png" width="50" //\
    /\icon height="100" src="resources/ios/icon/[email protected]" width="100" //\
    /\icon height="60" src="resources/ios/icon/icon-60.png" width="60" //\
    /\icon height="120" src="resources/ios/icon/[email protected]" width="120" //\
    /\icon height="180" src="resources/ios/icon/[email protected]" width="180" //\
    /\icon height="72" src="resources/ios/icon/icon-72.png" width="72" //\
    /\icon height="144" src="resources/ios/icon/[email protected]" width="144" //\
    /\icon height="76" src="resources/ios/icon/icon-76.png" width="76" //\
    /\icon height="152" src="resources/ios/icon/[email protected]" width="152" //\
    /\icon height="167" src="resources/ios/icon/[email protected]" width="167" //\
    /\icon height="29" src="resources/ios/icon/icon-small.png" width="29" //\
    /\icon height="58" src="resources/ios/icon/[email protected]" width="58" //\
    /\icon height="87" src="resources/ios/icon/[email protected]" 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/[email protected]" width="40" //\
    /\icon height="60" src="resources/ios/icon/[email protected]" width="60" //\
    /\icon height="29" src="resources/ios/icon/icon-29.png" width="29" //\
    /\icon height="58" src="resources/ios/icon/[email protected]" width="58" //\
    /\icon height="87" src="resources/ios/icon/[email protected]" width="87" //\
    /\icon height="48" src="resources/ios/icon/[email protected]" width="48" //\
    /\icon height="55" src="resources/ios/icon/[email protected]" width="55" //\
    /\icon height="88" src="resources/ios/icon/[email protected]" width="88" //\
    /\icon height="172" src="resources/ios/icon/[email protected]" width="172" //\
    /\icon height="196" src="resources/ios/icon/[email protected]" width="196" //\
    /\icon height="216" src="resources/ios/icon/[email protected]" 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
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

timbru31 commented Jul 2, 2021

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
Copy link
Author

monkeytronics commented Jul 2, 2021

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
Copy link
Author

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
Copy link

gentooza commented Jul 9, 2021

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
Copy link
Author

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
Copy link

gentooza commented Jul 9, 2021

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
Copy link
Author

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
Copy link

stale bot commented Apr 16, 2022

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.

@stale stale bot added the wontfix label Apr 16, 2022
@timbru31
Copy link
Owner

Not stale, still needs an investigation.

@stale stale bot removed the wontfix label Apr 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants