Implement brightness and opacity using blend modes (#44457)

Summary:

Most filters are not going to work on iOS. It is a long story but essentially there is not a good way to continuously get a snapshot of the view and its descendants to filter. 

We can, however, implement `brightness` using `compositingFilter` and blend mode. This is really not documented at all, but if you assign a string representing the blend mode to the [`compositingFilter`](https://developer.apple.com/documentation/quartzcore/calayer/1410748-compositingfilter?language=objc) property on CALayer, it will actually work. The filter we use is [`multiplyBlendMode`](https://developer.apple.com/library/archive/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CIMultiplyBlendMode). As the title suggests this just multiplies the two layers. We can apply this to a `_filterLayer` and set its background color to the brightness amount to get the desired results. Most other color filters either operate on the color components dependently (e.g. new red component depends the value in blue and green), or they have addition operations. We can do addition with `linearDodgeBlendMode`, but the order of operations does not work (we multiply, clamp, then add vs. multiply, add, then clamp).

`opacity` is just a multiplier on the CALayer `opacity` property.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D56447175

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

@@ -29,6 +29,7 @@
 @implementation RCTViewComponentView {
   UIColor *_backgroundColor;
   __weak CALayer *_borderLayer;
+  CALayer *_filterLayer;
   BOOL _needsInvalidateLayer;
   BOOL _isJSResponder;
   BOOL _removeClippedSubviews;
@@ -388,6 +389,11 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     self.accessibilityIdentifier = RCTNSStringFromString(newViewProps.testId);
   }
 
+  // `filter`
+  if (oldViewProps.filter != newViewProps.filter) {
+    _needsInvalidateLayer = YES;
+  }
+
   _needsInvalidateLayer = _needsInvalidateLayer || needsInvalidateLayer;
 
   _props = std::static_pointer_cast<const ViewProps>(props);
@@ -726,6 +732,33 @@ - (void)invalidateLayer
     layer.cornerRadius = cornerRadius;
     layer.mask = maskLayer;
   }
+
+  [_filterLayer removeFromSuperlayer];
+  _filterLayer = nil;
+  self.layer.opacity = (float)_props->opacity;
+  if (!_props->filter.empty()) {
+    float multiplicativeBrightness = 1;
+    for (const auto &primitive : _props->filter) {
+      if (primitive.type == FilterType::Brightness) {
+        multiplicativeBrightness *= primitive.amount;
+      } else if (primitive.type == FilterType::Opacity) {
+        self.layer.opacity *= primitive.amount;
+      }
+    }
+
+    _filterLayer = [CALayer layer];
+    _filterLayer.frame = CGRectMake(0, 0, layer.frame.size.width, layer.frame.size.height);
+    _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];
+  }
 }
 
 #pragma mark - Accessibility