From f45583fd4e9c4b80d4110c5c58afa55f6cbed799 Mon Sep 17 00:00:00 2001
From: duguyihou <duguyihou@gmail.com>
Date: Wed, 6 Dec 2023 10:03:41 +1100
Subject: [PATCH] 55 tint color (#59)

* feat(Android): wip

* feat(Android): tintColor
---
 android/build.gradle                          |  1 +
 .../java/com/turboimage/TurboImageView.kt     |  1 +
 .../com/turboimage/TurboImageViewManager.kt   | 26 ++++++++++++++++---
 example/src/App.tsx                           |  3 ++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/android/build.gradle b/android/build.gradle
index fb54faf..d9205a0 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -101,6 +101,7 @@ dependencies {
   implementation "io.coil-kt:coil-gif:2.4.0"
   implementation "io.coil-kt:coil-video:2.4.0"
   implementation "io.coil-kt:coil-svg:2.4.0"
+  implementation "com.github.Commit451.coil-transformations:transformations:2.0.2"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 }
 
diff --git a/android/src/main/java/com/turboimage/TurboImageView.kt b/android/src/main/java/com/turboimage/TurboImageView.kt
index 07398d5..2b8fd08 100644
--- a/android/src/main/java/com/turboimage/TurboImageView.kt
+++ b/android/src/main/java/com/turboimage/TurboImageView.kt
@@ -11,4 +11,5 @@ class TurboImageView(reactContext: ThemedReactContext) : AppCompatImageView(reac
   var url: String? = null
   var base64Placeholder: String? = null
   var crossfade: Int = CrossfadeDrawable.DEFAULT_DURATION
+  var tintColor: String? = null
 }
diff --git a/android/src/main/java/com/turboimage/TurboImageViewManager.kt b/android/src/main/java/com/turboimage/TurboImageViewManager.kt
index 2d56fa8..8daa81e 100644
--- a/android/src/main/java/com/turboimage/TurboImageViewManager.kt
+++ b/android/src/main/java/com/turboimage/TurboImageViewManager.kt
@@ -1,10 +1,13 @@
 package com.turboimage
 
+import android.graphics.Color
 import android.widget.ImageView
 import coil.Coil
 import coil.request.CachePolicy
 import coil.request.Disposable
 import coil.request.ImageRequest
+import coil.transform.Transformation
+import com.commit451.coiltransformations.ColorFilterTransformation
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -13,7 +16,7 @@ class TurboImageViewManager : SimpleViewManager<TurboImageView>() {
   override fun getName() = REACT_CLASS
   private lateinit var requestBuilder: ImageRequest.Builder
   private var disposable: Disposable? = null
-
+  private val transformations: MutableList<Transformation> = mutableListOf()
   override fun createViewInstance(p0: ThemedReactContext): TurboImageView {
     val instance = TurboImageView(p0)
     requestBuilder = ImageRequest.Builder(p0).target { instance.setImageDrawable(it) }
@@ -23,9 +26,17 @@ class TurboImageViewManager : SimpleViewManager<TurboImageView>() {
   override fun onAfterUpdateTransaction(view: TurboImageView) {
     super.onAfterUpdateTransaction(view)
     val placeholder = view.base64Placeholder?.let { Base64Placeholder.toDrawable(view.context, it) }
-    val request = requestBuilder.data(view.url)
-      .placeholder(placeholder).diskCachePolicy(CachePolicy.DISABLED)
-      .crossfade(view.crossfade).build()
+    val color = view.tintColor?.let { Color.parseColor(it) }
+    if (color != null) {
+      transformations.add(ColorFilterTransformation(color))
+    }
+    val request = requestBuilder
+      .data(view.url)
+      .placeholder(placeholder)
+      .diskCachePolicy(CachePolicy.DISABLED)
+      .transformations(transformations)
+      .crossfade(view.crossfade)
+      .build()
     disposable = Coil.imageLoader(view.context).enqueue(request)
   }
 
@@ -58,6 +69,13 @@ class TurboImageViewManager : SimpleViewManager<TurboImageView>() {
     }
   }
 
+  @ReactProp(name = "tintColor")
+  fun setTintColor(view: TurboImageView, tintColor: String?) {
+    if (tintColor != null) {
+      view.tintColor = tintColor
+    }
+  }
+
   companion object {
     private const val REACT_CLASS = "TurboImageView"
     private val RESIZE_MODE = mapOf(
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 3b154cb..c354172 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
 import TurboImage from 'react-native-turbo-image';
-import { blurhashString } from './mockData';
+import { base64Placeholder, blurhashString } from './mockData';
 
 export default function App() {
   const imageURLs = Array.from(
@@ -28,6 +28,7 @@ export default function App() {
             showActivityIndicator
             // fadeDuration={10}
             blurhash={blurhashString}
+            base64Placeholder={base64Placeholder}
             // rounded
             // tintColor="red"
             cachePolicy="memory"