55 tint color (#59)

* feat(Android): wip

* feat(Android): tintColor

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"
 }
 

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
 }

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(

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"