cordova-plugin-lottie-splashscreen

Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper

Supported platforms

• iOS (9+) (with cordova-ios >= 5.0.0 only)
• Android (with cordova-android >= 8.0.0 only)

Planned platforms

• macOS

Prerequisites/Warnings

iOS

You need to have CocoaPods installed because lottie-ios is fetched from there.

$ sudo gem install cocoapods
$ pod setup

Caveats

With v0.6.0 and newer only cordova >= 9.0.0 and cordova-ios >= 5.0.0 are supported.
If you can't upgrade please stick to v0.5.X.

Android

AndroidX support is required for lottie-android >= 2.8.0.
In order to use version >= v0.7.0 you need to configure AndroidX support.
In case you do not manually edit Android Studio file, these two plugins might be required: https://github.com/dpa99c/cordova-plugin-androidx and https://github.com/dpa99c/cordova-plugin-androidx-adapter.
In the FAQ are some examples with common error messages and how to fix them.

Installation

from npm (recommended)

$ cordova plugin add cordova-plugin-lottie-splashscreen

from git (unstable)

$ cordova plugin add https://github.com/timbru31/cordova-plugin-cordova-plugin-lottie-splashscreen.git

Usage

This Cordova plugin is meant as a replacement for the stock cordova-plugin-splashscreen.
An example project can be found in the example folder.

Methods

• lottie.splashscreen.hide
• lottie.splashscreen.show

lottie.splashscreen.hide

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();

lottie.splashscreen.show

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)

Preferences

• LottieRemoteEnabled (Boolean, default false). Toggles Lottie's remote mode which allows files to be downloaded/displayed from URLs. Example:

    <preference name="LottieRemoteEnabled" value="true" />

• LottieAnimationLocation (String, default ""). Location of the Lottie JSON file that should be loaded. 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, default 0). Duration in seconds after which the Lottie animation should be hidden.

    <preference name="LottieHideTimeout" value="10" />

• LottieBackgroundColor (String, default #ffffff). Background color of the overlay. 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" />

---

Built by (c) Tim Brust and contributors. Released under the MIT license.