react-native-tvos 0.75.3-0 → 0.76.0-0

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -13,8 +13,10 @@
 
 #import <React/RCTAssert.h>
 #import <React/RCTBorderDrawing.h>
+#import <React/RCTBoxShadow.h>
 #import <React/RCTConversions.h>
 #import <React/RCTLocalizedString.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <React/RCTDefines.h>
 #import <React/RCTLog.h>
 
@@ -28,6 +30,7 @@
 #import <react/renderer/components/view/ViewProps.h>
 #import <react/renderer/components/view/HostPlatformViewProps.h>
 #import <react/renderer/components/view/accessibilityPropsConversions.h>
+#import <react/renderer/graphics/BlendMode.h>
 
 #ifdef RCT_DYNAMIC_FRAMEWORKS
 #import <React/RCTComponentViewFactory.h>
@@ -46,10 +49,15 @@ typedef struct {
 
 using namespace facebook::react;
 
+const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f;
+
 @implementation RCTViewComponentView {
   UIColor *_backgroundColor;
+  CALayer *_backgroundColorLayer;
   __weak CALayer *_borderLayer;
+  CALayer *_boxShadowLayer;
   CALayer *_filterLayer;
+  NSMutableArray<CAGradientLayer *> *_gradientLayers;
   BOOL _needsInvalidateLayer;
   BOOL _isJSResponder;
   BOOL _removeClippedSubviews;
@@ -58,6 +66,8 @@ using namespace facebook::react;
   UITapGestureRecognizer *_selectRecognizer;
   UILongPressGestureRecognizer * _longSelectRecognizer;
   NSSet<NSString *> *_Nullable _propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN;
+  UIView *_containerView;
+  BOOL _useCustomContainerView;
   ParallaxProperties _tvParallaxProperties;
   BOOL _hasTVPreferredFocus;
   UIView *_nextFocusUp;
@@ -86,6 +96,7 @@ using namespace facebook::react;
   if (self = [super initWithFrame:frame]) {
     _props = ViewShadowNode::defaultSharedProps();
     _reactSubviews = [NSMutableArray new];
+    _useCustomContainerView = NO;
 #if TARGET_OS_TV
     _tvParallaxProperties.enabled = YES;
     _tvParallaxProperties.shiftDistanceX = 2.0f;
@@ -116,7 +127,7 @@ using namespace facebook::react;
   _contentView = contentView;
 
   if (_contentView) {
-    [self addSubview:_contentView];
+    [self.currentContainerView addSubview:_contentView];
     _contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
   }
 }
@@ -651,7 +662,7 @@ using namespace facebook::react;
   if (_removeClippedSubviews) {
     [_reactSubviews insertObject:childComponentView atIndex:index];
   } else {
-    [self insertSubview:childComponentView atIndex:index];
+    [self.currentContainerView insertSubview:childComponentView atIndex:index];
   }
 }
 
@@ -661,19 +672,20 @@ using namespace facebook::react;
     [_reactSubviews removeObjectAtIndex:index];
   } else {
     RCTAssert(
-        childComponentView.superview == self,
+        childComponentView.superview == self.currentContainerView,
         @"Attempt to unmount a view which is mounted inside different view. (parent: %@, child: %@, index: %@)",
         self,
         childComponentView,
         @(index));
     RCTAssert(
-        (self.subviews.count > index) && [self.subviews objectAtIndex:index] == childComponentView,
+        (self.currentContainerView.subviews.count > index) &&
+            [self.currentContainerView.subviews objectAtIndex:index] == childComponentView,
         @"Attempt to unmount a view which has a different index. (parent: %@, child: %@, index: %@, actual index: %@, tag at index: %@)",
         self,
         childComponentView,
         @(index),
-        @([self.subviews indexOfObject:childComponentView]),
-        @([[self.subviews objectAtIndex:index] tag]));
+        @([self.currentContainerView.subviews indexOfObject:childComponentView]),
+        @([[self.currentContainerView.subviews objectAtIndex:index] tag]));
   }
 
   [childComponentView removeFromSuperview];
@@ -703,7 +715,7 @@ using namespace facebook::react;
   for (UIView *view in _reactSubviews) {
     if (CGRectIntersectsRect(clipRect, view.frame)) {
       // View is at least partially visible, so remount it if unmounted
-      [self addSubview:view];
+      [self.currentContainerView addSubview:view];
       // View is visible, update clipped subviews
       [view updateClippedSubviewsWithClipRect:clipRect relativeToView:self];
     } else if (view.superview) {
@@ -742,8 +754,8 @@ using namespace facebook::react;
 
   if (oldViewProps.removeClippedSubviews != newViewProps.removeClippedSubviews) {
     _removeClippedSubviews = newViewProps.removeClippedSubviews;
-    if (_removeClippedSubviews && self.subviews.count > 0) {
-      _reactSubviews = [NSMutableArray arrayWithArray:self.subviews];
+    if (_removeClippedSubviews && self.currentContainerView.subviews.count > 0) {
+      _reactSubviews = [NSMutableArray arrayWithArray:self.currentContainerView.subviews];
     }
   }
 
@@ -823,7 +835,7 @@ using namespace facebook::react;
 
   // `overflow`
   if (oldViewProps.getClipsContentToBounds() != newViewProps.getClipsContentToBounds()) {
-    self.clipsToBounds = newViewProps.getClipsContentToBounds();
+    self.currentContainerView.clipsToBounds = newViewProps.getClipsContentToBounds();
     needsInvalidateLayer = YES;
   }
 
@@ -869,6 +881,28 @@ using namespace facebook::react;
     self.accessibilityElement.accessibilityElementsHidden = newViewProps.accessibilityElementsHidden;
   }
 
+#if !TARGET_OS_TV
+  // `accessibilityShowsLargeContentViewer`
+  if (oldViewProps.accessibilityShowsLargeContentViewer != newViewProps.accessibilityShowsLargeContentViewer) {
+    if (@available(iOS 13.0, *)) {
+      if (newViewProps.accessibilityShowsLargeContentViewer) {
+        self.showsLargeContentViewer = YES;
+        UILargeContentViewerInteraction *interaction = [[UILargeContentViewerInteraction alloc] init];
+        [self addInteraction:interaction];
+      } else {
+        self.showsLargeContentViewer = NO;
+      }
+    }
+  }
+
+  // `accessibilityLargeContentTitle`
+  if (oldViewProps.accessibilityLargeContentTitle != newViewProps.accessibilityLargeContentTitle) {
+    if (@available(iOS 13.0, *)) {
+      self.largeContentTitle = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityLargeContentTitle);
+    }
+  }
+#endif
+
   // `accessibilityTraits`
   if (oldViewProps.accessibilityTraits != newViewProps.accessibilityTraits) {
     self.accessibilityElement.accessibilityTraits =
@@ -912,12 +946,83 @@ using namespace facebook::react;
 
   // `testId`
   if (oldViewProps.testId != newViewProps.testId) {
-    self.accessibilityIdentifier = RCTNSStringFromString(newViewProps.testId);
+    SEL setAccessibilityIdentifierSelector = @selector(setAccessibilityIdentifier:);
+    NSString *identifier = RCTNSStringFromString(newViewProps.testId);
+    if ([self.accessibilityElement respondsToSelector:setAccessibilityIdentifierSelector]) {
+      UIView *accessibilityView = (UIView *)self.accessibilityElement;
+      accessibilityView.accessibilityIdentifier = identifier;
+    } else {
+      self.accessibilityIdentifier = identifier;
+    }
   }
 
   // `filter`
   if (oldViewProps.filter != newViewProps.filter) {
-    _needsInvalidateLayer = YES;
+    needsInvalidateLayer = YES;
+  }
+
+  // `mixBlendMode`
+  if (oldViewProps.mixBlendMode != newViewProps.mixBlendMode) {
+    switch (newViewProps.mixBlendMode) {
+      case BlendMode::Multiply:
+        self.layer.compositingFilter = @"multiplyBlendMode";
+        break;
+      case BlendMode::Screen:
+        self.layer.compositingFilter = @"screenBlendMode";
+        break;
+      case BlendMode::Overlay:
+        self.layer.compositingFilter = @"overlayBlendMode";
+        break;
+      case BlendMode::Darken:
+        self.layer.compositingFilter = @"darkenBlendMode";
+        break;
+      case BlendMode::Lighten:
+        self.layer.compositingFilter = @"lightenBlendMode";
+        break;
+      case BlendMode::ColorDodge:
+        self.layer.compositingFilter = @"colorDodgeBlendMode";
+        break;
+      case BlendMode::ColorBurn:
+        self.layer.compositingFilter = @"colorBurnBlendMode";
+        break;
+      case BlendMode::HardLight:
+        self.layer.compositingFilter = @"hardLightBlendMode";
+        break;
+      case BlendMode::SoftLight:
+        self.layer.compositingFilter = @"softLightBlendMode";
+        break;
+      case BlendMode::Difference:
+        self.layer.compositingFilter = @"differenceBlendMode";
+        break;
+      case BlendMode::Exclusion:
+        self.layer.compositingFilter = @"exclusionBlendMode";
+        break;
+      case BlendMode::Hue:
+        self.layer.compositingFilter = @"hueBlendMode";
+        break;
+      case BlendMode::Saturation:
+        self.layer.compositingFilter = @"saturationBlendMode";
+        break;
+      case BlendMode::Color:
+        self.layer.compositingFilter = @"colorBlendMode";
+        break;
+      case BlendMode::Luminosity:
+        self.layer.compositingFilter = @"luminosityBlendMode";
+        break;
+      case BlendMode::Normal:
+        self.layer.compositingFilter = nil;
+        break;
+    }
+  }
+
+  // `linearGradient`
+  if (oldViewProps.backgroundImage != newViewProps.backgroundImage) {
+    needsInvalidateLayer = YES;
+  }
+
+  // `boxShadow`
+  if (oldViewProps.boxShadow != newViewProps.boxShadow) {
+    needsInvalidateLayer = YES;
   }
 
 #if TARGET_OS_TV
@@ -1050,6 +1155,14 @@ using namespace facebook::react;
     _contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
   }
 
+  if (_containerView) {
+    _containerView.frame = CGRectMake(0, 0, self.layer.bounds.size.width, self.layer.bounds.size.height);
+  }
+
+  if (_backgroundColorLayer) {
+    _backgroundColorLayer.frame = CGRectMake(0, 0, self.layer.bounds.size.width, self.layer.bounds.size.height);
+  }
+
   if ((_props->transformOrigin.isSet() || _props->transform.operations.size() > 0) &&
       layoutMetrics.frame.size != oldLayoutMetrics.frame.size) {
     auto newTransform = _props->resolveTransform(layoutMetrics);
@@ -1081,6 +1194,7 @@ using namespace facebook::react;
 - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
 {
   [super finalizeUpdates:updateMask];
+  _useCustomContainerView = [self styleWouldClipOverflowInk];
   if (!_needsInvalidateLayer) {
     return;
   }
@@ -1137,7 +1251,7 @@ using namespace facebook::react;
 
   BOOL isPointInside = [self pointInside:point withEvent:event];
 
-  BOOL clipsToBounds = self.clipsToBounds;
+  BOOL clipsToBounds = self.currentContainerView.clipsToBounds;
 
   clipsToBounds = clipsToBounds || _layoutMetrics.overflowInset == EdgeInsets{};
 
@@ -1173,10 +1287,14 @@ using namespace facebook::react;
 static RCTCornerRadii RCTCornerRadiiFromBorderRadii(BorderRadii borderRadii)
 {
   return RCTCornerRadii{
-      .topLeft = (CGFloat)borderRadii.topLeft,
-      .topRight = (CGFloat)borderRadii.topRight,
-      .bottomLeft = (CGFloat)borderRadii.bottomLeft,
-      .bottomRight = (CGFloat)borderRadii.bottomRight};
+      .topLeftHorizontal = (CGFloat)borderRadii.topLeft.horizontal,
+      .topLeftVertical = (CGFloat)borderRadii.topLeft.vertical,
+      .topRightHorizontal = (CGFloat)borderRadii.topRight.horizontal,
+      .topRightVertical = (CGFloat)borderRadii.topRight.vertical,
+      .bottomLeftHorizontal = (CGFloat)borderRadii.bottomLeft.horizontal,
+      .bottomLeftVertical = (CGFloat)borderRadii.bottomLeft.vertical,
+      .bottomRightHorizontal = (CGFloat)borderRadii.bottomRight.horizontal,
+      .bottomRightVertical = (CGFloat)borderRadii.bottomRight.vertical};
 }
 
 static RCTBorderColors RCTCreateRCTBorderColorsFromBorderColors(BorderColors borderColors)
@@ -1220,6 +1338,48 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
   }
 }
 
+- (BOOL)styleWouldClipOverflowInk
+{
+  const auto borderMetrics = _props->resolveBorderMetrics(_layoutMetrics);
+  BOOL nonZeroBorderWidth = !(borderMetrics.borderWidths.isUniform() && borderMetrics.borderWidths.left == 0);
+  BOOL clipToPaddingBox = ReactNativeFeatureFlags::enableIOSViewClipToPaddingBox();
+  return _props->getClipsContentToBounds() && (!_props->boxShadow.empty() || (clipToPaddingBox && nonZeroBorderWidth));
+}
+
+// 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
+{
+  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) {
+        [_containerView addSubview:subview];
+      }
+      _containerView.clipsToBounds = self.clipsToBounds;
+      self.clipsToBounds = NO;
+      _containerView.layer.mask = self.layer.mask;
+      self.layer.mask = nil;
+      [self addSubview:_containerView];
+    }
+
+    return _containerView;
+  } else {
+    if (_containerView) {
+      for (UIView *subview in _containerView.subviews) {
+        [self addSubview:subview];
+      }
+      self.clipsToBounds = _containerView.clipsToBounds;
+      self.layer.mask = _containerView.layer.mask;
+      [_containerView removeFromSuperview];
+      _containerView = nil;
+    }
+
+    return self;
+  }
+}
+
 - (void)invalidateLayer
 {
   CALayer *layer = self.layer;
@@ -1274,60 +1434,87 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
     [self setHoverStyle:hoverStyle];
   }
 #endif
-
-  // Stage 2. Border Rendering
   const bool useCoreAnimationBorderRendering =
       borderMetrics.borderColors.isUniform() && borderMetrics.borderWidths.isUniform() &&
       borderMetrics.borderStyles.isUniform() && borderMetrics.borderRadii.isUniform() &&
-      borderMetrics.borderStyles.left == BorderStyle::Solid &&
       (
           // iOS draws borders in front of the content whereas CSS draws them behind
           // the content. For this reason, only use iOS border drawing when clipping
           // or when the border is hidden.
-          borderMetrics.borderWidths.left == 0 || self.clipsToBounds ||
+          borderMetrics.borderWidths.left == 0 || self.currentContainerView.clipsToBounds ||
           (colorComponentsFromColor(borderMetrics.borderColors.left).alpha == 0 &&
            (*borderMetrics.borderColors.left).getUIColor() != nullptr));
 
+  // background color
   CGColorRef backgroundColor = [_backgroundColor resolvedColorWithTraitCollection:self.traitCollection].CGColor;
+  // The reason we sometimes do not set self.layer's backgroundColor is because
+  // we want to support non-uniform border radii, which apple does not natively
+  // support. To get this behavior we need to create a CGPath in the shape that
+  // we want. If we mask self.layer to this path, we would be clipping subviews
+  // which we may not want to do. The generalized solution in this case is just
+  // create a new layer
+  if (useCoreAnimationBorderRendering) {
+    [_backgroundColorLayer removeFromSuperlayer];
+    _backgroundColorLayer = nil;
+    layer.backgroundColor = backgroundColor;
+  } else {
+    layer.backgroundColor = nil;
+    if (!_backgroundColorLayer) {
+      _backgroundColorLayer = [CALayer layer];
+      _backgroundColorLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
+      _backgroundColorLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
+      [self.layer addSublayer:_backgroundColorLayer];
+    }
+
+    _backgroundColorLayer.backgroundColor = backgroundColor;
+    if (borderMetrics.borderRadii.isUniform()) {
+      _backgroundColorLayer.mask = nil;
+      _backgroundColorLayer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
+      _backgroundColorLayer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
+    } else {
+      CAShapeLayer *maskLayer =
+          [self createMaskLayer:self.bounds
+                   cornerInsets:RCTGetCornerInsets(
+                                    RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero)];
+      _backgroundColorLayer.mask = maskLayer;
+      _backgroundColorLayer.cornerRadius = 0;
+    }
+  }
 
+  // borders
   if (useCoreAnimationBorderRendering) {
-    layer.mask = nil;
     [_borderLayer removeFromSuperlayer];
+    _borderLayer = nil;
 
     layer.borderWidth = (CGFloat)borderMetrics.borderWidths.left;
     CGColorRef borderColor = RCTCreateCGColorRefFromSharedColor(borderMetrics.borderColors.left);
     layer.borderColor = borderColor;
     CGColorRelease(borderColor);
-    layer.cornerRadius = (CGFloat)borderMetrics.borderRadii.topLeft;
-
+    layer.cornerRadius = (CGFloat)borderMetrics.borderRadii.topLeft.horizontal;
     layer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
-
-    layer.backgroundColor = backgroundColor;
   } else {
     if (!_borderLayer) {
       CALayer *borderLayer = [CALayer new];
-      borderLayer.zPosition = -1024.0f;
+      borderLayer.zPosition = BACKGROUND_COLOR_ZPOSITION + 1;
       borderLayer.frame = layer.bounds;
       borderLayer.magnificationFilter = kCAFilterNearest;
       [layer addSublayer:borderLayer];
       _borderLayer = borderLayer;
     }
 
-    layer.backgroundColor = nil;
     layer.borderWidth = 0;
     layer.borderColor = nil;
     layer.cornerRadius = 0;
 
     RCTBorderColors borderColors = RCTCreateRCTBorderColorsFromBorderColors(borderMetrics.borderColors);
-
     UIImage *image = RCTGetBorderImage(
         RCTBorderStyleFromBorderStyle(borderMetrics.borderStyles.left),
         layer.bounds.size,
         RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
         RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths),
         borderColors,
-        backgroundColor,
-        self.clipsToBounds);
+        [UIColor clearColor].CGColor,
+        NO);
 
     RCTReleaseRCTBorderColors(borderColors);
 
@@ -1354,41 +1541,21 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
     // If mutations are applied inside of Animation block, it may cause _borderLayer to be animated.
     // To stop that, imperatively remove all animations from _borderLayer.
     [_borderLayer removeAllAnimations];
-
-    // Stage 2.5. Custom Clipping Mask
-    CAShapeLayer *maskLayer = nil;
-    CGFloat cornerRadius = 0;
-    if (self.clipsToBounds) {
-      if (borderMetrics.borderRadii.isUniform()) {
-        // In this case we can simply use `cornerRadius` exclusively.
-        cornerRadius = borderMetrics.borderRadii.topLeft;
-      } else {
-        // In this case we have to generate masking layer manually.
-        CGPathRef path = RCTPathCreateWithRoundedRect(
-            self.bounds,
-            RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero),
-            nil);
-
-        maskLayer = [CAShapeLayer layer];
-        maskLayer.path = path;
-        CGPathRelease(path);
-      }
-    }
-
-    layer.cornerRadius = cornerRadius;
-    layer.mask = maskLayer;
   }
 
+  // filter
   [_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;
+      if (std::holds_alternative<Float>(primitive.parameters)) {
+        if (primitive.type == FilterType::Brightness) {
+          multiplicativeBrightness *= std::get<Float>(primitive.parameters);
+        } else if (primitive.type == FilterType::Opacity) {
+          self.layer.opacity *= std::get<Float>(primitive.parameters);
+        }
       }
     }
 
@@ -1400,11 +1567,141 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
                                                     blue:multiplicativeBrightness
                                                    alpha:self.layer.opacity]
                                        .CGColor;
+    if (borderMetrics.borderRadii.isUniform()) {
+      _filterLayer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
+    } else {
+      RCTCornerInsets cornerInsets =
+          RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero);
+      _filterLayer.mask = [self createMaskLayer:self.bounds cornerInsets:cornerInsets];
+    }
     // So that this layer is always above any potential sublayers this view may
     // add
     _filterLayer.zPosition = CGFLOAT_MAX;
     [self.layer addSublayer:_filterLayer];
   }
+
+  // background image
+  [self clearExistingGradientLayers];
+  if (!_props->backgroundImage.empty()) {
+    for (const auto &gradient : _props->backgroundImage) {
+      CAGradientLayer *gradientLayer = [CAGradientLayer layer];
+      NSMutableArray *colors = [NSMutableArray array];
+      NSMutableArray *locations = [NSMutableArray array];
+      for (const auto &colorStop : gradient.colorStops) {
+        if (colorStop.position.has_value()) {
+          auto location = @(colorStop.position.value());
+          UIColor *color = RCTUIColorFromSharedColor(colorStop.color);
+          [colors addObject:(id)color.CGColor];
+          [locations addObject:location];
+        }
+      }
+      gradientLayer.startPoint = CGPointMake(gradient.startX, gradient.startY);
+      gradientLayer.endPoint = CGPointMake(gradient.endX, gradient.endY);
+
+      if (locations.count > 0) {
+        gradientLayer.locations = locations;
+      }
+      gradientLayer.colors = colors;
+      gradientLayer.frame = layer.bounds;
+
+      // border styling to work with gradient layers
+      if (useCoreAnimationBorderRendering) {
+        gradientLayer.borderWidth = layer.borderWidth;
+        gradientLayer.borderColor = layer.borderColor;
+        gradientLayer.cornerRadius = layer.cornerRadius;
+        gradientLayer.cornerCurve = layer.cornerCurve;
+      } else {
+        CAShapeLayer *maskLayer = [CAShapeLayer layer];
+        CGPathRef path = RCTPathCreateWithRoundedRect(
+            self.bounds,
+            RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero),
+            nil);
+        maskLayer.path = path;
+        CGPathRelease(path);
+        gradientLayer.mask = maskLayer;
+      }
+
+      gradientLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
+
+      [self.layer addSublayer:gradientLayer];
+      [_gradientLayers addObject:gradientLayer];
+    }
+  }
+
+  // box shadow
+  [_boxShadowLayer removeFromSuperlayer];
+  _boxShadowLayer = nil;
+  if (!_props->boxShadow.empty()) {
+    _boxShadowLayer = [CALayer layer];
+    [self.layer addSublayer:_boxShadowLayer];
+    _boxShadowLayer.zPosition = _borderLayer.zPosition;
+    _boxShadowLayer.frame = RCTGetBoundingRect(_props->boxShadow, self.layer.frame.size);
+
+    UIImage *boxShadowImage = RCTGetBoxShadowImage(
+        _props->boxShadow,
+        RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
+        RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths),
+        layer);
+
+    _boxShadowLayer.contents = (id)boxShadowImage.CGImage;
+  }
+
+  // clipping
+  if (self.currentContainerView.clipsToBounds) {
+    BOOL clipToPaddingBox = ReactNativeFeatureFlags::enableIOSViewClipToPaddingBox();
+    if (clipToPaddingBox) {
+      CALayer *maskLayer = [self createMaskLayer:RCTCGRectFromRect(_layoutMetrics.getPaddingFrame())
+                                    cornerInsets:RCTGetCornerInsets(
+                                                     RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
+                                                     RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths))];
+      self.currentContainerView.layer.mask = maskLayer;
+    } else {
+      if (borderMetrics.borderRadii.isUniform()) {
+        self.currentContainerView.layer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
+      } else {
+        CALayer *maskLayer =
+            [self createMaskLayer:self.bounds
+                     cornerInsets:RCTGetCornerInsets(
+                                      RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero)];
+        self.currentContainerView.layer.mask = maskLayer;
+      }
+
+      for (UIView *subview in self.currentContainerView.subviews) {
+        if ([subview isKindOfClass:[UIImageView class]]) {
+          RCTCornerInsets cornerInsets = RCTGetCornerInsets(
+              RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
+              RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths));
+
+          // If the subview is an image view, we have to apply the mask directly to the image view's layer,
+          // otherwise the image might overflow with the border radius.
+          subview.layer.mask = [self createMaskLayer:subview.bounds cornerInsets:cornerInsets];
+        }
+      }
+    }
+  } else {
+    self.currentContainerView.layer.mask = nil;
+  }
+}
+
+- (CAShapeLayer *)createMaskLayer:(CGRect)bounds cornerInsets:(RCTCornerInsets)cornerInsets
+{
+  CGPathRef path = RCTPathCreateWithRoundedRect(bounds, cornerInsets, nil);
+  CAShapeLayer *maskLayer = [CAShapeLayer layer];
+  maskLayer.path = path;
+  CGPathRelease(path);
+  return maskLayer;
+}
+
+- (void)clearExistingGradientLayers
+{
+  if (_gradientLayers == nil) {
+    _gradientLayers = [NSMutableArray new];
+    return;
+  }
+  for (CAGradientLayer *gradientLayer in _gradientLayers) {
+    [gradientLayer removeFromSuperlayer];
+  }
+  [_gradientLayers removeAllObjects];
 }
 
 #pragma mark - Accessibility
@@ -1439,7 +1736,7 @@ static NSString *RCTRecursiveAccessibilityLabel(UIView *view)
     return label;
   }
 
-  return RCTRecursiveAccessibilityLabel(self);
+  return RCTRecursiveAccessibilityLabel(self.currentContainerView);
 }
 
 - (BOOL)isAccessibilityElement

package/React/Fabric/Mounting/RCTMountingManager.mm

@@ -102,11 +102,6 @@ static void RCTPerformMountInstructions(
         break;
       }
 
-      case ShadowViewMutation::RemoveDeleteTree: {
-        // TODO - not supported yet
-        break;
-      }
-
       case ShadowViewMutation::Update: {
         auto &oldChildShadowView = mutation.oldChildShadowView;
         auto &newChildShadowView = mutation.newChildShadowView;

package/React/Fabric/RCTScheduler.mm

@@ -8,6 +8,7 @@
 #import "RCTScheduler.h"
 
 #import <cxxreact/SystraceSection.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/animations/LayoutAnimationDriver.h>
 #import <react/renderer/componentregistry/ComponentDescriptorFactory.h>
 #import <react/renderer/scheduler/Scheduler.h>
@@ -118,7 +119,7 @@ class LayoutAnimationDelegateProxy : public LayoutAnimationStatusDelegate, publi
 
     _delegateProxy = std::make_shared<SchedulerDelegateProxy>((__bridge void *)self);
 
-    if (reactNativeConfig->getBool("react_fabric:enabled_layout_animations_ios")) {
+    if (ReactNativeFeatureFlags::enableLayoutAnimationsOnIOS()) {
       _layoutAnimationDelegateProxy = std::make_shared<LayoutAnimationDelegateProxy>((__bridge void *)self);
       _animationDriver = std::make_shared<LayoutAnimationDriver>(
           toolbox.runtimeExecutor, toolbox.contextContainer, _layoutAnimationDelegateProxy.get());