feat(iOS) - blur filter using SwiftUI (#52495)

Summary:
As per the discussion on the previous [PR thread](#52028 (comment)), this PR uses `SwiftUI` to implement blur filter on iOS.

## Approach:

To implement blur filter on iOS, we have two options:

1. Use `CAFilter` (private API, app can get rejected/API can break). Earlier [PR](#52028) was using that approach. Thanks to Nick for suggesting SwiftUI API.

2. Use `SwiftUI`. Wrap the view in a SwiftUI view and apply [blur](https://developer.apple.com/documentation/swiftui/view/blur(radius:opaque:)). This PR builds on top of that approach. This also enables a way to add `SwiftUI` only features like this one. Additional filters (grayscale, saturate, contrast, hueRotate) can also be added.

There are a few ways we can implement the SwiftUI approach:

1. Create a new `RCTSwiftUIComponentView` -> do style flattening in View -> check if `filter` is present and conditionally render the `RCTSwiftUIComponentView` on iOS, wrap children with a `SwiftUI` view. Tradeoff with this approach is that it adds `StyleSheet.flatten` overhead on JS side.
2. Add a `SwiftUI` container view inside of `RCTViewComponentView`. Tradeoff with this approach is that it complicates `RCTViewComponentView` a bit.

I decided to go with **2** to avoid the flattening tradeoff and try to minimize complicating `RCTViewComponentView`. it only adds the wrapper if it's required and removes if not (in this PR, blur filter style will add the wrapper, it will get removed if blur filter styling gets removed). It uses the existing container view pattern.

## Changelog:
[IOS][ADDED] - Filter blur

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

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

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

Pull Request resolved: #52495

Test Plan:
Test filter blur example on iOS. SwiftUI view should be added to the hierarchy.

<img src="https://github.com/user-attachments/assets/742539f4-a96d-45f4-94ba-5eb588d0ad5a" width="300px" />

## Aside:

- This PR also adds a new swift podspec. Creating a new podspec felt the right approach as adding swift in existing ones were adding some complexity. But open for changes here. Also, need some eyes on the podspec configs. cc - chrfalch  🙏   this might also affect the SPM migration.
- Unrelated: Existing brightness filter has some inconsistency compared to android and web, it uses [self.layer.opacity](https://github.com/facebook/react-native/blob/6892dde36373bbef2d0afe535ae818b1a7164f08/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L1008) so transparent background color do not blend well unless the view has an opacity. One solution would be to calculate true background color by using brightness or else use the `SwiftUI`'s [brightness](https://developer.apple.com/documentation/swiftui/view/brightness(_:)), which would be cleaner imo (tested and it works).

Reviewed By: cipolleschi

Differential Revision: D79666764

Pulled By: joevilches

fbshipit-source-id: 05e43d75ce7b6f25b67b4eed632524a559ea1c2e

Author: intergalacticspacehighway

packages/react-native/Package.swift

@@ -68,6 +68,17 @@ let reactOSCompat = RNTarget(
   path: "ReactCommon/oscompat"
 )
 
+let rctSwiftUI = RNTarget(
+  name: .rctSwiftUI,
+  path: "ReactApple/RCTSwiftUI"
+)
+
+let rctSwiftUIWrapper = RNTarget(
+  name: .rctSwiftUIWrapper,
+  path: "ReactApple/RCTSwiftUIWrapper",
+  dependencies: [.rctSwiftUI]
+)
+
 // React-rendererconsistency.podspec
 let reactRendererConsistency = RNTarget(
   name: .reactRendererConsistency,
@@ -439,7 +450,7 @@ let reactFabric = RNTarget(
 let reactRCTFabric = RNTarget(
   name: .reactRCTFabric,
   path: "React/Fabric",
-  dependencies: [.reactNativeDependencies, .reactCore, .reactRCTImage, .yoga, .reactRCTText, .jsi, .reactFabricComponents, .reactGraphics, .reactImageManager, .reactDebug, .reactUtils, .reactPerformanceTimeline, .reactRendererDebug, .reactRendererConsistency, .reactRuntimeScheduler, .reactRCTAnimation, .reactJsInspector, .reactJsInspectorNetwork, .reactJsInspectorTracing, .reactFabric, .reactFabricImage]
+  dependencies: [.reactNativeDependencies, .reactCore, .reactRCTImage, .yoga, .reactRCTText, .jsi, .reactFabricComponents, .reactGraphics, .reactImageManager, .reactDebug, .reactUtils, .reactPerformanceTimeline, .reactRendererDebug, .reactRendererConsistency, .reactRuntimeScheduler, .reactRCTAnimation, .reactJsInspector, .reactJsInspectorNetwork, .reactJsInspectorTracing, .reactFabric, .reactFabricImage, .rctSwiftUIWrapper]
 )
 
 /// React-FabricComponents.podspec
@@ -579,6 +590,8 @@ let targets = [
   reactCore,
   reactCoreRCTWebsocket,
   reactFabric,
+  rctSwiftUI,
+  rctSwiftUIWrapper,
   reactRCTFabric,
   reactFabricComponents,
   reactFabricImage,
@@ -728,6 +741,9 @@ extension String {
   static let logger = "React-logger"
   static let mapbuffer = "React-Mapbuffer"
 
+  static let rctSwiftUI = "RCTSwiftUI"
+  static let rctSwiftUIWrapper = "RCTSwiftUIWrapper"
+
   static let rctDeprecation = "RCT-Deprecation"
   static let yoga = "Yoga"
   static let reactUtils = "React-utils"

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

@@ -12,6 +12,7 @@
 #import <objc/runtime.h>
 #import <ranges>
 
+#import <RCTSwiftUIWrapper/RCTSwiftUIContainerViewWrapper.h>
 #import <React/RCTAssert.h>
 #import <React/RCTBorderDrawing.h>
 #import <React/RCTBoxShadow.h>
@@ -50,6 +51,7 @@ @implementation RCTViewComponentView {
   UIView *_containerView;
   BOOL _useCustomContainerView;
   NSMutableSet<NSString *> *_accessibilityOrderNativeIDs;
+  RCTSwiftUIContainerViewWrapper *_swiftUIWrapper;
 }
 
 #ifdef RCT_DYNAMIC_FRAMEWORKS
@@ -576,6 +578,10 @@ - (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
     auto newTransform = _props->resolveTransform(layoutMetrics);
     self.layer.transform = RCTCATransform3DFromTransformMatrix(newTransform);
   }
+
+  if (_swiftUIWrapper != nullptr) {
+    [_swiftUIWrapper updateLayoutWithBounds:self.bounds];
+  }
 }
 
 - (BOOL)isJSResponder
@@ -793,43 +799,95 @@ - (BOOL)styleWouldClipOverflowInk
       ((!_props->boxShadow.empty() || (clipToPaddingBox && nonZeroBorderWidth)) || _props->outlineWidth != 0);
 }
 
+// The view that is used as the receiver for all styling (borders, background,
+// etc.). Most of the time, this is just `self`. When a view has a filter like
+// `blur` applied, we need to wrap it in a SwiftUI view to render the effect.
+// In this case, `effectiveContentView` will be the content view inside the
+// SwiftUI wrapper.
+- (UIView *)effectiveContentView
+{
+  if (!ReactNativeFeatureFlags::enableSwiftUIBasedFilters()) {
+    return self;
+  }
+
+  UIView *effectiveContentView = self;
+
+  if (self.styleNeedsSwiftUIContainer) {
+    if (_swiftUIWrapper == nullptr) {
+      _swiftUIWrapper = [RCTSwiftUIContainerViewWrapper new];
+      UIView *swiftUIContentView = [[UIView alloc] init];
+      for (UIView *subview = nullptr in self.subviews) {
+        [swiftUIContentView addSubview:subview];
+      }
+      swiftUIContentView.clipsToBounds = self.clipsToBounds;
+      self.clipsToBounds = NO;
+      swiftUIContentView.layer.mask = self.layer.mask;
+      self.layer.mask = nil;
+      [_swiftUIWrapper updateContentView:swiftUIContentView];
+      [_swiftUIWrapper updateLayoutWithBounds:self.bounds];
+      [self addSubview:_swiftUIWrapper.hostingView];
+
+      [self transferVisualPropertiesFromView:self toView:swiftUIContentView];
+    }
+
+    effectiveContentView = _swiftUIWrapper.contentView;
+  } else {
+    if (_swiftUIWrapper != nullptr) {
+      UIView *swiftUIContentView = _swiftUIWrapper.contentView;
+      for (UIView *subview = nullptr in swiftUIContentView.subviews) {
+        [self addSubview:subview];
+      }
+      self.clipsToBounds = swiftUIContentView.clipsToBounds;
+      self.layer.mask = swiftUIContentView.layer.mask;
+
+      [self transferVisualPropertiesFromView:swiftUIContentView toView:self];
+
+      [_swiftUIWrapper.hostingView removeFromSuperview];
+      _swiftUIWrapper = nil;
+    }
+  }
+
+  return effectiveContentView;
+}
+
 // This UIView is the UIView that holds all subviews. It is sometimes not self
 // because we want to render "overflow ink" that extends beyond the bounds of
 // the view and is not affected by clipping.
 - (UIView *)currentContainerView
 {
+  UIView *effectiveContentView = self.effectiveContentView;
+
   if (_useCustomContainerView) {
     if (!_containerView) {
       _containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
-      for (UIView *subview in self.subviews) {
+      for (UIView *subview = nullptr in effectiveContentView.subviews) {
         [_containerView addSubview:subview];
       }
-      _containerView.clipsToBounds = self.clipsToBounds;
-      self.clipsToBounds = NO;
-      _containerView.layer.mask = self.layer.mask;
-      self.layer.mask = nil;
-      [self addSubview:_containerView];
+      _containerView.clipsToBounds = effectiveContentView.clipsToBounds;
+      effectiveContentView.clipsToBounds = NO;
+      _containerView.layer.mask = effectiveContentView.layer.mask;
+      effectiveContentView.layer.mask = nil;
+      [effectiveContentView addSubview:_containerView];
     }
 
-    return _containerView;
+    effectiveContentView = _containerView;
   } else {
     if (_containerView) {
       for (UIView *subview in _containerView.subviews) {
-        [self addSubview:subview];
+        [effectiveContentView addSubview:subview];
       }
-      self.clipsToBounds = _containerView.clipsToBounds;
-      self.layer.mask = _containerView.layer.mask;
+      effectiveContentView.clipsToBounds = _containerView.clipsToBounds;
+      effectiveContentView.layer.mask = _containerView.layer.mask;
       [_containerView removeFromSuperview];
       _containerView = nil;
     }
-
-    return self;
   }
+  return effectiveContentView;
 }
 
 - (void)invalidateLayer
 {
-  CALayer *layer = self.layer;
+  CALayer *layer = self.effectiveContentView.layer;
 
   if (CGSizeEqualToSize(layer.bounds.size, CGSizeZero)) {
     return;
@@ -910,7 +968,7 @@ - (void)invalidateLayer
     if (!_backgroundColorLayer) {
       _backgroundColorLayer = [CALayer layer];
       _backgroundColorLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
-      [self.layer addSublayer:_backgroundColorLayer];
+      [layer addSublayer:_backgroundColorLayer];
     }
     [self shapeLayerToMatchView:_backgroundColorLayer borderMetrics:borderMetrics];
     _backgroundColorLayer.backgroundColor = backgroundColor.CGColor;
@@ -986,31 +1044,43 @@ - (void)invalidateLayer
   // filter
   [_filterLayer removeFromSuperlayer];
   _filterLayer = nil;
+  if (_swiftUIWrapper != nullptr) {
+    [_swiftUIWrapper updateBlurRadius:@(0)];
+  }
   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::Brightness) {
           multiplicativeBrightness *= std::get<Float>(primitive.parameters);
+          hasBrightnessFilter = true;
         } else if (primitive.type == FilterType::Opacity) {
           self.layer.opacity *= std::get<Float>(primitive.parameters);
+        } else if (primitive.type == FilterType::Blur) {
+          if (_swiftUIWrapper != nullptr) {
+            Float blurRadius = std::get<Float>(primitive.parameters);
+            [_swiftUIWrapper updateBlurRadius:@(blurRadius)];
+          }
         }
       }
     }
 
-    _filterLayer = [CALayer layer];
-    [self shapeLayerToMatchView:_filterLayer borderMetrics:borderMetrics];
-    _filterLayer.compositingFilter = @"multiplyBlendMode";
-    _filterLayer.backgroundColor = [UIColor colorWithRed:multiplicativeBrightness
-                                                   green:multiplicativeBrightness
-                                                    blue:multiplicativeBrightness
-                                                   alpha:self.layer.opacity]
-                                       .CGColor;
-    // So that this layer is always above any potential sublayers this view may
-    // add
-    _filterLayer.zPosition = CGFLOAT_MAX;
-    [self.layer addSublayer:_filterLayer];
+    if (hasBrightnessFilter) {
+      _filterLayer = [CALayer layer];
+      [self shapeLayerToMatchView:_filterLayer borderMetrics:borderMetrics];
+      _filterLayer.compositingFilter = @"multiplyBlendMode";
+      _filterLayer.backgroundColor = [UIColor colorWithRed:multiplicativeBrightness
+                                                     green:multiplicativeBrightness
+                                                      blue:multiplicativeBrightness
+                                                     alpha:self.layer.opacity]
+                                         .CGColor;
+      // So that this layer is always above any potential sublayers this view may
+      // add
+      _filterLayer.zPosition = CGFLOAT_MAX;
+      [layer addSublayer:_filterLayer];
+    }
   }
 
   // background image
@@ -1025,7 +1095,7 @@ - (void)invalidateLayer
         [self shapeLayerToMatchView:backgroundImageLayer borderMetrics:borderMetrics];
         backgroundImageLayer.masksToBounds = YES;
         backgroundImageLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
-        [self.layer addSublayer:backgroundImageLayer];
+        [layer addSublayer:backgroundImageLayer];
         [_backgroundImageLayers addObject:backgroundImageLayer];
       } else if (std::holds_alternative<RadialGradient>(backgroundImage)) {
         const auto &radialGradient = std::get<RadialGradient>(backgroundImage);
@@ -1034,7 +1104,7 @@ - (void)invalidateLayer
         [self shapeLayerToMatchView:backgroundImageLayer borderMetrics:borderMetrics];
         backgroundImageLayer.masksToBounds = YES;
         backgroundImageLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
-        [self.layer addSublayer:backgroundImageLayer];
+        [layer addSublayer:backgroundImageLayer];
         [_backgroundImageLayers addObject:backgroundImageLayer];
       }
     }
@@ -1056,7 +1126,7 @@ - (void)invalidateLayer
           RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths),
           self.layer.bounds.size);
       shadowLayer.zPosition = _borderLayer.zPosition;
-      [self.layer addSublayer:shadowLayer];
+      [layer addSublayer:shadowLayer];
       [_boxShadowLayers addObject:shadowLayer];
     }
   }
@@ -1410,6 +1480,66 @@ - (NSString *)componentViewName_DO_NOT_USE_THIS_IS_BROKEN
   return RCTNSStringFromString([[self class] componentDescriptorProvider].name);
 }
 
+- (BOOL)styleNeedsSwiftUIContainer
+{
+  if (!_props->filter.empty()) {
+    for (const auto &primitive : _props->filter) {
+      if (primitive.type == FilterType::Blur) {
+        return YES;
+      }
+    }
+  }
+  return NO;
+}
+
+- (void)transferVisualPropertiesFromView:(UIView *)sourceView toView:(UIView *)destinationView
+{
+  // shadow
+  destinationView.layer.shadowColor = sourceView.layer.shadowColor;
+  sourceView.layer.shadowColor = nil;
+  destinationView.layer.shadowOffset = sourceView.layer.shadowOffset;
+  sourceView.layer.shadowOffset = CGSizeZero;
+  destinationView.layer.shadowOpacity = sourceView.layer.shadowOpacity;
+  sourceView.layer.shadowOpacity = 0;
+  destinationView.layer.shadowRadius = sourceView.layer.shadowRadius;
+  sourceView.layer.shadowRadius = 0;
+
+  // background
+  destinationView.layer.backgroundColor = sourceView.layer.backgroundColor;
+  sourceView.layer.backgroundColor = nil;
+  if (_backgroundColorLayer != nullptr) {
+    [destinationView.layer addSublayer:_backgroundColorLayer];
+  }
+
+  // border
+  destinationView.layer.borderColor = sourceView.layer.borderColor;
+  sourceView.layer.borderColor = nil;
+  destinationView.layer.borderWidth = sourceView.layer.borderWidth;
+  sourceView.layer.borderWidth = 0;
+
+  // corner
+  destinationView.layer.cornerRadius = sourceView.layer.cornerRadius;
+  sourceView.layer.cornerRadius = 0;
+  destinationView.layer.cornerCurve = sourceView.layer.cornerCurve;
+
+  // custom layers
+  if (_borderLayer != nullptr) {
+    [destinationView.layer addSublayer:_borderLayer];
+  }
+  if (_outlineLayer != nullptr) {
+    [destinationView.layer addSublayer:_outlineLayer];
+  }
+  if (_filterLayer != nullptr) {
+    [destinationView.layer addSublayer:_filterLayer];
+  }
+  for (CALayer *layer = nullptr in _backgroundImageLayers) {
+    [destinationView.layer addSublayer:layer];
+  }
+  for (CALayer *layer = nullptr in _boxShadowLayers) {
+    [destinationView.layer addSublayer:layer];
+  }
+}
+
 @end
 
 #ifdef __cplusplus

packages/react-native/React/React-RCTFabric.podspec

@@ -63,6 +63,7 @@ Pod::Spec.new do |s|
   s.dependency "Yoga"
   s.dependency "React-RCTText"
   s.dependency "React-jsi"
+  s.dependency "RCTSwiftUIWrapper"
 
   add_dependency(s, "React-FabricImage")
   add_dependency(s, "React-Fabric", :additional_framework_paths => [

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<af10f4eea240ae4a228de9bbc4b78b7e>>
+ * @generated SignedSource<<f089964c958dfcac00f83c3371ccbefc>>
  */
 
 /**
@@ -252,6 +252,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableResourceTimingAPI(): Boolean = accessor.enableResourceTimingAPI()
 
+  /**
+   * When enabled, it will use SwiftUI for filter effects like blur on iOS.
+   */
+  @JvmStatic
+  public fun enableSwiftUIBasedFilters(): Boolean = accessor.enableSwiftUIBasedFilters()
+
   /**
    * Enables View Culling: as soon as a view goes off screen, it can be reused anywhere in the UI and pieced together with other items to create new UI elements.
    */