[skip ci] Plumbing to set filters on Android views (facebook#44453)

Summary:

This works similar to how `transform` is parsed in that it sets tags on the View to actually update the prop when all the prop setters are done being called since the parsing of the array is not very trivial. Besides that it is pretty simple and just calls into `FilterHelper` and uses `setRenderEffect`: https://developer.android.com/reference/android/view/View#setRenderEffect(android.graphics.RenderEffect).

That API is only exposed in version 31 of the SDK so it is gated accordingly.

Reviewed By: NickGerleman

Differential Revision: D54640600

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3970,6 +3970,7 @@ public abstract class com/facebook/react/uimanager/BaseViewManager : com/faceboo
 	public fun setClick (Landroid/view/View;Z)V
 	public fun setClickCapture (Landroid/view/View;Z)V
 	public fun setElevation (Landroid/view/View;F)V
+	public fun setFilter (Landroid/view/View;Lcom/facebook/react/bridge/ReadableArray;)V
 	public fun setImportantForAccessibility (Landroid/view/View;Ljava/lang/String;)V
 	public fun setMoveShouldSetResponder (Landroid/view/View;Z)V
 	public fun setMoveShouldSetResponderCapture (Landroid/view/View;Z)V
@@ -4039,6 +4040,7 @@ public abstract interface class com/facebook/react/uimanager/BaseViewManagerInte
 	public abstract fun setBorderTopLeftRadius (Landroid/view/View;F)V
 	public abstract fun setBorderTopRightRadius (Landroid/view/View;F)V
 	public abstract fun setElevation (Landroid/view/View;F)V
+	public abstract fun setFilter (Landroid/view/View;Lcom/facebook/react/bridge/ReadableArray;)V
 	public abstract fun setImportantForAccessibility (Landroid/view/View;Ljava/lang/String;)V
 	public abstract fun setNativeId (Landroid/view/View;Ljava/lang/String;)V
 	public abstract fun setOpacity (Landroid/view/View;F)V
@@ -5334,6 +5336,7 @@ public final class com/facebook/react/uimanager/ViewProps {
 	public static final field ELLIPSIZE_MODE Ljava/lang/String;
 	public static final field ENABLED Ljava/lang/String;
 	public static final field END Ljava/lang/String;
+	public static final field FILTER Ljava/lang/String;
 	public static final field FLEX Ljava/lang/String;
 	public static final field FLEX_BASIS Ljava/lang/String;
 	public static final field FLEX_DIRECTION Ljava/lang/String;

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -8,6 +8,7 @@
 package com.facebook.react.uimanager;
 
 import android.graphics.Color;
+import android.graphics.Paint;
 import android.os.Build;
 import android.text.TextUtils;
 import android.view.View;
@@ -104,6 +105,10 @@ protected T prepareToRecycleView(@NonNull ThemedReactContext reactContext, T vie
     view.setTag(R.id.invalidate_transform, null);
     view.removeOnLayoutChangeListener(this);
 
+    view.setTag(R.id.use_hardware_layer, null);
+    view.setTag(R.id.filter, null);
+    applyFilter(view, null);
+
     // setShadowColor
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
       view.setOutlineAmbientShadowColor(Color.BLACK);
@@ -181,6 +186,12 @@ public void setBackgroundColor(@NonNull T view, int backgroundColor) {
     view.setBackgroundColor(backgroundColor);
   }
 
+  @Override
+  @ReactProp(name = ViewProps.FILTER)
+  public void setFilter(@NonNull T view, @Nullable ReadableArray filter) {
+    view.setTag(R.id.filter, filter);
+  }
+
   @Override
   @ReactProp(name = ViewProps.TRANSFORM)
   public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) {
@@ -235,7 +246,7 @@ public void setZIndex(@NonNull T view, float zIndex) {
   @Override
   @ReactProp(name = ViewProps.RENDER_TO_HARDWARE_TEXTURE)
   public void setRenderToHardwareTexture(@NonNull T view, boolean useHWTexture) {
-    view.setLayerType(useHWTexture ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE, null);
+    view.setTag(R.id.use_hardware_layer, useHWTexture);
   }
 
   @Override
@@ -491,6 +502,28 @@ public void setAccessibilityLiveRegion(@NonNull T view, @Nullable String liveReg
     }
   }
 
+  private void applyFilter(@NonNull T view, @Nullable ReadableArray filter) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+      view.setRenderEffect(null);
+    }
+    Boolean useHWLayer = (Boolean) view.getTag(R.id.use_hardware_layer);
+    int layerType =
+        useHWLayer != null && useHWLayer ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE;
+    view.setLayerType(layerType, null);
+
+    if (filter == null) {
+      return;
+    }
+
+    if (FilterHelper.isOnlyColorMatrixFilters(filter)) {
+      Paint p = new Paint();
+      p.setColorFilter(FilterHelper.parseColorMatrixFilters(filter));
+      view.setLayerType(View.LAYER_TYPE_HARDWARE, p);
+    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+      view.setRenderEffect(FilterHelper.parseFilters(filter));
+    }
+  }
+
   protected void setTransformProperty(
       @NonNull T view,
       @Nullable ReadableArray transforms,
@@ -595,6 +628,14 @@ protected void onAfterUpdateTransaction(@NonNull T view) {
       setTransformProperty(view, transformMatrix, transformOrigin);
       view.setTag(R.id.invalidate_transform, false);
     }
+
+    Boolean useHWLayer = (Boolean) view.getTag(R.id.use_hardware_layer);
+    if (useHWLayer != null) {
+      view.setLayerType(useHWLayer ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE, null);
+    }
+
+    ReadableArray filter = (ReadableArray) view.getTag(R.id.filter);
+    applyFilter(view, filter);
   }
 
   @Override

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java

@@ -48,6 +48,8 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setElevation(T view, float elevation);
 
+  void setFilter(T view, ReadableArray filter);
+
   void setShadowColor(T view, int shadowColor);
 
   void setImportantForAccessibility(T view, @Nullable String importantForAccessibility);