cordova-plugin-lottie-splashscreen
Advanced tools
Apache Cordova plugin to show Lottie animations as the splash screen with Airbnb's Lottie wrapper
You need to have CocoaPods installed because lottie-ios is fetched from there.
$ sudo gem install cocoapods
$ pod setup
Only cordova >= 9.0.0 and cordova-ios >= 5.0.0 are supported.
You need to specify a valid SwiftVersion (minimum is 4.2) in your config.xml. (see https://cordova.apache.org/docs/en/latest/config_ref/)
AndroidX and Kotlin support is required. Therefore only cordova-android >= 9.0.0 is supported.
If you use cordova-android <10.0.0 then you need to enable Kotlin and AndroidX in your config.xml by setting GradlePluginKotlinEnabled and AndroidXEnabled to true.
In the FAQ are some examples with common error messages and how to fix them.
$ cordova plugin add cordova-plugin-lottie-splashscreen
$ cordova plugin add https://github.com/timbru31/cordova-plugin-lottie-splashscreen.git
This Apache Cordova plugin is meant as a replacement for the stock cordova-plugin-splashscreen.
An example project can be found in the example folder.
This methods hides the current active Lottie splashscreen and destroys the views. Returns a Promise which is resolved with "OK" in the success case or the error message when it's failed.
await lottie.splashscreen.hide();
This method shows a Lottie splash screen. If no arguments are given, it defaults to the config.xml values, however you can pass (new) options here to change the behavior on runtime. Returns a Promise which is resolved with "OK" in the success case or the error message when it's failed. (For easier reading the TypeScript notation is used)
await lottie.splashscreen.show(location?: string, remote?: boolean, width?: number, height?: number)
This method listens to custom lottie events that are dispatched from the native side and invokes a configured callback function. If the event parameter is a falsy value, such as null or "", the method will listen to all Lottie events. (For easier reading the TypeScript notation is used)
type LottieEvent = 'lottieAnimationStart' | 'lottieAnimationEnd' | 'lottieAnimationCancel' | 'lottieAnimationRepeat';
lottie.splashscreen.on(event: LottieEvent, callback: (ev: Event) => void);
This method listens to a custom lottie event once and resolves the Promise once the event has been called. (For easier reading the TypeScript notation is used)
type LottieEvent = 'lottieAnimationStart' | 'lottieAnimationEnd' | 'lottieAnimationCancel' | 'lottieAnimationRepeat';
await lottie.splashscreen.once(event: LottieEvent).then(event => console.log(event));
LottieRemoteEnabled (Boolean, default false). Toggles Lottie's remote mode which allows files to be downloaded/displayed from URLs. Example: <preference name="LottieRemoteEnabled" value="true" />
LottieAnimationLocationLight (String, default ""). Location of the Lottie JSON file that should be loaded in light mode. Can either be a URL (if LottieRemoteEnabled is true) or a local JSON or ZIP file (e.g. www/lottie/error.json). <preference name="LottieAnimationLocationLight" value="https://assets.lottiefiles.com/datafiles/99nA1a7mkSF3Oz8/data.json" />
LottieAnimationLocationDark (String, default ""). Location of the Lottie JSON file that should be loaded in dark mode. Can either be a URL (if LottieRemoteEnabled is true) or a local JSON or ZIP file (e.g. www/lottie/error.json). <preference name="LottieAnimationLocationDark" value="https://assets.lottiefiles.com/datafiles/99nA1a7mkSF3Oz8/data.json" />
LottieAnimationLocation (String, default ""). Location of the Lottie JSON file that should be loaded as a fallback if there are no dark or light mode animations defined or if one of them is an invalid location. Can either be a URL (if LottieRemoteEnabled is true) or a local JSON or ZIP file (e.g. www/lottie/error.json). <preference name="LottieAnimationLocation" value="https://assets.lottiefiles.com/datafiles/99nA1a7mkSF3Oz8/data.json" />
LottieImagesLocation (String, default path of LottieAnimationLocation). Android only! Location of the Lottie images folder specified by the JSON. <preference name="LottieImagesLocation" value="www/lottie/images" />
LottieCancelOnTap (Boolean, default false). Immediately cancels the Lottie animation when the user taps on the screen. <preference name="LottieCancelOnTap" value="true" />
LottieHideTimeout (Double for iOS and Integer for Android, default 0). Duration after which the Lottie animation should be hidden. CAUTION: iOS reads this value in SECONDS, but e.g., 0.5 is supported. Android reads this value in MILLISECONDS! <preference name="LottieHideTimeout" value="?" /> <!-- CAUTION: iOS reads this value in **SECONDS**, Android reads this value in **MILLISECONDS**>
LottieBackgroundColorLight (String, default #ffffff). Background color of the overlay in light. Can be used with alpha values, too. (For more information see the 8 digits notation of RGB notation) <preference name="LottieBackgroundColorLight" value="#fff000a3" />
LottieBackgroundColorDark (String, default #ffffff). Background color of the overlay in dark mode. Can be used with alpha values, too. (For more information see the 8 digits notation of RGB notation) <preference name="LottieBackgroundColorDark" value="#fff000a3" />
LottieBackgroundColor (String, default #ffffff). Background color of the overlay as a fallback if there are no dark or light mode colors defined. Can be used with alpha values, too. (For more information see the 8 digits notation of RGB notation) <preference name="LottieBackgroundColor" value="#fff000a3" />
LottieWidth (Integer, default 200). Width of the container that's rendering the Lottie animation <preference name="LottieWidth" value="750" />
LottieHeight (Integer, default 200). Height of the container that's rendering the Lottie animation <preference name="LottieHeight" value="750" />
LottieRelativeSize (Boolean, default false). Uses width and height values as relative values. Specify them as e.g. 0.3 to have 30%. <preference name="LottieRelativeSize" value="true" />
LottieFullScreen (Boolean, default false). Renders the animation in full screen. Ignores properties above. <preference name="LottieFullScreen" value="true" />
LottieLoopAnimation (Boolean, default false). Loops the animation <preference name="LottieLoopAnimation" value="true" />
LottieAutoHideSplashScreen (Boolean, default false). Hides the Lottie splash screen when the pageDidLoad event fired <preference name="LottieAutoHideSplashScreen" value="true" />
LottieEnableHardwareAcceleration (Boolean, default false). Android only! Enables hardware acceleration for the animation view. Not really recommended since Lottie decides automatically whether the hardware mode should be used or not. <preference name="LottieEnableHardwareAcceleration" value="true" />
LottieScaleType (String, default FIT_CENTER). Android only! Scale type of the view. Can be one of the following: https://developer.android.com/reference/android/widget/ImageView.ScaleType <preference name="LottieScaleType" value="CENTER_CROP" />
LottieFadeOutDuration (Double for iOS and Integer for Android, default 0). Duration for the fade out animation. CAUTION: iOS reads this value in SECONDS, but e.g., 0.5 is supported. Android reads this value in MILLISECONDS! the Set to 0 disable the fade out animation. <preference name="LottieFadeOutDuration" value="?" /> <!-- CAUTION: iOS reads this value in **SECONDS**, Android reads this value in **MILLISECONDS**>
LottieHideAfterAnimationEnd (Boolean, default false). Hides the Lottie splash screen after the animation has been played. Do not use together with LottieAutoHideSplashScreen or LottieLoopAnimation <preference name="LottieHideAfterAnimationEnd" value="true" />
LottieCacheDisabled (Boolean, default false). Disables caching of animations. <preference name="LottieCacheDisabled" value="true" />
Built by (c) Tim Brust and contributors. Released under the MIT license.
0.10.0 (2023-02-20)
FAQs
Apache Cordova plugin to show Lottie animations as the splash screen with Airbnb's Lottie wrapper
The npm package cordova-plugin-lottie-splashscreen receives a total of 225 weekly downloads. As such, cordova-plugin-lottie-splashscreen popularity was classified as not popular.
We found that cordova-plugin-lottie-splashscreen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."