From d4ee62793dbbbe7503ec65cf189330c02ac4cf9a Mon Sep 17 00:00:00 2001
From: Nick Lefever <lefever@meta.com>
Date: Wed, 14 May 2025 14:33:53 -0700
Subject: [PATCH] Add filter prop diffing to View component (#51325)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51325

See title

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D74738361

fbshipit-source-id: 71c704b1a977327c05d06e48f5572753c2847b38
---
 .../components/view/HostPlatformViewProps.cpp | 28 +++++++++++++++++++
 .../react/renderer/graphics/Filter.h          | 25 +++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp
index b9ab7b4ebba..cf285dc51ba 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp
@@ -503,6 +503,30 @@ static folly::dynamic toDynamic(const std::vector<BoxShadow>& boxShadow) {
   return boxShadowResult;
 }
 
+static folly::dynamic toDynamic(const std::vector<FilterFunction>& filter) {
+  folly::dynamic filterResult = folly::dynamic::array();
+  for (const auto& filterFunction : filter) {
+    folly::dynamic filterFunctionResult = folly::dynamic::object();
+    std::string typeKey = toString(filterFunction.type);
+    if (std::holds_alternative<Float>(filterFunction.parameters)) {
+      filterFunctionResult[typeKey] =
+          std::get<Float>(filterFunction.parameters);
+    } else if (std::holds_alternative<DropShadowParams>(
+                   filterFunction.parameters)) {
+      const auto& parameters =
+          std::get<DropShadowParams>(filterFunction.parameters);
+      folly::dynamic parametersResult = folly::dynamic::object();
+      parametersResult["offsetX"] = parameters.offsetX;
+      parametersResult["offsetY"] = parameters.offsetY;
+      parametersResult["standardDeviation"] = parameters.standardDeviation;
+      parametersResult["color"] = *parameters.color;
+      filterFunctionResult[typeKey] = parametersResult;
+    }
+    filterResult.push_back(filterFunctionResult);
+  }
+  return filterResult;
+}
+
 folly::dynamic HostPlatformViewProps::getDiffProps(
     const Props* prevProps) const {
   folly::dynamic result = folly::dynamic::object();
@@ -609,6 +633,10 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
     result["boxShadow"] = toDynamic(boxShadow);
   }
 
+  if (filter != oldProps->filter) {
+    result["filter"] = toDynamic(filter);
+  }
+
   if (pointerEvents != oldProps->pointerEvents) {
     std::string value;
     switch (pointerEvents) {
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h b/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h
index a6c811bb6e8..029536c8d4f 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h
@@ -71,4 +71,29 @@ inline FilterType filterTypeFromString(std::string_view filterName) {
   }
 }
 
+inline std::string toString(const FilterType& filterType) {
+  switch (filterType) {
+    case FilterType::Blur:
+      return "blur";
+    case FilterType::Brightness:
+      return "brightness";
+    case FilterType::Contrast:
+      return "contrast";
+    case FilterType::Grayscale:
+      return "grayscale";
+    case FilterType::HueRotate:
+      return "hueRotate";
+    case FilterType::Invert:
+      return "invert";
+    case FilterType::Opacity:
+      return "opacity";
+    case FilterType::Saturate:
+      return "saturate";
+    case FilterType::Sepia:
+      return "sepia";
+    case FilterType::DropShadow:
+      return "dropShadow";
+  }
+}
+
 } // namespace facebook::react