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

[aayestashn]

Bug report

What steps will reproduce the problem?

• Install the dependencies in a React Ionic with Capacitor project.

$ npm install cordova-plugin-lottie-splashscreen 
$ npm install @awesome-cordova-plugins/lottie-splash-screen 
$ ionic cap sync

• Open in Xcode and run the build.

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

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

[timbru31]

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]

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]

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

you can change: node_modules\cordova-plugin-lottie-splashscreen\plugin.xml <platform name="ios"> <config-file target="config.xml" parent="/*"> <feature name="LottieSplashScreen"> <param name="ios-package" value="LottieSplashScreen" /> <!-- <param name="onload" value="true"/>--> </feature> </config-file>

[SergioZhydecky]

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

[echjordan0]

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.

Is there a version associated with this bug?

[Chatharaju]

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