timbru31 / cordova-plugin-lottie-splashscreen

🐣 🎬 📱 Apache Cordova plugin to show Lottie animations as the splash screen with Airbnb's Lottie wrapper
https://www.npmjs.com/package/cordova-plugin-lottie-splashscreen
MIT License
131 stars 55 forks source link

White screen after install the library an call it in a Ionic-React with capacitor in IOS #453

Open aayestashn opened 2 years ago

aayestashn commented 2 years ago

Bug report

What steps will reproduce the problem?

In the index file of the React application, I put the following code.

const splash = async () => {
  await LottieSplashScreen.show(
    "https://assets10.lottiefiles.com/packages/lf20_pjaextie.json",
    true,
    1024,
    768
  );
};

splash();

Expected output

The splash screen with the animation from the Lottie file.

What do you see instead?

The splash screen opened without the animation from the Lottie file. As you can see here: image

Log file of the issue/error

To Native Cordova ->  LottieSplashScreen show LottieSplashScreen155446136 ["options": [https://assets10.lottiefiles.com/packages/lf20_pjaextie.json, 1, 1024, 768]]
⚡️  To Native ->  App addListener 47150257
⚡️  To Native ->  App addListener 47150258
To Native Cordova ->  LottieSplashScreen initialAnimationEnded LottieSplashScreen155446137 ["options": []]
⚡️  To Native ->  App addListener 47150259
⚡️  WebView loaded

Version information

npx cordova info 
npx: installed 495 in 39.984s
? May Cordova anonymously report usage statistics to improve the tool over time? (Y/n) 
You have been opted out of telemetry. To change this, run: cordova telemetry on.
Current working directory is not a Cordova-based project.
npx ionic info   

Ionic:

   Ionic CLI       : 6.17.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.1.2

Capacitor:

   Capacitor CLI      : 3.5.0
   @capacitor/android : 3.5.1
   @capacitor/core    : 3.5.0
   @capacitor/ios     : 3.5.0

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.6.0) : 1.5.0

System:

   NodeJS : v14.17.3 (/usr/local/bin/node)
   npm    : 6.14.13
   OS     : macOS Monterey

package.json

  "@awesome-cordova-plugins/core": "^5.43.0",
  "@awesome-cordova-plugins/lottie-splash-screen": "^5.43.0",
  "cordova-plugin-lottie-splashscreen": "^0.9.6",

Please provide any additional information below.

This plugin is fully compatible with Capacitor in an ionic-react application? I am following this information ionic docs

Checklist

timbru31 commented 2 years ago

Have you whitelisted the https://lottiefiles.com URL? If yes, can you provide a sample projects that shows the issue? That helps me a lot to debug issues like these.

aayestashn commented 2 years ago

Hello @timbru31

I resolved the issue, I put the following configuration in the capacitor config file.

//capacitor.config.ts
import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "test",
  appName: "my app",
  webDir: "build",
  bundledWebRuntime: false,
  cordova: {
    preferences: {
      LottieRemoteEnabled: "true",
      LottieFadeOutDuration: "0.5",
      LottieBackgroundColor: "#7931AA",
      LottieAnimationLocation: "https://assets5.lottiefiles.com/packages/lf20_gfnh7y7z.json",
      LottieHideAfterAnimationEnd: "true",
      LottieFullScreen: "true",
    },
  },
};

export default config;

The configuration in the config.xml in the IOS was made as the following:

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />

  <feature name="LottieSplashScreen">
    <param name="ios-package" value="LottieSplashScreen"/>
   <param name="onload" value="true"/>
  </feature>

  <preference name="LottieRemoteEnabled" value="true" />
  <preference name="LottieFadeOutDuration" value="0.5" />
  <preference name="LottieBackgroundColor" value="#7931AA" />
  <preference name="LottieAnimationLocation" value="https://assets5.lottiefiles.com/packages/lf20_gfnh7y7z.json" />
  <preference name="LottieHideAfterAnimationEnd" value="true" />
  <preference name="LottieFullScreen" value="true" />
</widget>

After avoiding the call of LottieSplashScreen.show() in the application the splash continued to show me a white screen in the middle, like this image.

So I made the following update in the config.xml and works fine.

from this

 <feature name="LottieSplashScreen">
    <param name="ios-package" value="LottieSplashScreen"/>
    <param name="onload" value="true"/>
  </feature>

To this

  <feature name="LottieSplashScreen">
    <param name="ios-package" value="LottieSplashScreen"/>
<!--    <param name="onload" value="true"/>-->
  </feature>

Is there a way to handle this automatically?

Thanks.

katche70 commented 2 years ago

Hi @aayestashn aayestashn same Problem here, thanks for your solution.

you can change: node_modules\cordova-plugin-lottie-splashscreen\plugin.xml `

`
SergioZhydecky commented 1 year ago

Hi dear support :) when are you going to fix the issue?

echjordan0 commented 1 year ago

Thank you for this plugin!

I'm running into this issue on iOS only and I'm using a local asset. Here are my configuration details (I don't use the JS API directly)

// capacitor.config.ts
 LottieFullScreen: 'true',
 LottieHideAfterAnimationEnd: 'true',
 LottieAnimationLocation: 'public/img/splashscreen.json',

config.xml output:

<feature name="LottieSplashScreen">
    <param name="ios-package" value="LottieSplashScreen"/>
    <param name="onload" value="true"/>
 </feature>

...

<preference name="LottieFullScreen" value="true" />
<preference name="LottieHideAfterAnimationEnd" value="true" />
<preference name="LottieAnimationLocation" value="public/img/splashscreen.json" />

Apologies for the low contrast but you can see in addition to the white square, my animation shows (and animates) but very small in the bottom right. Removing the onload property or setting it to false resolves this.

Screenshot 2023-09-27 at 6 00 05 PM

Is there a version associated with this bug?

Chatharaju commented 11 months ago

Hello All, I have the same issue where my splash screen displaying on bottom right. Any fix to this?