fix(android): reapply tintColor when Image src changes

owenthcarey · owenthcarey · commit 09312a70a809 · 2026-03-24T15:40:21.000-07:00
diff --git a/apps/toolbox/src/pages/image-handling.ts b/apps/toolbox/src/pages/image-handling.ts
@@ -10,11 +10,16 @@ export function navigatingTo(args: EventData) {
 
 export class DemoModel extends Observable {
 	addingPhoto = false;
+	tintTestSrc = 'res://icon';
 	symbolWiggleEffect = ImageSymbolEffects.Wiggle;
 	symbolBounceEffect = ImageSymbolEffects.Bounce;
 	symbolBreathEffect = ImageSymbolEffects.Breathe;
 	symbolRotateEffect = ImageSymbolEffects.Rotate;
 
+	toggleTintTestSrc() {
+		this.set('tintTestSrc', this.tintTestSrc === 'res://icon' ? 'res://add_to_fav' : 'res://icon');
+	}
+
 	pickImage() {
 		const context = create({
 			mode: 'single',
diff --git a/apps/toolbox/src/pages/image-handling.xml b/apps/toolbox/src/pages/image-handling.xml
@@ -6,6 +6,19 @@
 
     <StackLayout class="p-20">
 
+        <Label text="tintColor + dynamic src" class="h2" />
+        <Label text="Tap the image to swap src between icon and add_to_fav. The red tint should persist after each swap." textWrap="true" />
+        <GridLayout columns="auto, *, auto" rows="auto" class="m-t-10 m-b-10">
+            <Image col="0" src="{{ tintTestSrc }}" tintColor="#E53935" width="80" height="80" tap="{{ toggleTintTestSrc }}" stretch="aspectFit" />
+            <StackLayout col="1" verticalAlignment="center" class="m-l-10">
+                <Label text="{{ 'src: ' + tintTestSrc }}" textWrap="true" />
+                <Label text="tintColor: #E53935" />
+                <Label text="(tap image to toggle)" class="footnote" />
+            </StackLayout>
+        </GridLayout>
+
+        <ContentView height="1" width="100%" backgroundColor="#efefef" margin="10" />
+
         <Label text="Test Memory leaks with image picking and saving to device. Best to profile from platform IDE like Xcode." textWrap="true" />
 
         <Button text="Pick and Save Image" tap="{{ pickImage }}" />
diff --git a/packages/core/ui/image/index.android.ts b/packages/core/ui/image/index.android.ts
@@ -37,6 +37,9 @@ function initializeImageLoadedListener() {
 			const owner = this.owner;
 			if (owner) {
 				owner.isLoading = false;
+				if (success) {
+					owner._reapplyTintColor();
+				}
 			}
 		}
 	}
@@ -78,6 +81,13 @@ export class Image extends ImageBase {
 		this.nativeViewProtected.setImageMatrix(new android.graphics.Matrix());
 	}
 
+	public _reapplyTintColor(): void {
+		const tintColor = this.style?.tintColor;
+		if (tintColor && this.nativeViewProtected) {
+			this.nativeViewProtected.setColorFilter(tintColor.android);
+		}
+	}
+
 	public _createImageSourceFromSrc(value: string | ImageSource | ImageAsset) {
 		const imageView = this.nativeViewProtected;
 		if (!imageView) {
@@ -181,6 +191,7 @@ export class Image extends ImageBase {
 			nativeView.setRotationAngle(0);
 			nativeView.setImageBitmap(null);
 		}
+		this._reapplyTintColor();
 	}
 
 	[srcProperty.getDefault](): any {

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,9 @@ function initializeImageLoadedListener() {`
`37`	`37`	`const owner = this.owner;`
`38`	`38`	`if (owner) {`
`39`	`39`	`owner.isLoading = false;`
	`40`	`+ if (success) {`
	`41`	`+ owner._reapplyTintColor();`
	`42`	`+ }`
`40`	`43`	`}`
`41`	`44`	`}`
`42`	`45`	`}`
`@@ -78,6 +81,13 @@ export class Image extends ImageBase {`
`78`	`81`	`this.nativeViewProtected.setImageMatrix(new android.graphics.Matrix());`
`79`	`82`	`}`
`80`	`83`
	`84`	`+ public _reapplyTintColor(): void {`
	`85`	`+ const tintColor = this.style?.tintColor;`
	`86`	`+ if (tintColor && this.nativeViewProtected) {`
	`87`	`+ this.nativeViewProtected.setColorFilter(tintColor.android);`
	`88`	`+ }`
	`89`	`+ }`
	`90`	`+`
`81`	`91`	`public _createImageSourceFromSrc(value: string \| ImageSource \| ImageAsset) {`
`82`	`92`	`const imageView = this.nativeViewProtected;`
`83`	`93`	`if (!imageView) {`
`@@ -181,6 +191,7 @@ export class Image extends ImageBase {`
`181`	`191`	`nativeView.setRotationAngle(0);`
`182`	`192`	`nativeView.setImageBitmap(null);`
`183`	`193`	`}`
	`194`	`+ this._reapplyTintColor();`
`184`	`195`	`}`
`185`	`196`
`186`	`197`	`[srcProperty.getDefault](): any {`