@octane-xplat/lottie 0.0.1 → 0.10.0

package/README.md

@@ -1,3 +1,57 @@
-# @octane-xplat/lottie
+# `@octane-xplat/lottie`
 
-Version 0.0.1 is a reservation stub so the automated release can publish this package name. It has no supported API. Use a later release for the implementation.
+```sh
+pnpm add @octane-xplat/lottie
+```
+
+Lottie animations for Octane xplat apps: `lottie-web`'s SVG renderer on web,
+the vendored `@nativescript-community/ui-lottie` engine on iOS and Android,
+and Airbnb Lottie 4.6.1's AppKit view on macOS. The mobile plugin is a git
+submodule (`src/vendor/ui-lottie`) registered through `nativescript.platforms`.
+AppKit compiles its pinned Swift source as part of the app's native leaf build;
+apps do not add another engine dependency.
+
+```tsx
+import { Lottie } from '@octane-xplat/lottie'
+
+export function Preview() {
+	return (
+		<Lottie
+			src="https://example.com/anim.json"
+			autoPlay
+			loop
+			fit="contain"
+			onLoaded={(event) => console.log(event.duration)}
+			onEnded={() => console.log('Done')}
+		/>
+	)
+}
+```
+
+`data` (an inline animation object) wins over `src` when both are given.
+Controlled `playing`/`progress`/`speed` props are optional — unset, the
+animation is uncontrolled and the `ref` handle still drives it. Progress
+is always normalized 0..1 and durations are milliseconds on every target
+(the iOS plugin natively reports seconds; the leaf normalizes).
+
+On AppKit, use inline `data`, raw JSON in `src`, an absolute JSON file path,
+or a `file://` or HTTPS URL. Relative paths, `~/`/`res://` bundle aliases,
+HTTP URLs, `.lottie`/`.zip` archives, and external image assets are not
+supported. See [the platform limits](../../docs/app/primitives.md#lottie-animations)
+and [the investigation record](../../docs/notes/lottie-appkit-investigation.md)
+for the complete boundary and runtime evidence.
+
+```tsx
+import { Lottie } from '@octane-xplat/lottie'
+
+export function InlineAnimation({ animation }: { animation: object }) {
+	return <Lottie data={animation} autoPlay loop={false} fit="contain" />
+}
+```
+
+Per-target limits — including the expression/CSP boundary on web — are
+recorded in [known limits](../../docs/verify/known-limits.md). Exercised by
+[`LottieDemo`](../demos/src/LottieDemo.tsrx).
+
+This is a git submodule checkout: after cloning run
+`git submodule update --init` before building the workspace.

package/dist/native/cx.mobile.js

@@ -0,0 +1,11 @@
+//#region src/cx.mobile.ts
+/** NS `className` splits on ' ' only, and the universal driver applies the
+*  prop via `String(value)` — an array would arrive comma-joined and match
+*  no class at all. Native leaves normalize through cx() before handing
+*  className to an intrinsic. (The DOM renderer already flattens arrays,
+*  so web leaves don't need this.) */
+function cx(...parts) {
+	return parts.flat(Infinity).filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/dist/native/escape-props.js

@@ -0,0 +1,39 @@
+import { isAndroid, isIOS } from "@nativescript/core";
+//#region src/escape-props.ts
+/** Apply only the active device's escape bag after the primitive's own props. */
+function applyEscapeProps(view, props) {
+	if (!view) return;
+	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
+	if (bag) Object.assign(view, bag);
+}
+var NATIVE_ACCESSIBILITY_ROLES = {
+	button: "button",
+	link: "link",
+	search: "search",
+	image: "image",
+	heading: "header",
+	adjustable: "adjustable",
+	summary: "summary",
+	text: "text",
+	none: "none",
+	progressbar: "progressBar",
+	checkbox: "checkbox",
+	switch: "switch",
+	radio: "radioButton",
+	spinbutton: "spinButton",
+	tab: "button"
+};
+/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
+function nativeAccessibilityRole(role) {
+	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : void 0;
+}
+/** NativeScript's AccessibilityState is a single enum value, unlike the
+*  web's independent ARIA booleans. Priority follows the strongest state. */
+function nativeAccessibilityState(state) {
+	if (state?.disabled) return "disabled";
+	if (state?.selected) return "selected";
+	if (state?.checked === true) return "checked";
+	if (state?.checked === false) return "unchecked";
+}
+//#endregion
+export { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState };

package/dist/native/index.js

@@ -0,0 +1,183 @@
+import { cx } from "./cx.mobile.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { layoutChildProps } from "./layout-child.js";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
+import { isAndroid } from "@nativescript/core";
+import { LottieView } from "./vendor/ui-lottie";
+//#region src/Lottie.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(10);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatlottie",
+	"propsSlot": 0
+});
+registerElement("xplatlottie", LottieView);
+var clamp01 = (n) => Math.min(1, Math.max(0, n));
+var STRETCH = {
+	contain: "aspectFit",
+	cover: "aspectFill",
+	fill: "fill"
+};
+function durationMs(v) {
+	const d = v.duration ?? 0;
+	return isAndroid ? d : Math.max(0, d) * 1e3;
+}
+function currentProgress(v) {
+	const nv = v.nativeViewProtected;
+	return isAndroid ? nv?.getProgress?.() ?? 0 : nv?.currentProgress ?? 0;
+}
+function stopView(v) {
+	if (isAndroid) v.cancelAnimation();
+	else v.nativeViewProtected?.stop();
+	v.progress = 0;
+}
+var Lottie = defineUniversalComponent("nativescript", function Lottie(props) {
+	const host = useRef(null, _h$0);
+	const appliedSrc = useRef(void 0, _h$1);
+	const loadedRef = useRef(false, _h$2);
+	useImperativeHandle(props.ref, () => handle(host.current), [], _h$3);
+	const bindHost = useCallback((v) => {
+		host.current = v;
+	}, [], _h$4);
+	const wantPlay = () => props.playing ?? props.autoPlay ?? true;
+	const onReady = () => {
+		const v = host.current;
+		if (!v || loadedRef.current) return;
+		loadedRef.current = true;
+		if (props.speed !== void 0) v.speed = props.speed;
+		if (props.progress !== void 0) v.progress = clamp01(props.progress);
+		props.onLoaded?.({ duration: durationMs(v) });
+		if (wantPlay() && !v.isAnimating()) v.playAnimation();
+	};
+	useEffect(() => {
+		const v = host.current;
+		if (!v) return;
+		applyEscapeProps(v, props);
+		v.stretch = STRETCH[props.fit ?? "contain"];
+		v.async = true;
+		v.on(LottieView.compositionLoadedEvent, () => onReady());
+		v.on(LottieView.loadFailedEvent, (e) => {
+			loadedRef.current = false;
+			props.onError?.({ message: e?.error ? String(e.error) : "load failed" });
+		});
+		v.completionBlock = (finished) => {
+			if (finished) props.onEnded?.();
+		};
+	}, [], _h$5);
+	useEffect(() => {
+		const v = host.current;
+		if (!v) return;
+		const src = props.data ? JSON.stringify(props.data) : props.src;
+		if (src === appliedSrc.current) return;
+		appliedSrc.current = src;
+		loadedRef.current = false;
+		v.src = src ?? "";
+	}, [props.src, props.data], _h$6);
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.playing === void 0) return;
+		if (props.playing) {
+			if (loadedRef.current) v.resumeAnimation();
+		} else v.pauseAnimation();
+	}, [props.playing], _h$7);
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.progress === void 0 || !loadedRef.current) return;
+		v.progress = clamp01(props.progress);
+	}, [props.progress], _h$8);
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.speed === void 0 || !loadedRef.current) return;
+		v.speed = props.speed;
+	}, [props.speed], _h$9);
+	const handle = (v) => ({
+		play: () => v.resumeAnimation(),
+		pause: () => v.pauseAnimation(),
+		stop: () => stopView(v),
+		seekTo: (p) => {
+			v.progress = clamp01(p);
+		},
+		setSpeed: (n) => {
+			v.speed = n;
+		},
+		progress: () => currentProgress(v),
+		duration: () => durationMs(v),
+		isPlaying: () => v.isAnimating(),
+		native: v
+	});
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"ref",
+			bindHost
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			cx(props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		["spread", layoutChildProps(props)],
+		[
+			"set",
+			"loop",
+			props.loop ?? false
+		],
+		[
+			"set",
+			"accessible",
+			props.accessible
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			props.accessibilityLabel
+		],
+		[
+			"set",
+			"accessibilityRole",
+			nativeAccessibilityRole(props.accessibilityRole)
+		],
+		[
+			"set",
+			"accessibilityHint",
+			props.accessibilityHint
+		],
+		[
+			"set",
+			"accessibilityValue",
+			props.accessibilityValue
+		],
+		[
+			"set",
+			"accessibilityState",
+			nativeAccessibilityState(props.accessibilityState)
+		],
+		[
+			"set",
+			"accessibilityLiveRegion",
+			props.accessibilityLiveRegion
+		]
+	])]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Lottie };

package/dist/native/layout-child.js

@@ -0,0 +1,38 @@
+//#region src/layout-child.ts
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** NativeScript reads these attributes from each child view during parent
+*  layout. Values are forwarded with NativeScript's own property names.
+*  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
+*  the host flexboxlayout itself — its own attributes, not child metadata. */
+function layoutChildProps(props) {
+	const result = {};
+	for (const key of [
+		"row",
+		"col",
+		"rowSpan",
+		"colSpan",
+		"dock",
+		"left",
+		"top",
+		"flexGrow",
+		"flexShrink",
+		"alignSelf",
+		"order"
+	]) if (props[key] !== void 0) result[key] = props[key];
+	if (props.justifyContent !== void 0) result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) result.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) result.gap = props.gap;
+	if (props.rowGap !== void 0) result.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) result.columnGap = props.columnGap;
+	return result;
+}
+//#endregion
+export { layoutChildProps };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "a8ee13bf-cf76-4937-9582-88372b98e845",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/native/vendor/ui-lottie/index.android.js

@@ -0,0 +1,286 @@
+import { LottieViewBase, autoPlayProperty, keyPathColorsProperty, loopProperty, progressProperty, renderModeProperty, srcProperty, stretchProperty } from "./src/lottie/index.common.js";
+import { clamp } from "./src/lottie/utils.js";
+import { Color, File, Http, Utils, knownFolders, path } from "@nativescript/core";
+//#region src/vendor/ui-lottie/src/lottie/index.android.ts
+/**********************************************************************************
+* (c) 2017, Brad Martin.
+* Licensed under the MIT license.
+*
+* Version 1.0.0                                           bradwaynemartin@gmail.com
+**********************************************************************************/
+var LottieProperty;
+var LottieKeyPath;
+var LottieValueCallback;
+var LottieCompositionFactory;
+var cache = /* @__PURE__ */ new Map();
+async function loadLottieJSON(iconSrc) {
+	if (!cache.has(iconSrc)) {
+		const r = await File.fromPath(iconSrc).readText();
+		cache.set(iconSrc, r);
+		return r;
+	}
+	return cache.get(iconSrc);
+}
+function loadLottieJSONSync(iconSrc) {
+	if (!cache.has(iconSrc)) {
+		const r = File.fromPath(iconSrc).readTextSync();
+		cache.set(iconSrc, r);
+		return r;
+	}
+	return cache.get(iconSrc);
+}
+var RenderMode = {
+	get AUTOMATIC() {
+		return com.airbnb.lottie.RenderMode.AUTOMATIC;
+	},
+	get HARDWARE() {
+		return com.airbnb.lottie.RenderMode.HARDWARE;
+	},
+	get SOFTWARE() {
+		return com.airbnb.lottie.RenderMode.SOFTWARE;
+	}
+};
+var LottieView = class extends LottieViewBase {
+	constructor(..._args) {
+		super(..._args);
+		this._cancelled = false;
+	}
+	createNativeView() {
+		return new com.nativescript.lottie.LottieAnimationView(this._context);
+	}
+	get completionBlock() {
+		return this._completionBlock;
+	}
+	set completionBlock(block) {
+		this._completionBlock = block;
+		if (block) {
+			if (!this.animatorListener) {
+				const that = new WeakRef(this);
+				this.animatorListener = new android.animation.Animator.AnimatorListener({
+					onAnimationCancel: (_animator) => {
+						const owner = that?.get();
+						if (owner) owner._cancelled = true;
+					},
+					onAnimationEnd: (_animator) => {
+						const owner = that?.get();
+						if (owner?._completionBlock) owner._completionBlock(!owner._cancelled);
+						if (owner) owner._cancelled = false;
+					},
+					onAnimationRepeat: (_animator) => {},
+					onAnimationStart: (_animator) => {}
+				});
+				if (this.nativeViewProtected) this.nativeViewProtected.addAnimatorListener(this.animatorListener);
+			}
+		} else if (this.animatorListener) {
+			if (this.nativeViewProtected) this.nativeViewProtected.removeAnimatorListener(this.animatorListener);
+			this.animatorListener = null;
+		}
+	}
+	initNativeView() {
+		if (this.animatorListener) this.nativeViewProtected.addAnimatorListener(this.animatorListener);
+		if (!this.loadedListener) {
+			const that = new WeakRef(this);
+			this.loadedListener = new com.airbnb.lottie.LottieOnCompositionLoadedListener({ onCompositionLoaded: (composition) => {
+				const owner = that?.get();
+				if (owner) setTimeout(() => {
+					owner.notify({
+						eventName: LottieViewBase.compositionLoadedEvent,
+						composition
+					});
+					if (owner.autoPlay && !owner.isAnimating()) owner.playAnimation();
+				}, 0);
+			} });
+		}
+		this.nativeViewProtected.addLottieOnCompositionLoadedListener(this.loadedListener);
+		const that = new WeakRef(this);
+		this.nativeViewProtected.setFailureListener(new com.airbnb.lottie.LottieListener({ onResult: (result) => {
+			const owner = that?.get();
+			if (owner) owner.notify({
+				eventName: LottieViewBase.loadFailedEvent,
+				error: result
+			});
+		} }));
+	}
+	disposeNativeView() {
+		if (this.animatorListener) this.nativeViewProtected.removeAnimatorListener(this.animatorListener);
+		if (this.loadedListener) this.nativeViewProtected.removeLottieOnCompositionLoadedListener(this.loadedListener);
+		super.disposeNativeView();
+	}
+	setColor(value, keyPath) {
+		const nativeView = this.nativeViewProtected;
+		if (nativeView && value && keyPath && keyPath.length) {
+			if (keyPath[keyPath.length - 1].toLowerCase() === "color") {
+				keyPath = [...keyPath];
+				keyPath.pop();
+				if (keyPath.length === 0) return;
+			}
+			const nativeKeyPath = Array.create(java.lang.String, keyPath.length);
+			for (let index = 0; index < keyPath.length; index++) nativeKeyPath[index] = keyPath[index];
+			if (!LottieProperty) LottieProperty = com.airbnb.lottie.LottieProperty;
+			if (!LottieValueCallback) LottieValueCallback = com.airbnb.lottie.value.LottieValueCallback;
+			if (!LottieKeyPath) LottieKeyPath = com.airbnb.lottie.model.KeyPath;
+			const color = value instanceof Color ? value : new Color(value);
+			const colorFilter = new com.airbnb.lottie.SimpleColorFilter(color.android);
+			nativeView.addValueCallback(new LottieKeyPath(nativeKeyPath), LottieProperty.COLOR_FILTER, new LottieValueCallback(colorFilter));
+		}
+	}
+	setOpacity(value, keyPath) {
+		if (this.nativeViewProtected && value != null && keyPath && keyPath.length) {
+			if (keyPath[keyPath.length - 1].toLowerCase() === "opacity") {
+				keyPath = [...keyPath];
+				keyPath.pop();
+				if (keyPath.length === 0) return;
+			}
+			const nativeKeyPath = Array.create(java.lang.String, keyPath.length);
+			keyPath.forEach((key, index) => {
+				nativeKeyPath[index] = new java.lang.String(key);
+			});
+			value = clamp(value);
+			if (!LottieProperty) LottieProperty = com.airbnb.lottie.LottieProperty;
+			if (!LottieValueCallback) LottieValueCallback = com.airbnb.lottie.value.LottieValueCallback;
+			if (!LottieKeyPath) LottieKeyPath = com.airbnb.lottie.model.KeyPath;
+			this.nativeViewProtected.addValueCallback(new LottieKeyPath(nativeKeyPath), LottieProperty.OPACITY, new LottieValueCallback(new java.lang.Integer(value * 255)));
+		}
+	}
+	playAnimation() {
+		if (this.nativeViewProtected) {
+			this.nativeViewProtected.setMinAndMaxProgress(0, 1);
+			this.nativeViewProtected.playAnimation();
+		}
+	}
+	playAnimationFromProgressToProgress(startProgress, endProgress) {
+		if (this.nativeViewProtected) {
+			startProgress = startProgress ? clamp(startProgress) : 0;
+			endProgress = endProgress ? clamp(endProgress) : 1;
+			this.nativeViewProtected.setMinAndMaxProgress(startProgress, endProgress);
+			this.nativeViewProtected.playAnimation();
+		}
+	}
+	isAnimating() {
+		return this.nativeViewProtected ? this.nativeViewProtected.isAnimating() : false;
+	}
+	get speed() {
+		return this.nativeViewProtected ? this.nativeViewProtected.getSpeed() : void 0;
+	}
+	set speed(value) {
+		if (this.nativeViewProtected && value) this.nativeViewProtected.setSpeed(value);
+	}
+	get duration() {
+		return this.nativeViewProtected ? this.nativeViewProtected.getDuration() : void 0;
+	}
+	cancelAnimation() {
+		if (this.nativeViewProtected) this.nativeViewProtected.cancelAnimation();
+	}
+	pauseAnimation() {
+		if (this.nativeViewProtected) this.nativeViewProtected.pauseAnimation();
+	}
+	resumeAnimation() {
+		if (this.nativeViewProtected) this.nativeViewProtected.resumeAnimation();
+	}
+	[srcProperty.setNative](src) {
+		try {
+			if (!LottieCompositionFactory) LottieCompositionFactory = com.airbnb.lottie.LottieCompositionFactory;
+			const view = this.nativeViewProtected;
+			let result;
+			if (!src) {} else if (src[0] === "{") {
+				if (this.async) view.setAnimationFromJson(src, null);
+				else result = LottieCompositionFactory.fromJsonStringSync(src, null);
+			} else if (/^https?:/i.test(src)) {
+				const match = /\.(zip|lottie|json)(?=[?#]|$)/i.exec(src);
+				const dest = path.join(knownFolders.temp().path, `lottie-${Date.now()}${match ? match[0].toLowerCase() : ".json"}`);
+				Http.getFile(src, dest).then(() => {
+					this.src = dest;
+				}).catch((error) => {
+					console.error(error);
+					this.notify({
+						eventName: "loadFailed",
+						error
+					});
+				});
+			} else if (src.startsWith(Utils.RESOURCE_PREFIX)) {
+				const resName = src.replace(Utils.RESOURCE_PREFIX, "");
+				if (this.async) view.setAnimation(resName);
+				else result = com.airbnb.lottie.LottieCompositionFactory.fromAssetSync(this._context, resName);
+			} else {
+				if (!/.(json|zip|lottie)$/.test(src)) src += ".json";
+				if (src[0] === "~") {
+					if (this.async) view.setAnimation("app/" + src.substring(2));
+					else result = com.airbnb.lottie.LottieCompositionFactory.fromAssetSync(this._context, "app/" + src.substring(2));
+				} else if (!src.startsWith("file:/") && src[0] !== "/") {
+					if (this.async) view.setAnimation("app/" + src);
+					else result = com.airbnb.lottie.LottieCompositionFactory.fromAssetSync(this._context, src);
+				} else {
+					const filePath = src.startsWith("file:") ? src.substring(5) : src;
+					if (/\.(zip|lottie)$/i.test(filePath)) {
+						const stream = new java.util.zip.ZipInputStream(new java.io.FileInputStream(filePath));
+						if (this.async) {
+							const owner = new WeakRef(this);
+							com.airbnb.lottie.LottieCompositionFactory.fromZipStream(stream, null).addListener(new com.airbnb.lottie.LottieListener({ onResult: (composition) => {
+								const view = owner.get()?.nativeViewProtected;
+								if (view) view.setComposition(composition);
+							} })).addFailureListener(new com.airbnb.lottie.LottieListener({ onResult: (error) => console.error(error) }));
+						} else result = com.airbnb.lottie.LottieCompositionFactory.fromZipStreamSync(stream, null);
+					} else if (this.async) loadLottieJSON(src).then((result) => {
+						if (this.nativeViewProtected) this.nativeViewProtected.setAnimationFromJson(result, null);
+					});
+					else result = LottieCompositionFactory.fromJsonStringSync(loadLottieJSONSync(src), null);
+				}
+			}
+			if (result) {
+				if (result.getException()) {
+					console.error(result.getException());
+					this.notify({
+						eventName: LottieViewBase.loadFailedEvent,
+						error: result.getException()
+					});
+				} else view.setComposition(result.getValue());
+			}
+			if (this.autoPlay) this.playAnimation();
+		} catch (error) {
+			console.error(error);
+			this.notify({
+				eventName: LottieViewBase.loadFailedEvent,
+				error
+			});
+		}
+	}
+	[loopProperty.setNative](loop) {
+		this.nativeViewProtected.setRepeatCount(loop ? -1 : 0);
+	}
+	[progressProperty.setNative](value) {
+		this.nativeViewProtected.setProgress(value);
+	}
+	[renderModeProperty.setNative](renderMode) {
+		this.nativeViewProtected.setRenderMode(renderMode);
+	}
+	[keyPathColorsProperty.setNative](value) {
+		Object.keys(value).forEach((k) => this.setColor(value[k], k.split("|")));
+	}
+	[autoPlayProperty.setNative](autoPlay) {
+		if (autoPlay) {
+			if (!this.isAnimating()) this.playAnimation();
+		} else {
+			this.cancelAnimation();
+			if (this.progress) this.nativeViewProtected.setProgress(this.progress);
+		}
+	}
+	[stretchProperty.getDefault]() {
+		return "aspectFit";
+	}
+	[stretchProperty.setNative](value) {
+		switch (value) {
+			case "aspectFit":
+				this.nativeViewProtected.setScaleType(android.widget.ImageView.ScaleType.FIT_CENTER);
+				break;
+			case "aspectFill":
+				this.nativeViewProtected.setScaleType(android.widget.ImageView.ScaleType.CENTER_CROP);
+				break;
+			case "fill":
+				this.nativeViewProtected.setScaleType(android.widget.ImageView.ScaleType.FIT_XY);
+				break;
+			default: this.nativeViewProtected.setScaleType(android.widget.ImageView.ScaleType.MATRIX);
+		}
+	}
+};
+//#endregion
+export { LottieView, RenderMode };