Add grayscale, drop-shadow and saturate filter support on iOS (#53873)

Summary:
This PR adds support for `grayscale`, `drop-shadow` and `saturate` filter support on iOS as discussed here - react-native-community/discussions-and-proposals#927

## Changelog:

[IOS] [ADDED] - Add grayscale, drop-shadow and saturate CSS filters

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #53873

Test Plan:
Test Filter screen in RNTester app. Checkout `grayscale`, `drop-shadow` and `saturate` examples. Results are consistent on android and iOS.

<img width="auto" height="300" alt="Screenshot 2025-09-22 at 1 07 28 PM" src="https://github.com/user-attachments/assets/f26fc60a-48f6-4aa2-82e9-56e986082fed" />

<img width="auto" height="300" alt="Screenshot 2025-09-22 at 1 08 08 PM" src="https://github.com/user-attachments/assets/d87925c8-f05c-4ed2-a651-8c7670339f87" />

<img width="auto" height="300" alt="Screenshot 2025-09-22 at 2 37 30 PM" src="https://github.com/user-attachments/assets/582fcadf-1189-4f01-9868-ff9fe71eeda0" />

## Aside

Will do one more PR to add remaining filters. Splitting into two to keep it easier to review.

Reviewed By: cipolleschi, jorge-cab

Differential Revision: D85352008

Pulled By: joevilches

fbshipit-source-id: 33931ceeaa6f47cf39988c8696bd90f659ade730

Author: intergalacticspacehighway

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -1051,14 +1051,23 @@ - (void)invalidateLayer
   [_filterLayer removeFromSuperlayer];
   _filterLayer = nil;
   if (_swiftUIWrapper != nullptr) {
-    [_swiftUIWrapper updateBlurRadius:@(0)];
+    [_swiftUIWrapper resetStyles];
   }
   self.layer.opacity = (float)_props->opacity;
   if (!_props->filter.empty()) {
     float multiplicativeBrightness = 1;
     bool hasBrightnessFilter = false;
     for (const auto &primitive : _props->filter) {
-      if (std::holds_alternative<Float>(primitive.parameters)) {
+      if (primitive.type == FilterType::DropShadow) {
+        if (_swiftUIWrapper != nullptr && std::holds_alternative<DropShadowParams>(primitive.parameters)) {
+          const auto &dropShadowParams = std::get<DropShadowParams>(primitive.parameters);
+          UIColor *shadowColor = RCTUIColorFromSharedColor(dropShadowParams.color);
+          [_swiftUIWrapper updateDropShadow:@(dropShadowParams.standardDeviation)
+                                          x:@(dropShadowParams.offsetX)
+                                          y:@(dropShadowParams.offsetY)
+                                      color:shadowColor];
+        }
+      } else if (std::holds_alternative<Float>(primitive.parameters)) {
         if (primitive.type == FilterType::Brightness) {
           multiplicativeBrightness *= std::get<Float>(primitive.parameters);
           hasBrightnessFilter = true;
@@ -1069,6 +1078,16 @@ - (void)invalidateLayer
             Float blurRadius = std::get<Float>(primitive.parameters);
             [_swiftUIWrapper updateBlurRadius:@(blurRadius)];
           }
+        } else if (primitive.type == FilterType::Grayscale) {
+          if (_swiftUIWrapper != nullptr) {
+            Float grayscale = std::get<Float>(primitive.parameters);
+            [_swiftUIWrapper updateGrayscale:@(grayscale)];
+          }
+        } else if (primitive.type == FilterType::Saturate) {
+          if (_swiftUIWrapper != nullptr) {
+            Float saturation = std::get<Float>(primitive.parameters);
+            [_swiftUIWrapper updateSaturation:@(saturation)];
+          }
         }
       }
     }
@@ -1525,7 +1544,8 @@ - (BOOL)styleNeedsSwiftUIContainer
 {
   if (!_props->filter.empty()) {
     for (const auto &primitive : _props->filter) {
-      if (primitive.type == FilterType::Blur) {
+      if (primitive.type == FilterType::Blur || primitive.type == FilterType::Grayscale ||
+          primitive.type == FilterType::DropShadow || primitive.type == FilterType::Saturate) {
         return YES;
       }
     }

packages/react-native/ReactApple/RCTSwiftUI/RCTSwiftUIContainerView.swift

@@ -38,18 +38,53 @@ import UIKit
     containerViewModel.blurRadius = blurRadius
   }
 
+  @objc public func updateGrayscale(_ grayscale: NSNumber) {
+    containerViewModel.grayscale = CGFloat(grayscale.floatValue)
+  }
+
+  @objc public func updateDropShadow(standardDeviation: NSNumber, x: NSNumber, y: NSNumber, color: UIColor) {
+    containerViewModel.shadowRadius = CGFloat(standardDeviation.floatValue)
+    containerViewModel.shadowX = CGFloat(x.floatValue)
+    containerViewModel.shadowY = CGFloat(y.floatValue)
+    containerViewModel.shadowColor = Color(color)
+  }
+
+  @objc public func updateSaturation(_ saturation: NSNumber) {
+    containerViewModel.saturationAmount = CGFloat(saturation.floatValue)
+  }
+
   @objc public func updateLayout(withBounds bounds: CGRect) {
     hostingController?.view.frame = bounds
     containerViewModel.contentView?.frame = bounds
   }
 
   @objc public func resetStyles() {
     containerViewModel.blurRadius = 0
+    containerViewModel.grayscale = 0
+    containerViewModel.shadowRadius = 0
+    containerViewModel.shadowX = 0
+    containerViewModel.shadowY = 0
+    containerViewModel.shadowColor = Color.clear
+    containerViewModel.saturationAmount = 1
   }
 }
 
 class ContainerViewModel: ObservableObject {
+  // blur filter properties
   @Published var blurRadius: CGFloat = 0
+
+  // grayscale filter properties
+  @Published var grayscale: CGFloat = 0
+
+  // drop-shadow filter properties
+  @Published var shadowRadius: CGFloat = 0
+  @Published var shadowX: CGFloat = 0
+  @Published var shadowY: CGFloat = 0
+  @Published var shadowColor: Color = Color.clear
+
+  // saturation filter properties
+  @Published var saturationAmount: CGFloat = 1
+
   @Published var contentView: UIView?
 }
 
@@ -60,6 +95,9 @@ struct SwiftUIContainerView: View {
     if let contentView = viewModel.contentView {
       UIViewWrapper(view: contentView)
         .blur(radius: viewModel.blurRadius)
+        .grayscale(viewModel.grayscale)
+        .shadow(color: viewModel.shadowColor, radius: viewModel.shadowRadius, x: viewModel.shadowX, y: viewModel.shadowY)
+        .saturation(viewModel.saturationAmount)
     }
   }
 }

packages/react-native/ReactApple/RCTSwiftUIWrapper/RCTSwiftUIContainerViewWrapper.h

@@ -14,6 +14,9 @@ NS_ASSUME_NONNULL_BEGIN
 
 - (UIView *_Nullable)contentView;
 - (void)updateBlurRadius:(NSNumber *)radius;
+- (void)updateGrayscale:(NSNumber *)grayscale;
+- (void)updateDropShadow:(NSNumber *)standardDeviation x:(NSNumber *)x y:(NSNumber *)y color:(UIColor *)color;
+- (void)updateSaturation:(NSNumber *)saturation;
 - (void)updateContentView:(UIView *)view;
 - (UIView *_Nullable)hostingView;
 - (void)resetStyles;

packages/react-native/ReactApple/RCTSwiftUIWrapper/RCTSwiftUIContainerViewWrapper.m

@@ -48,6 +48,21 @@ - (void)updateBlurRadius:(NSNumber *)radius
   [self.swiftContainerView updateBlurRadius:radius];
 }
 
+- (void)updateGrayscale:(NSNumber *)grayscale
+{
+  [self.swiftContainerView updateGrayscale:grayscale];
+}
+
+- (void)updateSaturation:(NSNumber *)saturation
+{
+  [self.swiftContainerView updateSaturation:saturation];
+}
+
+- (void)updateDropShadow:(NSNumber *)standardDeviation x:(NSNumber *)x y:(NSNumber *)y color:(UIColor *)color
+{
+  [self.swiftContainerView updateDropShadowWithStandardDeviation:standardDeviation x:x y:y color:color];
+}
+
 - (void)updateLayoutWithBounds:(CGRect)bounds
 {
   [self.swiftContainerView updateLayoutWithBounds:bounds];

packages/rn-tester/js/examples/Filter/FilterExample.js

@@ -155,7 +155,6 @@ exports.examples = [
     title: 'Grayscale',
     description: 'grayscale(0.5)',
     name: 'grayscale',
-    platform: 'android',
     render(): React.Node {
       return (
         <StaticViewAndImageComparison style={{filter: [{grayscale: 0.5}]}} />
@@ -166,7 +165,6 @@ exports.examples = [
     title: 'Saturate',
     description: 'saturate(4)',
     name: 'saturate',
-    platform: 'android',
     render(): React.Node {
       return <StaticViewAndImageComparison style={{filter: [{saturate: 4}]}} />;
     },
@@ -231,7 +229,6 @@ exports.examples = [
     title: 'Drop Shadow',
     description: 'drop-shadow(30px 10px 4px #4444dd)',
     name: 'drop-shadow',
-    platform: 'android',
     render(): React.Node {
       return (
         <StaticViewAndImageComparison