react-native 0.68.1 → 0.69.0-rc.0

package/React/Views/RCTBorderDrawing.m

@@ -172,13 +172,15 @@ static CGPathRef RCTPathCreateOuterOutline(BOOL drawToEdge, CGRect rect, RCTCorn
   return RCTPathCreateWithRoundedRect(rect, RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero), NULL);
 }
 
-static CGContextRef
-RCTUIGraphicsBeginImageContext(CGSize size, CGColorRef backgroundColor, BOOL hasCornerRadii, BOOL drawToEdge)
+static UIGraphicsImageRenderer *
+RCTUIGraphicsImageRenderer(CGSize size, CGColorRef backgroundColor, BOOL hasCornerRadii, BOOL drawToEdge)
 {
   const CGFloat alpha = CGColorGetAlpha(backgroundColor);
   const BOOL opaque = (drawToEdge || !hasCornerRadii) && alpha == 1.0;
-  UIGraphicsBeginImageContextWithOptions(size, opaque, 0.0);
-  return UIGraphicsGetCurrentContext();
+  UIGraphicsImageRendererFormat *const rendererFormat = [UIGraphicsImageRendererFormat defaultFormat];
+  rendererFormat.opaque = opaque;
+  UIGraphicsImageRenderer *const renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size format:rendererFormat];
+  return renderer;
 }
 
 static UIImage *RCTGetSolidBorderImage(
@@ -229,164 +231,166 @@ static UIImage *RCTGetSolidBorderImage(
     edgeInsets.top + 1 + edgeInsets.bottom
   } : viewSize;
 
-  CGContextRef ctx = RCTUIGraphicsBeginImageContext(size, backgroundColor, hasCornerRadii, drawToEdge);
-  const CGRect rect = {.size = size};
-  CGPathRef path = RCTPathCreateOuterOutline(drawToEdge, rect, cornerRadii);
-
-  if (backgroundColor) {
-    CGContextSetFillColorWithColor(ctx, backgroundColor);
-    CGContextAddPath(ctx, path);
-    CGContextFillPath(ctx);
-  }
-
-  CGContextAddPath(ctx, path);
-  CGPathRelease(path);
-
-  CGPathRef insetPath = RCTPathCreateWithRoundedRect(UIEdgeInsetsInsetRect(rect, borderInsets), cornerInsets, NULL);
-
-  CGContextAddPath(ctx, insetPath);
-  CGContextEOClip(ctx);
-
-  BOOL hasEqualColors = RCTBorderColorsAreEqual(borderColors);
-  if ((drawToEdge || !hasCornerRadii) && hasEqualColors) {
-    CGContextSetFillColorWithColor(ctx, borderColors.left);
-    CGContextAddRect(ctx, rect);
-    CGContextAddPath(ctx, insetPath);
-    CGContextEOFillPath(ctx);
-
-  } else {
-    CGPoint topLeft = (CGPoint){borderInsets.left, borderInsets.top};
-    if (cornerInsets.topLeft.width > 0 && cornerInsets.topLeft.height > 0) {
-      CGPoint points[2];
-      RCTEllipseGetIntersectionsWithLine(
-          (CGRect){topLeft, {2 * cornerInsets.topLeft.width, 2 * cornerInsets.topLeft.height}},
-          CGPointZero,
-          topLeft,
-          points);
-      if (!isnan(points[1].x) && !isnan(points[1].y)) {
-        topLeft = points[1];
-      }
+  UIGraphicsImageRenderer *const imageRenderer =
+      RCTUIGraphicsImageRenderer(size, backgroundColor, hasCornerRadii, drawToEdge);
+  UIImage *image = [imageRenderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
+    const CGContextRef context = rendererContext.CGContext;
+    const CGRect rect = {.size = size};
+    CGPathRef path = RCTPathCreateOuterOutline(drawToEdge, rect, cornerRadii);
+
+    if (backgroundColor) {
+      CGContextSetFillColorWithColor(context, backgroundColor);
+      CGContextAddPath(context, path);
+      CGContextFillPath(context);
     }
 
-    CGPoint bottomLeft = (CGPoint){borderInsets.left, size.height - borderInsets.bottom};
-    if (cornerInsets.bottomLeft.width > 0 && cornerInsets.bottomLeft.height > 0) {
-      CGPoint points[2];
-      RCTEllipseGetIntersectionsWithLine(
-          (CGRect){
-              {bottomLeft.x, bottomLeft.y - 2 * cornerInsets.bottomLeft.height},
-              {2 * cornerInsets.bottomLeft.width, 2 * cornerInsets.bottomLeft.height}},
-          (CGPoint){0, size.height},
-          bottomLeft,
-          points);
-      if (!isnan(points[1].x) && !isnan(points[1].y)) {
-        bottomLeft = points[1];
+    CGContextAddPath(context, path);
+    CGPathRelease(path);
+
+    CGPathRef insetPath = RCTPathCreateWithRoundedRect(UIEdgeInsetsInsetRect(rect, borderInsets), cornerInsets, NULL);
+
+    CGContextAddPath(context, insetPath);
+    CGContextEOClip(context);
+
+    BOOL hasEqualColors = RCTBorderColorsAreEqual(borderColors);
+    if ((drawToEdge || !hasCornerRadii) && hasEqualColors) {
+      CGContextSetFillColorWithColor(context, borderColors.left);
+      CGContextAddRect(context, rect);
+      CGContextAddPath(context, insetPath);
+      CGContextEOFillPath(context);
+
+    } else {
+      CGPoint topLeft = (CGPoint){borderInsets.left, borderInsets.top};
+      if (cornerInsets.topLeft.width > 0 && cornerInsets.topLeft.height > 0) {
+        CGPoint points[2];
+        RCTEllipseGetIntersectionsWithLine(
+            (CGRect){topLeft, {2 * cornerInsets.topLeft.width, 2 * cornerInsets.topLeft.height}},
+            CGPointZero,
+            topLeft,
+            points);
+        if (!isnan(points[1].x) && !isnan(points[1].y)) {
+          topLeft = points[1];
+        }
       }
-    }
 
-    CGPoint topRight = (CGPoint){size.width - borderInsets.right, borderInsets.top};
-    if (cornerInsets.topRight.width > 0 && cornerInsets.topRight.height > 0) {
-      CGPoint points[2];
-      RCTEllipseGetIntersectionsWithLine(
-          (CGRect){
-              {topRight.x - 2 * cornerInsets.topRight.width, topRight.y},
-              {2 * cornerInsets.topRight.width, 2 * cornerInsets.topRight.height}},
-          (CGPoint){size.width, 0},
-          topRight,
-          points);
-      if (!isnan(points[0].x) && !isnan(points[0].y)) {
-        topRight = points[0];
+      CGPoint bottomLeft = (CGPoint){borderInsets.left, size.height - borderInsets.bottom};
+      if (cornerInsets.bottomLeft.width > 0 && cornerInsets.bottomLeft.height > 0) {
+        CGPoint points[2];
+        RCTEllipseGetIntersectionsWithLine(
+            (CGRect){
+                {bottomLeft.x, bottomLeft.y - 2 * cornerInsets.bottomLeft.height},
+                {2 * cornerInsets.bottomLeft.width, 2 * cornerInsets.bottomLeft.height}},
+            (CGPoint){0, size.height},
+            bottomLeft,
+            points);
+        if (!isnan(points[1].x) && !isnan(points[1].y)) {
+          bottomLeft = points[1];
+        }
       }
-    }
 
-    CGPoint bottomRight = (CGPoint){size.width - borderInsets.right, size.height - borderInsets.bottom};
-    if (cornerInsets.bottomRight.width > 0 && cornerInsets.bottomRight.height > 0) {
-      CGPoint points[2];
-      RCTEllipseGetIntersectionsWithLine(
-          (CGRect){
-              {bottomRight.x - 2 * cornerInsets.bottomRight.width, bottomRight.y - 2 * cornerInsets.bottomRight.height},
-              {2 * cornerInsets.bottomRight.width, 2 * cornerInsets.bottomRight.height}},
-          (CGPoint){size.width, size.height},
-          bottomRight,
-          points);
-      if (!isnan(points[0].x) && !isnan(points[0].y)) {
-        bottomRight = points[0];
+      CGPoint topRight = (CGPoint){size.width - borderInsets.right, borderInsets.top};
+      if (cornerInsets.topRight.width > 0 && cornerInsets.topRight.height > 0) {
+        CGPoint points[2];
+        RCTEllipseGetIntersectionsWithLine(
+            (CGRect){
+                {topRight.x - 2 * cornerInsets.topRight.width, topRight.y},
+                {2 * cornerInsets.topRight.width, 2 * cornerInsets.topRight.height}},
+            (CGPoint){size.width, 0},
+            topRight,
+            points);
+        if (!isnan(points[0].x) && !isnan(points[0].y)) {
+          topRight = points[0];
+        }
       }
-    }
 
-    CGColorRef currentColor = NULL;
+      CGPoint bottomRight = (CGPoint){size.width - borderInsets.right, size.height - borderInsets.bottom};
+      if (cornerInsets.bottomRight.width > 0 && cornerInsets.bottomRight.height > 0) {
+        CGPoint points[2];
+        RCTEllipseGetIntersectionsWithLine(
+            (CGRect){
+                {bottomRight.x - 2 * cornerInsets.bottomRight.width,
+                 bottomRight.y - 2 * cornerInsets.bottomRight.height},
+                {2 * cornerInsets.bottomRight.width, 2 * cornerInsets.bottomRight.height}},
+            (CGPoint){size.width, size.height},
+            bottomRight,
+            points);
+        if (!isnan(points[0].x) && !isnan(points[0].y)) {
+          bottomRight = points[0];
+        }
+      }
 
-    // RIGHT
-    if (borderInsets.right > 0) {
-      const CGPoint points[] = {
-          (CGPoint){size.width, 0},
-          topRight,
-          bottomRight,
-          (CGPoint){size.width, size.height},
-      };
+      CGColorRef currentColor = NULL;
 
-      currentColor = borderColors.right;
-      CGContextAddLines(ctx, points, sizeof(points) / sizeof(*points));
-    }
+      // RIGHT
+      if (borderInsets.right > 0) {
+        const CGPoint points[] = {
+            (CGPoint){size.width, 0},
+            topRight,
+            bottomRight,
+            (CGPoint){size.width, size.height},
+        };
 
-    // BOTTOM
-    if (borderInsets.bottom > 0) {
-      const CGPoint points[] = {
-          (CGPoint){0, size.height},
-          bottomLeft,
-          bottomRight,
-          (CGPoint){size.width, size.height},
-      };
-
-      if (!CGColorEqualToColor(currentColor, borderColors.bottom)) {
-        CGContextSetFillColorWithColor(ctx, currentColor);
-        CGContextFillPath(ctx);
-        currentColor = borderColors.bottom;
+        currentColor = borderColors.right;
+        CGContextAddLines(context, points, sizeof(points) / sizeof(*points));
       }
-      CGContextAddLines(ctx, points, sizeof(points) / sizeof(*points));
-    }
 
-    // LEFT
-    if (borderInsets.left > 0) {
-      const CGPoint points[] = {
-          CGPointZero,
-          topLeft,
-          bottomLeft,
-          (CGPoint){0, size.height},
-      };
-
-      if (!CGColorEqualToColor(currentColor, borderColors.left)) {
-        CGContextSetFillColorWithColor(ctx, currentColor);
-        CGContextFillPath(ctx);
-        currentColor = borderColors.left;
+      // BOTTOM
+      if (borderInsets.bottom > 0) {
+        const CGPoint points[] = {
+            (CGPoint){0, size.height},
+            bottomLeft,
+            bottomRight,
+            (CGPoint){size.width, size.height},
+        };
+
+        if (!CGColorEqualToColor(currentColor, borderColors.bottom)) {
+          CGContextSetFillColorWithColor(context, currentColor);
+          CGContextFillPath(context);
+          currentColor = borderColors.bottom;
+        }
+        CGContextAddLines(context, points, sizeof(points) / sizeof(*points));
       }
-      CGContextAddLines(ctx, points, sizeof(points) / sizeof(*points));
-    }
 
-    // TOP
-    if (borderInsets.top > 0) {
-      const CGPoint points[] = {
-          CGPointZero,
-          topLeft,
-          topRight,
-          (CGPoint){size.width, 0},
-      };
-
-      if (!CGColorEqualToColor(currentColor, borderColors.top)) {
-        CGContextSetFillColorWithColor(ctx, currentColor);
-        CGContextFillPath(ctx);
-        currentColor = borderColors.top;
+      // LEFT
+      if (borderInsets.left > 0) {
+        const CGPoint points[] = {
+            CGPointZero,
+            topLeft,
+            bottomLeft,
+            (CGPoint){0, size.height},
+        };
+
+        if (!CGColorEqualToColor(currentColor, borderColors.left)) {
+          CGContextSetFillColorWithColor(context, currentColor);
+          CGContextFillPath(context);
+          currentColor = borderColors.left;
+        }
+        CGContextAddLines(context, points, sizeof(points) / sizeof(*points));
       }
-      CGContextAddLines(ctx, points, sizeof(points) / sizeof(*points));
-    }
 
-    CGContextSetFillColorWithColor(ctx, currentColor);
-    CGContextFillPath(ctx);
-  }
+      // TOP
+      if (borderInsets.top > 0) {
+        const CGPoint points[] = {
+            CGPointZero,
+            topLeft,
+            topRight,
+            (CGPoint){size.width, 0},
+        };
+
+        if (!CGColorEqualToColor(currentColor, borderColors.top)) {
+          CGContextSetFillColorWithColor(context, currentColor);
+          CGContextFillPath(context);
+          currentColor = borderColors.top;
+        }
+        CGContextAddLines(context, points, sizeof(points) / sizeof(*points));
+      }
 
-  CGPathRelease(insetPath);
+      CGContextSetFillColorWithColor(context, currentColor);
+      CGContextFillPath(context);
+    }
 
-  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
-  UIGraphicsEndImageContext();
+    CGPathRelease(insetPath);
+  }];
 
   if (makeStretchable) {
     image = [image resizableImageWithCapInsets:edgeInsets];
@@ -477,42 +481,41 @@ static UIImage *RCTGetDashedOrDottedBorderImage(
   }
 
   const BOOL hasCornerRadii = RCTCornerRadiiAreAboveThreshold(cornerRadii);
-  CGContextRef ctx = RCTUIGraphicsBeginImageContext(viewSize, backgroundColor, hasCornerRadii, drawToEdge);
-  const CGRect rect = {.size = viewSize};
-
-  if (backgroundColor) {
-    CGPathRef outerPath = RCTPathCreateOuterOutline(drawToEdge, rect, cornerRadii);
-    CGContextAddPath(ctx, outerPath);
-    CGPathRelease(outerPath);
-
-    CGContextSetFillColorWithColor(ctx, backgroundColor);
-    CGContextFillPath(ctx);
-  }
-
-  // Stroking means that the width is divided in half and grows in both directions
-  // perpendicular to the path, that's why we inset by half the width, so that it
-  // reaches the edge of the rect.
-  CGRect pathRect = CGRectInset(rect, lineWidth / 2.0, lineWidth / 2.0);
-  CGPathRef path = RCTPathCreateWithRoundedRect(pathRect, RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero), NULL);
-
-  CGFloat dashLengths[2];
-  dashLengths[0] = dashLengths[1] = (borderStyle == RCTBorderStyleDashed ? 3 : 1) * lineWidth;
+  UIGraphicsImageRenderer *const imageRenderer =
+      RCTUIGraphicsImageRenderer(viewSize, backgroundColor, hasCornerRadii, drawToEdge);
+  return [imageRenderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
+    const CGContextRef context = rendererContext.CGContext;
+    const CGRect rect = {.size = viewSize};
+
+    if (backgroundColor) {
+      CGPathRef outerPath = RCTPathCreateOuterOutline(drawToEdge, rect, cornerRadii);
+      CGContextAddPath(context, outerPath);
+      CGPathRelease(outerPath);
+
+      CGContextSetFillColorWithColor(context, backgroundColor);
+      CGContextFillPath(context);
+    }
 
-  CGContextSetLineWidth(ctx, lineWidth);
-  CGContextSetLineDash(ctx, 0, dashLengths, sizeof(dashLengths) / sizeof(*dashLengths));
+    // Stroking means that the width is divided in half and grows in both directions
+    // perpendicular to the path, that's why we inset by half the width, so that it
+    // reaches the edge of the rect.
+    CGRect pathRect = CGRectInset(rect, lineWidth / 2.0, lineWidth / 2.0);
+    CGPathRef path = RCTPathCreateWithRoundedRect(pathRect, RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero), NULL);
 
-  CGContextSetStrokeColorWithColor(ctx, [UIColor yellowColor].CGColor);
+    CGFloat dashLengths[2];
+    dashLengths[0] = dashLengths[1] = (borderStyle == RCTBorderStyleDashed ? 3 : 1) * lineWidth;
 
-  CGContextAddPath(ctx, path);
-  CGContextSetStrokeColorWithColor(ctx, borderColors.top);
-  CGContextStrokePath(ctx);
+    CGContextSetLineWidth(context, lineWidth);
+    CGContextSetLineDash(context, 0, dashLengths, sizeof(dashLengths) / sizeof(*dashLengths));
 
-  CGPathRelease(path);
+    CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
 
-  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
-  UIGraphicsEndImageContext();
+    CGContextAddPath(context, path);
+    CGContextSetStrokeColorWithColor(context, borderColors.top);
+    CGContextStrokePath(context);
 
-  return image;
+    CGPathRelease(path);
+  }];
 }
 
 UIImage *RCTGetBorderImage(

package/React/Views/RCTComponent.h

@@ -15,6 +15,7 @@
  */
 typedef void (^RCTDirectEventBlock)(NSDictionary *body);
 typedef void (^RCTBubblingEventBlock)(NSDictionary *body);
+typedef void (^RCTCapturingEventBlock)(NSDictionary *body);
 
 /**
  * Logical node in a tree of application components. Both `ShadowView` and

package/React/Views/RCTComponentData.m

@@ -260,7 +260,8 @@ static RCTPropBlock createNSInvocationSetter(NSMethodSignature *typeSignature, S
     // Build setter block
     void (^setterBlock)(id target, id json) = nil;
     if (type == NSSelectorFromString(@"RCTBubblingEventBlock:") ||
-        type == NSSelectorFromString(@"RCTDirectEventBlock:")) {
+        type == NSSelectorFromString(@"RCTDirectEventBlock:") ||
+        type == NSSelectorFromString(@"RCTCapturingEventBlock:")) {
       // Special case for event handlers
       setterBlock =
           createEventSetter(name, setter, self.eventInterceptor, _bridge ? _bridge.eventDispatcher : _eventDispatcher);
@@ -386,6 +387,7 @@ static RCTPropBlock createNSInvocationSetter(NSMethodSignature *typeSignature, S
 - (NSDictionary<NSString *, id> *)viewConfig
 {
   NSMutableArray<NSString *> *bubblingEvents = [NSMutableArray new];
+  NSMutableArray<NSString *> *capturingEvents = [NSMutableArray new];
   NSMutableArray<NSString *> *directEvents = [NSMutableArray new];
 
 #pragma clang diagnostic push
@@ -429,6 +431,13 @@ static RCTPropBlock createNSInvocationSetter(NSMethodSignature *typeSignature, S
     if ([type isEqualToString:@"RCTBubblingEventBlock"]) {
       [bubblingEvents addObject:RCTNormalizeInputEventName(name)];
 
+      // TODO(109509380): Remove this gating
+      if (!RCTViewConfigEventValidAttributesDisabled()) {
+        propTypes[name] = @"BOOL";
+      }
+    } else if ([type isEqualToString:@"RCTCapturingEventBlock"]) {
+      [capturingEvents addObject:RCTNormalizeInputEventName(name)];
+
       // TODO(109509380): Remove this gating
       if (!RCTViewConfigEventValidAttributesDisabled()) {
         propTypes[name] = @"BOOL";
@@ -464,6 +473,7 @@ static RCTPropBlock createNSInvocationSetter(NSMethodSignature *typeSignature, S
     @"propTypes" : propTypes,
     @"directEvents" : directEvents,
     @"bubblingEvents" : bubblingEvents,
+    @"capturingEvents" : capturingEvents,
     @"baseModuleName" : superClass == [NSObject class] ? (id)kCFNull : moduleNameForClass(superClass),
   };
 }

package/React/Views/RCTDatePickerManager.m

@@ -6,8 +6,6 @@
  */
 
 #import "RCTDatePickerManager.h"
-
-#import <React/RCTUIManager.h>
 #import "RCTBridge.h"
 #import "RCTDatePicker.h"
 #import "UIView+React.h"
@@ -44,6 +42,8 @@ RCT_ENUM_CONVERTER(
 
 @implementation RCTDatePickerManager
 
+@synthesize viewRegistry_DEPRECATED = _viewRegistry_DEPRECATED;
+
 RCT_EXPORT_MODULE()
 
 - (UIView *)view
@@ -62,16 +62,15 @@ RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone, NSTimeZone)
 
 RCT_EXPORT_METHOD(setNativeDate : (nonnull NSNumber *)viewTag toDate : (NSDate *)date)
 {
-  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-    UIView *view = viewRegistry[viewTag];
-
+  [_viewRegistry_DEPRECATED addUIBlock:^(RCTViewRegistry *viewRegistry) {
+    UIView *view = [viewRegistry viewForReactTag:viewTag];
     if ([view isKindOfClass:[RCTDatePicker class]]) {
       [(RCTDatePicker *)view setDate:date];
     } else {
       // This component is used in Fabric through LegacyInteropLayer.
       // `RCTDatePicker` view is subview of `RCTLegacyViewManagerInteropComponentView`.
       // `viewTag` passed as parameter to this method is tag of the `RCTLegacyViewManagerInteropComponentView`.
-      UIView *subview = [uiManager viewForReactTag:viewTag].subviews.firstObject;
+      UIView *subview = view.subviews.firstObject;
       if ([subview isKindOfClass:[RCTDatePicker class]]) {
         [(RCTDatePicker *)subview setDate:date];
       } else {

package/React/Views/RCTModalHostView.h

@@ -38,7 +38,7 @@
 @property (nonatomic, copy) RCTDirectEventBlock onOrientationChange;
 
 // Fabric only
-@property (nonatomic, copy) RCTBubblingEventBlock onDismiss;
+@property (nonatomic, copy) RCTDirectEventBlock onDismiss;
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
 

package/React/Views/RCTView.h

@@ -103,4 +103,14 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
  */
 @property (nonatomic, assign) UIEdgeInsets hitTestEdgeInsets;
 
+/**
+ * (Experimental and unused for Paper) Pointer event handlers.
+ */
+@property (nonatomic, assign) RCTBubblingEventBlock onPointerCancel;
+@property (nonatomic, assign) RCTBubblingEventBlock onPointerDown;
+@property (nonatomic, assign) RCTBubblingEventBlock onPointerMove2;
+@property (nonatomic, assign) RCTBubblingEventBlock onPointerUp;
+@property (nonatomic, assign) RCTCapturingEventBlock onPointerEnter2;
+@property (nonatomic, assign) RCTCapturingEventBlock onPointerLeave2;
+
 @end

package/React/Views/RCTView.m

@@ -7,6 +7,8 @@
 
 #import "RCTView.h"
 
+#import <React/RCTMockDef.h>
+
 #import "RCTAutoInsetsProtocol.h"
 #import "RCTBorderDrawing.h"
 #import "RCTI18nUtil.h"
@@ -14,6 +16,9 @@
 #import "RCTViewUtils.h"
 #import "UIView+React.h"
 
+RCT_MOCK_DEF(RCTView, RCTContentInsets);
+#define RCTContentInsets RCT_MOCK_USE(RCTView, RCTContentInsets)
+
 UIAccessibilityTraits const SwitchAccessibilityTrait = 0x20000000000001;
 
 @implementation UIView (RCTViewUnmounting)
@@ -706,33 +711,45 @@ static CGFloat RCTDefaultIfNegativeTo(CGFloat defaultValue, CGFloat x)
   };
 }
 
-- (RCTBorderColors)borderColors
+- (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCollection
 {
   const BOOL isRTL = _reactLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft;
 
+  UIColor *directionAwareBorderLeftColor = nil;
+  UIColor *directionAwareBorderRightColor = nil;
+
   if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) {
     UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor;
     UIColor *borderEndColor = _borderEndColor ?: _borderRightColor;
 
-    UIColor *directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
-    UIColor *directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;
-
-    return (RCTBorderColors){
-        (_borderTopColor ?: _borderColor).CGColor,
-        (directionAwareBorderLeftColor ?: _borderColor).CGColor,
-        (_borderBottomColor ?: _borderColor).CGColor,
-        (directionAwareBorderRightColor ?: _borderColor).CGColor,
-    };
+    directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
+    directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;
+  } else {
+    directionAwareBorderLeftColor = (isRTL ? _borderEndColor : _borderStartColor) ?: _borderLeftColor;
+    directionAwareBorderRightColor = (isRTL ? _borderStartColor : _borderEndColor) ?: _borderRightColor;
   }
 
-  UIColor *directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor;
-  UIColor *directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor;
+  UIColor *borderColor = _borderColor;
+  UIColor *borderTopColor = _borderTopColor;
+  UIColor *borderBottomColor = _borderBottomColor;
+
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000
+  if (@available(iOS 13.0, *)) {
+    borderColor = [borderColor resolvedColorWithTraitCollection:self.traitCollection];
+    borderTopColor = [borderTopColor resolvedColorWithTraitCollection:self.traitCollection];
+    directionAwareBorderLeftColor =
+        [directionAwareBorderLeftColor resolvedColorWithTraitCollection:self.traitCollection];
+    borderBottomColor = [borderBottomColor resolvedColorWithTraitCollection:self.traitCollection];
+    directionAwareBorderRightColor =
+        [directionAwareBorderRightColor resolvedColorWithTraitCollection:self.traitCollection];
+  }
+#endif
 
   return (RCTBorderColors){
-    (_borderTopColor ?: _borderColor).CGColor,
-    (directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor).CGColor,
-    (_borderBottomColor ?: _borderColor).CGColor,
-    (directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor).CGColor,
+      (borderTopColor ?: borderColor).CGColor,
+      (directionAwareBorderLeftColor ?: borderColor).CGColor,
+      (borderBottomColor ?: borderColor).CGColor,
+      (directionAwareBorderRightColor ?: borderColor).CGColor,
   };
 }
 
@@ -758,7 +775,7 @@ static CGFloat RCTDefaultIfNegativeTo(CGFloat defaultValue, CGFloat x)
 
   const RCTCornerRadii cornerRadii = [self cornerRadii];
   const UIEdgeInsets borderInsets = [self bordersAsInsets];
-  const RCTBorderColors borderColors = [self borderColors];
+  const RCTBorderColors borderColors = [self borderColorsWithTraitCollection:self.traitCollection];
 
   BOOL useIOSBorderRendering = RCTCornerRadiiAreEqual(cornerRadii) && RCTBorderInsetsAreEqual(borderInsets) &&
       RCTBorderColorsAreEqual(borderColors) && _borderStyle == RCTBorderStyleSolid &&