Merge pull request #102 from nativescript-community/fix/set-color

fix: use color filter to set color on android
nativescript-community · Mar 10, 2023 · d317198 · d317198
2 parents 83f8862 + af275e4
commit d317198
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 52 deletions.
diff --git a/demo/app/App_Resources/Android/AndroidManifest.xml b/demo/app/App_Resources/Android/AndroidManifest.xml
diff --git a/demo/app/App_Resources/Android/src/main/AndroidManifest.xml b/demo/app/App_Resources/Android/src/main/AndroidManifest.xml
@@ -29,6 +29,7 @@
 			android:name="com.tns.NativeScriptActivity"
 			android:label="@string/title_activity_kimera"
 			android:configChanges="keyboardHidden|orientation|screenSize"
+			android:exported="true"
 			android:theme="@style/LaunchScreenTheme">
 
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -1,5 +1,5 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" 
-    xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
+    xmlns:Lottie="@nativescript-community/ui-lottie" navigatingTo="navigatingTo" class="page">
     <Page.actionBar>
         <ActionBar title="Airbnb Lottie" icon="" class="action-bar"></ActionBar>
     </Page.actionBar>

diff --git a/demo/app/tests/tests.js b/demo/app/tests/tests.js
@@ -1,7 +1,7 @@
 describe('lottiview class', function() {
   it('can be instantiated', function() {
     var testLottieView;
-    var LottieView = require('nativescript-lottie').LottieView;
+    var LottieView = require('@nativescript-community/ui-lottie').LottieView;
     if (LottieView) {
       testLottieView = new LottieView();
       console.log('LottieView instance: ' + testLottieView);

diff --git a/src/lottie.android.ts b/src/lottie.android.ts
@@ -17,9 +17,9 @@ import {
 } from './lottie.common';
 import { clamp } from './utils';
 
-let LottieProperty;
-let LottieKeyPath;
-let LottieValueCallback;
+let LottieProperty: typeof com.airbnb.lottie.LottieProperty;
+let LottieKeyPath: typeof com.airbnb.lottie.model.KeyPath;
+let LottieValueCallback: typeof com.airbnb.lottie.value.LottieValueCallback;
 
 const cache = new Map();
 function loadLottieJSON(iconSrc) {
@@ -190,10 +190,12 @@ export class LottieView extends LottieViewBase {
             if (!LottieKeyPath) {
                 LottieKeyPath = com.airbnb.lottie.model.KeyPath;
             }
+            // by using color filter we change all colors (STROKE_COLOR and COLOR)
+            const colorFilter = new com.airbnb.lottie.SimpleColorFilter(value.android);
             this.nativeViewProtected.addValueCallback(
-                new LottieKeyPath(nativeKeyPath),
-                LottieProperty.COLOR,
-                new LottieValueCallback(new java.lang.Integer(value.android))
+                new LottieKeyPath(nativeKeyPath as any),
+                LottieProperty.COLOR_FILTER,
+                new LottieValueCallback(colorFilter)
             );
         }
     }
@@ -222,7 +224,7 @@ export class LottieView extends LottieViewBase {
                 LottieKeyPath = com.airbnb.lottie.model.KeyPath;
             }
             this.nativeViewProtected.addValueCallback(
-                new LottieKeyPath(nativeKeyPath),
+                new LottieKeyPath(nativeKeyPath as any),
                 LottieProperty.OPACITY,
                 new LottieValueCallback(new java.lang.Integer(value * 100))
             );