Open aayestashn opened 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.
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.
Hi @aayestashn aayestashn same Problem here, thanks for your solution.
you can change:
node_modules\cordova-plugin-lottie-splashscreen\plugin.xml
`
Hi dear support :) when are you going to fix the issue?
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?
Hello All, I have the same issue where my splash screen displaying on bottom right. Any fix to this?
Bug report
What steps will reproduce the problem?
In the index file of the React application, I put the following code.
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
Version information
package.json
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