react-native-tvos 0.75.2-0rc0 → 0.76.0-0rc0

package/React/Fabric/RCTSurfacePresenter.mm

@@ -43,33 +43,6 @@
 using namespace facebook;
 using namespace facebook::react;
 
-static dispatch_queue_t RCTGetBackgroundQueue()
-{
-  static dispatch_queue_t queue;
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{
-    dispatch_queue_attr_t attr =
-        dispatch_queue_attr_make_with_qos_class(DISPATCH_QUEUE_SERIAL, QOS_CLASS_USER_INTERACTIVE, 0);
-    queue = dispatch_queue_create("com.facebook.react.background", attr);
-  });
-  return queue;
-}
-
-static BackgroundExecutor RCTGetBackgroundExecutor()
-{
-  return [](std::function<void()> &&callback) {
-    if (RCTIsMainQueue()) {
-      callback();
-      return;
-    }
-
-    auto copyableCallback = callback;
-    dispatch_async(RCTGetBackgroundQueue(), ^{
-      copyableCallback();
-    });
-  };
-}
-
 @interface RCTSurfacePresenter () <RCTSchedulerDelegate, RCTMountingManagerDelegate>
 @end
 
@@ -288,10 +261,6 @@ static BackgroundExecutor RCTGetBackgroundExecutor()
   toolbox.runtimeExecutor = runtimeExecutor;
   toolbox.bridgelessBindingsExecutor = _bridgelessBindingsExecutor;
 
-  if (ReactNativeFeatureFlags::enableBackgroundExecutor()) {
-    toolbox.backgroundExecutor = RCTGetBackgroundExecutor();
-  }
-
   toolbox.asynchronousEventBeatFactory =
       [runtimeExecutor](const EventBeat::SharedOwnerBox &ownerBox) -> std::unique_ptr<EventBeat> {
     auto runLoopObserver =

package/React/Fabric/Utils/RCTBoxShadow.h

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <vector>
+
+#import <React/RCTBorderDrawing.h>
+#import <React/RCTDefines.h>
+#import <UIKit/UIKit.h>
+#import <react/renderer/graphics/BoxShadow.h>
+
+RCT_EXTERN UIImage *RCTGetBoxShadowImage(
+    const std::vector<facebook::react::BoxShadow> &shadows,
+    RCTCornerRadii cornerRadii,
+    UIEdgeInsets edgeInsets,
+    CALayer *layer);
+
+RCT_EXTERN CGRect RCTGetBoundingRect(const std::vector<facebook::react::BoxShadow> &boxShadows, CGSize layerSize);

package/React/Fabric/Utils/RCTBoxShadow.mm

@@ -0,0 +1,301 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTBoxShadow.h"
+
+#import <CoreImage/CoreImage.h>
+#import <React/RCTConversions.h>
+
+#import <react/renderer/graphics/Color.h>
+
+#import <math.h>
+
+using namespace facebook::react;
+// See https://drafts.csswg.org/css-backgrounds/#shadow-shape
+static CGFloat adjustedCornerRadius(CGFloat cornerRadius, CGFloat spreadDistance)
+{
+  CGFloat adjustment = spreadDistance;
+  (void)adjustment;
+  if (cornerRadius < abs(spreadDistance)) {
+    const CGFloat r = cornerRadius / (CGFloat)abs(spreadDistance);
+    const CGFloat p = (CGFloat)pow(r - 1.0, 3.0);
+    adjustment *= 1.0 + p;
+  }
+
+  return fmax(cornerRadius + adjustment, 0);
+}
+
+static RCTCornerRadii cornerRadiiForBoxShadow(RCTCornerRadii cornerRadii, CGFloat spreadDistance)
+{
+  return {
+      adjustedCornerRadius(cornerRadii.topLeftHorizontal, spreadDistance),
+      adjustedCornerRadius(cornerRadii.topLeftVertical, spreadDistance),
+      adjustedCornerRadius(cornerRadii.topRightHorizontal, spreadDistance),
+      adjustedCornerRadius(cornerRadii.topRightVertical, spreadDistance),
+      adjustedCornerRadius(cornerRadii.bottomLeftHorizontal, spreadDistance),
+      adjustedCornerRadius(cornerRadii.bottomLeftVertical, spreadDistance),
+      adjustedCornerRadius(cornerRadii.bottomRightHorizontal, spreadDistance),
+      adjustedCornerRadius(cornerRadii.bottomRightVertical, spreadDistance)};
+}
+
+// Returns the smallest CGRect that will contain all shadows and the layer itself.
+// The origin represents the location of this box relative to the layer the shadows
+// are attached to.
+CGRect RCTGetBoundingRect(const std::vector<BoxShadow> &boxShadows, CGSize layerSize)
+{
+  CGFloat smallestX = 0;
+  CGFloat smallestY = 0;
+  CGFloat largestX = layerSize.width;
+  CGFloat largestY = layerSize.height;
+  for (const auto &boxShadow : boxShadows) {
+    if (!boxShadow.inset) {
+      CGFloat negativeXExtent = boxShadow.offsetX - boxShadow.spreadDistance - boxShadow.blurRadius;
+      smallestX = MIN(smallestX, negativeXExtent);
+      CGFloat negativeYExtent = boxShadow.offsetY - boxShadow.spreadDistance - boxShadow.blurRadius;
+      smallestY = MIN(smallestY, negativeYExtent);
+      CGFloat positiveXExtent = boxShadow.offsetX + boxShadow.spreadDistance + boxShadow.blurRadius + layerSize.width;
+      largestX = MAX(largestX, positiveXExtent);
+      CGFloat positiveYExtent = boxShadow.offsetY + boxShadow.spreadDistance + boxShadow.blurRadius + layerSize.height;
+      largestY = MAX(largestY, positiveYExtent);
+    }
+  }
+
+  return CGRectMake(smallestX, smallestY, largestX - smallestX, largestY - smallestY);
+}
+
+static std::pair<std::vector<BoxShadow>, std::vector<BoxShadow>> splitBoxShadowsByInset(
+    const std::vector<BoxShadow> &allShadows)
+{
+  std::vector<BoxShadow> outsetShadows, insetShadows;
+
+  std::partition_copy(
+      allShadows.begin(),
+      allShadows.end(),
+      std::back_inserter(insetShadows),
+      std::back_inserter(outsetShadows),
+      [](BoxShadow shadow) { return shadow.inset; });
+
+  return std::make_pair(outsetShadows, insetShadows);
+}
+
+static CGRect insetRect(CGRect rect, CGFloat left, CGFloat top, CGFloat right, CGFloat bottom)
+{
+  return CGRectMake(
+      rect.origin.x + left, rect.origin.y + top, rect.size.width - right - left, rect.size.height - bottom - top);
+}
+
+static CGColorRef colorRefFromSharedColor(const SharedColor &color)
+{
+  CGColorRef colorRef = RCTUIColorFromSharedColor(color).CGColor;
+  return colorRef ? colorRef : [UIColor blackColor].CGColor;
+}
+
+// Core graphics has support for shadows that looks similar to web and are very
+// fast to apply. The only issue is that this shadow does not take a spread
+// radius like on web. To get around this, we draw the shadow rect (the rect
+// that casts the shadow, not the shadow itself) offscreen. This shadow rect
+// is correctly sized to account for spread radius. Then, when setting the
+// shadow itself, we modify the offsetX/Y to account for the fact that our
+// shadow rect is offscreen and position it where it needs to be in the image.
+static void renderOutsetShadows(
+    std::vector<BoxShadow> &outsetShadows,
+    RCTCornerRadii cornerRadii,
+    CALayer *layer,
+    CGRect boundingRect,
+    CGContextRef context)
+{
+  if (outsetShadows.empty()) {
+    return;
+  }
+  // Save state before doing any work so that we can restore it after we have
+  // drawn all of our shadows. This ensures that we do not need to worry about
+  // graphical state carrying over after this function returns
+  CGContextSaveGState(context);
+  // Reverse iterator as shadows are stacked back to front
+  for (auto it = outsetShadows.rbegin(); it != outsetShadows.rend(); ++it) {
+    CGContextSaveGState(context);
+    CGFloat offsetX = it->offsetX;
+    CGFloat offsetY = it->offsetY;
+    CGFloat blurRadius = it->blurRadius;
+    CGFloat spreadDistance = it->spreadDistance;
+    CGColorRef color = colorRefFromSharedColor(it->color);
+
+    // First, define the shadow rect. This is the rect that will be filled
+    // and _cast_ the shadow. As a result, the size does not incorporate
+    // the blur radius since this rect is not the shadow itself.
+    const RCTCornerInsets shadowRectCornerInsets =
+        RCTGetCornerInsets(cornerRadiiForBoxShadow(cornerRadii, spreadDistance), UIEdgeInsetsZero);
+    CGSize shadowRectSize = CGSizeMake(
+        fmax(layer.bounds.size.width + 2 * spreadDistance, 0), fmax(layer.bounds.size.height + 2 * spreadDistance, 0));
+    // Ensure this is drawn offscreen and will not show in the image
+    CGRect shadowRect = CGRectMake(-shadowRectSize.width, 0, shadowRectSize.width, shadowRectSize.height);
+    CGPathRef shadowRectPath = RCTPathCreateWithRoundedRect(shadowRect, shadowRectCornerInsets, nil);
+
+    // Second, set the shadow as graphics state so that when we fill our
+    // shadow rect it will actually cast a shadow. The offset of this
+    // shadow needs to compensate for the fact that the shadow rect is
+    // offscreen. Additionally, we take away the spread radius since spread
+    // grows in all directions but the origin of our shadow rect is just
+    // the negative width, which accounts for 2*spread radius.
+    CGContextSetShadowWithColor(
+        context,
+        CGSizeMake(
+            offsetX - boundingRect.origin.x - spreadDistance - shadowRect.origin.x,
+            offsetY - boundingRect.origin.y - spreadDistance),
+        blurRadius,
+        color);
+
+    // Third, the Core Graphics functions to actually draw the shadow rect
+    // and thus the shadow itself.
+    CGContextAddPath(context, shadowRectPath);
+    // Color here does not matter, we just need something that has 1 for
+    // alpha so that the shadow is visible. The rect is purposely rendered
+    // outside of the context so it should not be visible.
+    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
+    CGContextFillPath(context);
+
+    CGPathRelease(shadowRectPath);
+    CGContextRestoreGState(context);
+  }
+  // Lastly, clear out the region inside the view so that the shadows do
+  // not cover its content
+  const RCTCornerInsets layerCornerInsets = RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero);
+  CGPathRef shadowPathAlignedWithLayer = RCTPathCreateWithRoundedRect(
+      CGRectMake(-boundingRect.origin.x, -boundingRect.origin.y, layer.bounds.size.width, layer.bounds.size.height),
+      layerCornerInsets,
+      nil);
+  CGContextAddPath(context, shadowPathAlignedWithLayer);
+  CGContextSetBlendMode(context, kCGBlendModeClear);
+  CGContextFillPath(context);
+
+  CGPathRelease(shadowPathAlignedWithLayer);
+  CGContextRestoreGState(context);
+}
+
+// Just like with outset shadows, we need to draw inset shadow rects offscreen
+// then offset the shadow it casts to the proper place. We can replicate the shape
+// of the inset shadow by using 2 rects. One is the same size as the view it is
+// attached to, plus some padding. The other represents a cropping region of the
+// first rect, with the exact postion and size of this region depending on the
+// shadow's params. We make this cropping region by using the EO fill pattern so
+// that the interection of the 2 rects is clear, and thus no shadow is cast.
+static void renderInsetShadows(
+    std::vector<BoxShadow> &insetShadows,
+    RCTCornerRadii cornerRadii,
+    UIEdgeInsets edgeInsets,
+    CALayer *layer,
+    CGRect boundingRect,
+    CGContextRef context)
+{
+  if (insetShadows.empty()) {
+    return;
+  }
+  // Save state before doing any work so that we can restore it after we have
+  // drawn all of our shadows. This ensures that we do not need to worry about
+  // graphical state carrying over after this function returns
+  CGContextSaveGState(context);
+
+  CGRect layerFrameRelativeToBoundingRect =
+      CGRectMake(-boundingRect.origin.x, -boundingRect.origin.y, layer.bounds.size.width, layer.bounds.size.height);
+  CGRect shadowFrame =
+      insetRect(layerFrameRelativeToBoundingRect, edgeInsets.left, edgeInsets.top, edgeInsets.right, edgeInsets.bottom);
+
+  // First, create a clipping area so we only draw within the view's bounds.
+  // If we do not do this, blur artifacts will show up outside the view.
+  CGRect outerClippingRect = CGRectMake(0, 0, boundingRect.size.width, boundingRect.size.height);
+  // Add the path twice so we only draw inside the view with the EO crop rule
+  CGContextAddRect(context, outerClippingRect);
+  CGContextAddRect(context, outerClippingRect);
+  const RCTCornerInsets cornerInsetsForLayer = RCTGetCornerInsets(cornerRadii, edgeInsets);
+  CGPathRef layerPath = RCTPathCreateWithRoundedRect(shadowFrame, cornerInsetsForLayer, nil);
+  CGContextAddPath(context, layerPath);
+  CGContextEOClip(context);
+  CGPathRelease(layerPath);
+
+  // Reverse iterator as shadows are stacked back to front
+  for (auto it = insetShadows.rbegin(); it != insetShadows.rend(); ++it) {
+    CGContextSaveGState(context);
+    CGFloat offsetX = it->offsetX;
+    CGFloat offsetY = it->offsetY;
+    CGFloat blurRadius = it->blurRadius;
+    CGFloat spreadDistance = it->spreadDistance;
+    CGColorRef color = colorRefFromSharedColor(it->color);
+
+    // Second, create the two offscreen rects we will use to create the correct
+    // inset shadow shape. shadowRect has an originX such that it AND the clear
+    // region are both guaranteed to be offscreen. We do not want some combination
+    // of shadow params to allow the clear region to showup inside our context.
+    // We also pad the size of the shadow rect by the blur radius so that the
+    // edges of the shadow remain a solid color and do not blend with outside
+    // of the view.
+    CGRect shadowCastingRect = CGRectInset(shadowFrame, -blurRadius, -blurRadius);
+    CGRect clearRegionRect = CGRectInset(shadowFrame, spreadDistance, spreadDistance);
+    // This happens if the spread causes the height/width to be negative. A null
+    // rect breaks a lot of the logic, so lets just keep it as a point
+    if (CGRectIsNull(clearRegionRect)) {
+      clearRegionRect = CGRectMake(0, 0, 0, 0);
+    }
+    CGPoint offsetToMoveOffscreen = CGPointMake(
+        -fmax(
+            shadowCastingRect.size.width,
+            clearRegionRect.size.width + offsetX + (clearRegionRect.origin.x - shadowCastingRect.origin.x)) -
+            shadowCastingRect.origin.x,
+        0);
+    shadowCastingRect = CGRectOffset(shadowCastingRect, offsetToMoveOffscreen.x, offsetToMoveOffscreen.y);
+    clearRegionRect =
+        CGRectOffset(clearRegionRect, offsetToMoveOffscreen.x + offsetX, offsetToMoveOffscreen.y + offsetY);
+    CGContextAddRect(context, shadowCastingRect);
+
+    const RCTCornerInsets cornerInsetsForClearRegion =
+        RCTGetCornerInsets(cornerRadiiForBoxShadow(cornerRadii, -spreadDistance), edgeInsets);
+    CGPathRef clearRegionPath = RCTPathCreateWithRoundedRect(clearRegionRect, cornerInsetsForClearRegion, nil);
+    CGContextAddPath(context, clearRegionPath);
+
+    // Third, set the shadow graphics state with the appropriate offset such that
+    // it is positioned on top of the view. We subtract blurRadius because the
+    // shadow rect is padded.
+    CGContextSetShadowWithColor(
+        context, CGSizeMake(-offsetToMoveOffscreen.x, -offsetToMoveOffscreen.y), blurRadius, color);
+
+    // Fourth, the Core Graphics functions to actually draw the shadow rect
+    // and thus the shadow itself. Note we use an EO fill path so that the
+    // intersection between our two rects will be clear. The disjoint parts of
+    // the rect will be colored, but because of the clipping area, we only see
+    // the shadow projected from the shadow rect, not the clear region rect.
+    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
+    CGContextEOFillPath(context);
+
+    CGContextRestoreGState(context);
+  }
+
+  CGContextRestoreGState(context);
+}
+
+UIImage *RCTGetBoxShadowImage(
+    const std::vector<BoxShadow> &shadows,
+    RCTCornerRadii cornerRadii,
+    UIEdgeInsets edgeInsets,
+    CALayer *layer)
+{
+  CGRect boundingRect = RCTGetBoundingRect(shadows, layer.bounds.size);
+  UIGraphicsImageRendererFormat *const rendererFormat = [UIGraphicsImageRendererFormat defaultFormat];
+  UIGraphicsImageRenderer *const renderer = [[UIGraphicsImageRenderer alloc] initWithSize:boundingRect.size
+                                                                                   format:rendererFormat];
+  UIImage *const boxShadowImage =
+      [renderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
+        auto [outsetShadows, insetShadows] = splitBoxShadowsByInset(shadows);
+        const CGContextRef context = rendererContext.CGContext;
+        // Outset shadows should be before inset shadows since outset needs to
+        // clear out a region in the view so we do not block its contents.
+        // Inset shadows could draw over those outset shadows but if the shadow
+        // colors have alpha < 1 then we will have inaccurate alpha compositing
+        renderOutsetShadows(outsetShadows, cornerRadii, layer, boundingRect, context);
+        renderInsetShadows(insetShadows, cornerRadii, edgeInsets, layer, boundingRect, context);
+      }];
+
+  return boxShadowImage;
+}

package/React/Modules/RCTRedBoxExtraDataViewController.m

@@ -6,6 +6,7 @@
  */
 
 #import "RCTRedBoxExtraDataViewController.h"
+#import "React/RCTUtils.h"
 
 @interface RCTRedBoxExtraDataCell : UITableViewCell
 
@@ -24,13 +25,13 @@
 
     self.keyLabel = [UILabel new];
     [self.contentView addSubview:self.keyLabel];
-
     self.keyLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    [self.keyLabel.leadingAnchor constraintEqualToAnchor:contentLayout.leadingAnchor].active = YES;
-    [self.keyLabel.topAnchor constraintEqualToAnchor:contentLayout.topAnchor].active = YES;
-    [self.keyLabel.bottomAnchor constraintEqualToAnchor:contentLayout.bottomAnchor].active = YES;
-    [self.keyLabel.widthAnchor constraintEqualToAnchor:contentLayout.widthAnchor multiplier:0.3].active = YES;
-
+    [NSLayoutConstraint activateConstraints:@[
+      [self.keyLabel.leadingAnchor constraintEqualToAnchor:contentLayout.leadingAnchor],
+      [self.keyLabel.topAnchor constraintEqualToAnchor:contentLayout.topAnchor],
+      [self.keyLabel.bottomAnchor constraintEqualToAnchor:contentLayout.bottomAnchor],
+      [self.keyLabel.widthAnchor constraintEqualToAnchor:contentLayout.widthAnchor multiplier:0.3]
+    ]];
     self.keyLabel.textColor = [UIColor whiteColor];
     self.keyLabel.numberOfLines = 0;
 #if !TARGET_OS_TV
@@ -39,13 +40,13 @@
 #endif
     self.valueLabel = [UILabel new];
     [self.contentView addSubview:self.valueLabel];
-
     self.valueLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    [self.valueLabel.leadingAnchor constraintEqualToAnchor:self.keyLabel.trailingAnchor constant:10.f].active = YES;
-    [self.valueLabel.trailingAnchor constraintEqualToAnchor:contentLayout.trailingAnchor].active = YES;
-    [self.valueLabel.topAnchor constraintEqualToAnchor:contentLayout.topAnchor].active = YES;
-    [self.valueLabel.bottomAnchor constraintEqualToAnchor:contentLayout.bottomAnchor].active = YES;
-
+    [NSLayoutConstraint activateConstraints:@[
+      [self.valueLabel.leadingAnchor constraintEqualToAnchor:self.keyLabel.trailingAnchor constant:10.f],
+      [self.valueLabel.trailingAnchor constraintEqualToAnchor:contentLayout.trailingAnchor],
+      [self.valueLabel.topAnchor constraintEqualToAnchor:contentLayout.topAnchor],
+      [self.valueLabel.bottomAnchor constraintEqualToAnchor:contentLayout.bottomAnchor]
+    ]];
     self.valueLabel.textColor = [UIColor whiteColor];
     self.valueLabel.numberOfLines = 0;
 #if !TARGET_OS_TV
@@ -75,74 +76,91 @@
   if (self = [super init]) {
     _extraData = [NSMutableArray new];
     _extraDataTitle = [NSMutableArray new];
-    self.view.backgroundColor = [UIColor colorWithRed:0.8 green:0 blue:0 alpha:1];
+  }
+  return self;
+}
+
+- (UIButton *)redBoxButtonWithTitle:(NSString *)title
+            accessibilityIdentifier:(NSString *)accessibilityIdentifier
+                             action:(SEL)action
+{
+  UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
+  button.accessibilityIdentifier = accessibilityIdentifier;
+
+  button.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
 
-    _tableView = [UITableView new];
-    _tableView.delegate = self;
-    _tableView.dataSource = self;
-    _tableView.backgroundColor = [UIColor clearColor];
-    _tableView.estimatedRowHeight = 200;
+  button.titleLabel.font = [UIFont systemFontOfSize:13];
+
+  [button setTitle:title forState:UIControlStateNormal];
+  [button setTitleColor:[UIColor colorWithWhite:1 alpha:1] forState:UIControlStateNormal];
+  [button setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
+
+  [button addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
+  return button;
+}
+
+- (void)viewDidLoad
+{
+  CGFloat bottomSafeAreaInset = RCTKeyWindow().safeAreaInsets.bottom;
+
+  CGFloat buttonHeight = 60;
+  CGFloat buttonWidth = self.view.bounds.size.width / 2;
+
+  _tableView = [UITableView new];
+  _tableView.translatesAutoresizingMaskIntoConstraints = NO;
+  _tableView.delegate = self;
+  _tableView.dataSource = self;
+  _tableView.backgroundColor = [UIColor colorWithRed:0.8 green:0 blue:0 alpha:1];
 #if !TARGET_OS_TV
-    _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
+  _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
 #endif
-    _tableView.rowHeight = UITableViewAutomaticDimension;
-    _tableView.allowsSelection = NO;
+  _tableView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
+  _tableView.allowsSelection = NO;
+  [self.view addSubview:_tableView];
 
 #if TARGET_OS_SIMULATOR || TARGET_OS_MACCATALYST
-    NSString *reloadText = @"Reload JS (\u2318R)";
-    NSString *dismissText = @"Dismiss (ESC)";
+  NSString *reloadText = @"Reload JS (\u2318R)";
+  NSString *dismissText = @"Dismiss (ESC)";
 #else
-    NSString *reloadText = @"Reload JS";
-    NSString *dismissText = @"Dismiss";
+  NSString *reloadText = @"Reload JS";
+  NSString *dismissText = @"Dismiss";
 #endif
 
-    UIButton *dismissButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    dismissButton.translatesAutoresizingMaskIntoConstraints = NO;
-    dismissButton.accessibilityIdentifier = @"redbox-extra-data-dismiss";
-    dismissButton.titleLabel.font = [UIFont systemFontOfSize:13];
-    [dismissButton setTitle:dismissText forState:UIControlStateNormal];
-    [dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal];
-    [dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
-    [dismissButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
-
-    UIButton *reloadButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    reloadButton.accessibilityIdentifier = @"redbox-reload";
-    reloadButton.titleLabel.font = [UIFont systemFontOfSize:13];
-    [reloadButton setTitle:reloadText forState:UIControlStateNormal];
-    [reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal];
-    [reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
-    [reloadButton addTarget:self action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
-
-    UIStackView *buttonStackView = [UIStackView new];
-    buttonStackView.axis = UILayoutConstraintAxisHorizontal;
-    buttonStackView.distribution = UIStackViewDistributionEqualSpacing;
-    buttonStackView.alignment = UIStackViewAlignmentFill;
-    buttonStackView.spacing = 20;
-
-    [buttonStackView addArrangedSubview:dismissButton];
-    [buttonStackView addArrangedSubview:reloadButton];
-    buttonStackView.translatesAutoresizingMaskIntoConstraints = NO;
-
-    UIStackView *mainStackView = [UIStackView new];
-    mainStackView.axis = UILayoutConstraintAxisVertical;
-    mainStackView.backgroundColor = [UIColor colorWithRed:0.8 green:0 blue:0 alpha:1];
-    [mainStackView addArrangedSubview:_tableView];
-    [mainStackView addArrangedSubview:buttonStackView];
-    mainStackView.translatesAutoresizingMaskIntoConstraints = NO;
-
-    [self.view addSubview:mainStackView];
-
-    CGFloat tableHeight = self.view.bounds.size.height - 60.f;
-    [_tableView.heightAnchor constraintEqualToConstant:tableHeight].active = YES;
-    [_tableView.widthAnchor constraintEqualToAnchor:self.view.widthAnchor].active = YES;
-
-    CGFloat buttonWidth = self.view.bounds.size.width / 4;
-    [dismissButton.heightAnchor constraintEqualToConstant:60].active = YES;
-    [dismissButton.widthAnchor constraintEqualToConstant:buttonWidth].active = YES;
-    [reloadButton.heightAnchor constraintEqualToConstant:60].active = YES;
-    [reloadButton.widthAnchor constraintEqualToConstant:buttonWidth].active = YES;
-  }
-  return self;
+  UIButton *dismissButton = [self redBoxButtonWithTitle:dismissText
+                                accessibilityIdentifier:@"redbox-extra-data-dismiss"
+                                                 action:@selector(dismiss)];
+  UIButton *reloadButton = [self redBoxButtonWithTitle:reloadText
+                               accessibilityIdentifier:@"redbox-reload"
+                                                action:@selector(reload)];
+
+  UIStackView *buttonStackView = [[UIStackView alloc] init];
+  buttonStackView.translatesAutoresizingMaskIntoConstraints = NO;
+  buttonStackView.axis = UILayoutConstraintAxisHorizontal;
+  buttonStackView.distribution = UIStackViewDistributionFillEqually;
+  buttonStackView.alignment = UIStackViewAlignmentTop;
+  buttonStackView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
+
+  [buttonStackView addArrangedSubview:dismissButton];
+  [buttonStackView addArrangedSubview:reloadButton];
+
+  [self.view addSubview:buttonStackView];
+
+  [NSLayoutConstraint activateConstraints:@[
+    [_tableView.topAnchor constraintEqualToAnchor:self.view.topAnchor],
+    [_tableView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
+    [_tableView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
+    [_tableView.bottomAnchor constraintEqualToAnchor:buttonStackView.topAnchor],
+
+    [dismissButton.heightAnchor constraintEqualToConstant:buttonHeight],
+    [dismissButton.widthAnchor constraintEqualToConstant:buttonWidth],
+    [reloadButton.heightAnchor constraintEqualToConstant:buttonHeight],
+    [reloadButton.widthAnchor constraintEqualToConstant:buttonWidth],
+    [buttonStackView.heightAnchor constraintEqualToConstant:buttonHeight + bottomSafeAreaInset],
+
+    [buttonStackView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
+    [buttonStackView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
+    [buttonStackView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor],
+  ]];
 }
 
 - (void)viewDidAppear:(BOOL)animated
@@ -163,23 +181,25 @@
 
 - (UIView *)tableView:(__unused UITableView *)tableView viewForHeaderInSection:(NSInteger)section
 {
-  UIView *view = [UIView new];
-  view.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+  UIView *header = [UIView new];
+  header.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
 
-  UILabel *header = [UILabel new];
-  [view addSubview:header];
+  UILabel *headerLabel = [UILabel new];
+  [header addSubview:headerLabel];
 
-  header.translatesAutoresizingMaskIntoConstraints = NO;
-  [header.leadingAnchor constraintEqualToAnchor:view.leadingAnchor constant:5].active = YES;
-  [header.trailingAnchor constraintEqualToAnchor:view.trailingAnchor].active = YES;
-  [header.topAnchor constraintEqualToAnchor:view.topAnchor].active = YES;
-  [header.bottomAnchor constraintEqualToAnchor:view.bottomAnchor].active = YES;
+  headerLabel.translatesAutoresizingMaskIntoConstraints = NO;
+  [NSLayoutConstraint activateConstraints:@[
+    [headerLabel.leadingAnchor constraintEqualToAnchor:header.leadingAnchor constant:5],
+    [headerLabel.trailingAnchor constraintEqualToAnchor:header.trailingAnchor],
+    [headerLabel.topAnchor constraintEqualToAnchor:header.topAnchor],
+    [headerLabel.bottomAnchor constraintEqualToAnchor:header.bottomAnchor],
+  ]];
 
-  header.textColor = [UIColor whiteColor];
-  header.font = [UIFont fontWithName:@"Menlo-Bold" size:14.0f];
-  header.text = [_extraDataTitle[section] uppercaseString];
+  headerLabel.textColor = [UIColor whiteColor];
+  headerLabel.font = [UIFont fontWithName:@"Menlo-Bold" size:14.0f];
+  headerLabel.text = [_extraDataTitle[section] uppercaseString];
 
-  return view;
+  return header;
 }
 
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

package/React/Views/RCTBorderDrawing.h

@@ -11,10 +11,14 @@
 #import <React/RCTDefines.h>
 
 typedef struct {
-  CGFloat topLeft;
-  CGFloat topRight;
-  CGFloat bottomLeft;
-  CGFloat bottomRight;
+  CGFloat topLeftHorizontal;
+  CGFloat topLeftVertical;
+  CGFloat topRightHorizontal;
+  CGFloat topRightVertical;
+  CGFloat bottomLeftHorizontal;
+  CGFloat bottomLeftVertical;
+  CGFloat bottomRightHorizontal;
+  CGFloat bottomRightVertical;
 } RCTCornerRadii;
 
 typedef struct {
@@ -35,7 +39,7 @@ typedef struct {
  * Determine if the border widths, colors and radii are all equal.
  */
 RCT_EXTERN BOOL RCTBorderInsetsAreEqual(UIEdgeInsets borderInsets);
-RCT_EXTERN BOOL RCTCornerRadiiAreEqual(RCTCornerRadii cornerRadii);
+RCT_EXTERN BOOL RCTCornerRadiiAreEqualAndSymmetrical(RCTCornerRadii cornerRadii);
 RCT_EXTERN BOOL RCTBorderColorsAreEqual(RCTBorderColors borderColors);
 
 /**