react-native-tvos 0.75.4-0 → 0.76.0-0

package/ReactCommon/react/renderer/components/scrollview/ScrollViewEventEmitter.h

@@ -10,6 +10,7 @@
 #include <memory>
 
 #include <folly/dynamic.h>
+#include <react/renderer/components/scrollview/ScrollEvent.h>
 #include <react/renderer/components/view/ViewEventEmitter.h>
 #include <react/renderer/core/EventEmitter.h>
 
@@ -19,26 +20,19 @@ class ScrollViewEventEmitter : public ViewEventEmitter {
  public:
   using ViewEventEmitter::ViewEventEmitter;
 
-  struct Metrics {
-    Size contentSize;
-    Point contentOffset;
-    EdgeInsets contentInset;
-    Size containerSize;
-    Float zoomScale{};
-  };
-
-  void onScroll(const Metrics& scrollViewMetrics) const;
-  void experimental_onDiscreteScroll(const Metrics& scrollViewMetrics) const;
-  void onScrollBeginDrag(const Metrics& scrollViewMetrics) const;
-  void onScrollEndDrag(const Metrics& scrollViewMetrics) const;
-  void onMomentumScrollBegin(const Metrics& scrollViewMetrics) const;
-  void onMomentumScrollEnd(const Metrics& scrollViewMetrics) const;
-  void onScrollToTop(const Metrics& scrollViewMetrics) const;
+  using Metrics = ScrollEvent;
+
+  void onScroll(const ScrollEvent& scrollEvent) const;
+  void experimental_onDiscreteScroll(const ScrollEvent& scrollEvent) const;
+  void onScrollBeginDrag(const ScrollEvent& scrollEvent) const;
+  void onScrollEndDrag(const ScrollEvent& scrollEvent) const;
+  void onMomentumScrollBegin(const ScrollEvent& scrollEvent) const;
+  void onMomentumScrollEnd(const ScrollEvent& scrollEvent) const;
+  void onScrollToTop(const ScrollEvent& scrollEvent) const;
 
  private:
-  void dispatchScrollViewEvent(
-      std::string name,
-      const Metrics& scrollViewMetrics) const;
+  void dispatchScrollViewEvent(std::string name, const ScrollEvent& scrollEvent)
+      const;
 };
 
 } // namespace facebook::react

package/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp

@@ -91,6 +91,15 @@ ScrollViewProps::ScrollViewProps(
                     "automaticallyAdjustsScrollIndicatorInsets",
                     sourceProps.automaticallyAdjustsScrollIndicatorInsets,
                     true)),
+      automaticallyAdjustKeyboardInsets(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.automaticallyAdjustKeyboardInsets
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "automaticallyAdjustKeyboardInsets",
+                    sourceProps.automaticallyAdjustKeyboardInsets,
+                    false)),
       decelerationRate(
           CoreFeatures::enablePropIteratorSetter
               ? sourceProps.decelerationRate

package/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h

@@ -40,6 +40,7 @@ class ScrollViewProps final : public ViewProps {
   bool centerContent{};
   bool automaticallyAdjustContentInsets{};
   bool automaticallyAdjustsScrollIndicatorInsets{true};
+  bool automaticallyAdjustKeyboardInsets{false};
   Float decelerationRate{0.998f};
   Float endDraggingSensitivityMultiplier{1};
   bool enableSyncOnScroll{false};

package/ReactCommon/react/renderer/components/text/BaseTextProps.cpp

@@ -123,6 +123,12 @@ static TextAttributes convertRawProp(
       "lineBreakStrategyIOS",
       sourceTextAttributes.lineBreakStrategy,
       defaultTextAttributes.lineBreakStrategy);
+  textAttributes.lineBreakMode = convertRawProp(
+      context,
+      rawProps,
+      "lineBreakModeIOS",
+      sourceTextAttributes.lineBreakMode,
+      defaultTextAttributes.lineBreakMode);
 
   // Decoration
   textAttributes.textDecorationColor = convertRawProp(
@@ -286,6 +292,8 @@ void BaseTextProps::setProp(
         textAttributes,
         lineBreakStrategy,
         "lineBreakStrategyIOS");
+    REBUILD_FIELD_SWITCH_CASE(
+        defaults, value, textAttributes, lineBreakMode, "lineBreakModeIOS");
     REBUILD_FIELD_SWITCH_CASE(
         defaults,
         value,

package/ReactCommon/react/renderer/components/text/CMakeLists.txt

@@ -15,7 +15,7 @@ add_compile_options(
         -DLOG_TAG=\"Fabric\")
 
 file(GLOB rrc_text_SRC CONFIGURE_DEPENDS *.cpp)
-add_library(rrc_text STATIC ${rrc_text_SRC})
+add_library(rrc_text OBJECT ${rrc_text_SRC})
 
 target_include_directories(rrc_text PUBLIC ${REACT_COMMON_DIR})
 
@@ -32,7 +32,6 @@ target_link_libraries(rrc_text
         react_render_mapbuffer
         react_render_mounting
         react_render_textlayoutmanager
-        react_render_uimanager
         react_utils
         rrc_view
         yoga

package/ReactCommon/react/renderer/components/text/ParagraphShadowNode.cpp

@@ -10,7 +10,6 @@
 #include <cmath>
 
 #include <react/debug/react_native_assert.h>
-#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/attributedstring/AttributedStringBox.h>
 #include <react/renderer/components/view/ViewShadowNode.h>
 #include <react/renderer/components/view/conversions.h>
@@ -163,6 +162,33 @@ Size ParagraphShadowNode::measureContent(
       .size;
 }
 
+Float ParagraphShadowNode::baseline(
+    const LayoutContext& layoutContext,
+    Size size) const {
+  auto layoutMetrics = getLayoutMetrics();
+  auto layoutConstraints =
+      LayoutConstraints{size, size, layoutMetrics.layoutDirection};
+  auto content =
+      getContentWithMeasuredAttachments(layoutContext, layoutConstraints);
+  auto attributedString = content.attributedString;
+
+  if (attributedString.isEmpty()) {
+    // Note: `zero-width space` is insufficient in some cases (e.g. when we need
+    // to measure the "height" of the font).
+    // TODO T67606511: We will redefine the measurement of empty strings as part
+    // of T67606511
+    auto string = BaseTextShadowNode::getEmptyPlaceholder();
+    auto textAttributes = TextAttributes::defaultTextAttributes();
+    textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+    textAttributes.apply(getConcreteProps().textAttributes);
+    attributedString.appendFragment({string, textAttributes, {}});
+  }
+
+  AttributedStringBox attributedStringBox{attributedString};
+  return textLayoutManager_->baseline(
+      attributedStringBox, getConcreteProps().paragraphAttributes, size);
+}
+
 void ParagraphShadowNode::layout(LayoutContext layoutContext) {
   ensureUnsealed();
 
@@ -180,17 +206,11 @@ void ParagraphShadowNode::layout(LayoutContext layoutContext) {
   textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
   auto measurement = TextMeasurement{};
 
-  if (!ReactNativeFeatureFlags::preventDoubleTextMeasure()) {
-    measurement = textLayoutManager_->measure(
-        AttributedStringBox{content.attributedString},
-        content.paragraphAttributes,
-        textLayoutContext,
-        layoutConstraints);
-  }
+  AttributedStringBox attributedStringBox{content.attributedString};
 
   if (getConcreteProps().onTextLayout) {
     auto linesMeasurements = textLayoutManager_->measureLines(
-        content.attributedString, content.paragraphAttributes, size);
+        attributedStringBox, content.paragraphAttributes, size);
     getConcreteEventEmitter().onTextLayout(linesMeasurements);
   }
 
@@ -199,14 +219,12 @@ void ParagraphShadowNode::layout(LayoutContext layoutContext) {
     return;
   }
 
-  if (ReactNativeFeatureFlags::preventDoubleTextMeasure()) {
-    // Only measure if attachments are not empty.
-    measurement = textLayoutManager_->measure(
-        AttributedStringBox{content.attributedString},
-        content.paragraphAttributes,
-        textLayoutContext,
-        layoutConstraints);
-  }
+  // Only measure if attachments are not empty.
+  measurement = textLayoutManager_->measure(
+      attributedStringBox,
+      content.paragraphAttributes,
+      textLayoutContext,
+      layoutConstraints);
 
   //  Iterating on attachments, we clone shadow nodes and moving
   //  `paragraphShadowNode` that represents clones of `this` object.

package/ReactCommon/react/renderer/components/text/ParagraphShadowNode.h

@@ -43,6 +43,7 @@ class ParagraphShadowNode final : public ConcreteViewShadowNode<
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
     traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    traits.set(ShadowNodeTraits::Trait::BaselineYogaNode);
 
 #ifdef ANDROID
     // Unsetting `FormsStackingContext` trait is essential on Android where we
@@ -69,6 +70,8 @@ class ParagraphShadowNode final : public ConcreteViewShadowNode<
       const LayoutContext& layoutContext,
       const LayoutConstraints& layoutConstraints) const override;
 
+  Float baseline(const LayoutContext& layoutContext, Size size) const override;
+
   /*
    * Internal representation of the nested content of the node in a format
    * suitable for future processing.

package/ReactCommon/react/renderer/components/textinput/CMakeLists.txt

@@ -15,7 +15,7 @@ add_compile_options(
         -DLOG_TAG=\"Fabric\")
 
 file(GLOB rrc_textinput_SRC CONFIGURE_DEPENDS *.cpp platform/android/react/renderer/components/androidtextinput/*.cpp)
-add_library(rrc_textinput SHARED ${rrc_textinput_SRC})
+add_library(rrc_textinput OBJECT ${rrc_textinput_SRC})
 
 target_include_directories(rrc_textinput PUBLIC . ${CMAKE_CURRENT_SOURCE_DIR}/platform/android/)
 

package/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.cpp

@@ -55,6 +55,10 @@ AttributedString AndroidTextInputShadowNode::getAttributedString() const {
   // Use BaseTextShadowNode to get attributed string from children
   auto childTextAttributes = TextAttributes::defaultTextAttributes();
   childTextAttributes.apply(getConcreteProps().textAttributes);
+  // Don't propagate the background color of the TextInput onto the attributed
+  // string. Android tries to render shadow of the background alongside the
+  // shadow of the text which results in weird artifacts.
+  childTextAttributes.backgroundColor = HostPlatformColor::UndefinedColor;
 
   auto attributedString = AttributedString{};
   auto attachments = BaseTextShadowNode::Attachments{};
@@ -214,6 +218,29 @@ Size AndroidTextInputShadowNode::measureContent(
       .size;
 }
 
+Float AndroidTextInputShadowNode::baseline(
+    const LayoutContext& layoutContext,
+    Size size) const {
+  AttributedString attributedString = getMostRecentAttributedString();
+
+  if (attributedString.isEmpty()) {
+    attributedString = getPlaceholderAttributedString();
+  }
+
+  // Yoga expects a baseline relative to the Node's border-box edge instead of
+  // the content, so we need to adjust by the padding and border widths, which
+  // have already been set by the time of baseline alignment
+  auto top = YGNodeLayoutGetBorder(&yogaNode_, YGEdgeTop) +
+      YGNodeLayoutGetPadding(&yogaNode_, YGEdgeTop);
+
+  AttributedStringBox attributedStringBox{attributedString};
+  return textLayoutManager_->baseline(
+             attributedStringBox,
+             getConcreteProps().paragraphAttributes,
+             size) +
+      top;
+}
+
 void AndroidTextInputShadowNode::layout(LayoutContext layoutContext) {
   updateStateIfNeeded();
   ConcreteViewShadowNode::layout(layoutContext);

package/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.h

@@ -34,6 +34,7 @@ class AndroidTextInputShadowNode final
   static ShadowNodeTraits BaseTraits() {
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::BaselineYogaNode);
     return traits;
   }
 
@@ -65,6 +66,8 @@ class AndroidTextInputShadowNode final
       const LayoutConstraints& layoutConstraints) const override;
   void layout(LayoutContext layoutContext) override;
 
+  Float baseline(const LayoutContext& layoutContext, Size size) const override;
+
  private:
   ContextContainer* contextContainer_{};
 

package/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.cpp

@@ -118,7 +118,7 @@ static jsi::Value keyPressMetricsPayload(
     } else if (keyPressMetrics.text.front() == '\t') {
       key = "Tab";
     } else {
-      key = keyPressMetrics.text.front();
+      key = keyPressMetrics.text;
     }
   }
   payload.setProperty(

package/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputShadowNode.cpp

@@ -140,6 +140,35 @@ Size TextInputShadowNode::measureContent(
       .size;
 }
 
+Float TextInputShadowNode::baseline(
+    const LayoutContext& layoutContext,
+    Size size) const {
+  auto attributedString = getAttributedString(layoutContext);
+
+  if (attributedString.isEmpty()) {
+    auto placeholderString = !getConcreteProps().placeholder.empty()
+        ? getConcreteProps().placeholder
+        : BaseTextShadowNode::getEmptyPlaceholder();
+    auto textAttributes = getConcreteProps().getEffectiveTextAttributes(
+        layoutContext.fontSizeMultiplier);
+    attributedString.appendFragment(
+        {std::move(placeholderString), textAttributes, {}});
+  }
+
+  // Yoga expects a baseline relative to the Node's border-box edge instead of
+  // the content, so we need to adjust by the padding and border widths, which
+  // have already been set by the time of baseline alignment
+  auto top = YGNodeLayoutGetBorder(&yogaNode_, YGEdgeTop) +
+      YGNodeLayoutGetPadding(&yogaNode_, YGEdgeTop);
+
+  AttributedStringBox attributedStringBox{std::move(attributedString)};
+  return textLayoutManager_->baseline(
+             attributedStringBox,
+             getConcreteProps().getEffectiveParagraphAttributes(),
+             size) +
+      top;
+}
+
 void TextInputShadowNode::layout(LayoutContext layoutContext) {
   updateStateIfNeeded(layoutContext);
   ConcreteViewShadowNode::layout(layoutContext);

package/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputShadowNode.h

@@ -40,6 +40,7 @@ class TextInputShadowNode final : public ConcreteViewShadowNode<
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
     traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    traits.set(ShadowNodeTraits::Trait::BaselineYogaNode);
     return traits;
   }
 
@@ -58,6 +59,8 @@ class TextInputShadowNode final : public ConcreteViewShadowNode<
       const LayoutConstraints& layoutConstraints) const override;
   void layout(LayoutContext layoutContext) override;
 
+  Float baseline(const LayoutContext& layoutContext, Size size) const override;
+
  private:
   /*
    * Creates a `State` object if needed.

package/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp

@@ -81,6 +81,15 @@ AccessibilityProps::AccessibilityProps(
                     "accessibilityLanguage",
                     sourceProps.accessibilityLanguage,
                     "")),
+      accessibilityLargeContentTitle(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.accessibilityLargeContentTitle
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "accessibilityLargeContentTitle",
+                    sourceProps.accessibilityLargeContentTitle,
+                    "")),
       accessibilityValue(
           CoreFeatures::enablePropIteratorSetter
               ? sourceProps.accessibilityValue
@@ -99,6 +108,15 @@ AccessibilityProps::AccessibilityProps(
                     "accessibilityActions",
                     sourceProps.accessibilityActions,
                     {})),
+      accessibilityShowsLargeContentViewer(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.accessibilityShowsLargeContentViewer
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "accessibilityShowsLargeContentViewer",
+                    sourceProps.accessibilityShowsLargeContentViewer,
+                    false)),
       accessibilityViewIsModal(
           CoreFeatures::enablePropIteratorSetter
               ? sourceProps.accessibilityViewIsModal
@@ -229,6 +247,8 @@ void AccessibilityProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLabelledBy);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityHint);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLanguage);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityShowsLargeContentViewer);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLargeContentTitle);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityValue);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityActions);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityViewIsModal);

package/ReactCommon/react/renderer/components/view/AccessibilityProps.h

@@ -41,8 +41,10 @@ class AccessibilityProps {
   std::string accessibilityRole{""};
   std::string accessibilityHint{""};
   std::string accessibilityLanguage{""};
+  std::string accessibilityLargeContentTitle{""};
   AccessibilityValue accessibilityValue;
   std::vector<AccessibilityAction> accessibilityActions{};
+  bool accessibilityShowsLargeContentViewer{false};
   bool accessibilityViewIsModal{false};
   bool accessibilityElementsHidden{false};
   bool accessibilityIgnoresInvertColors{false};

package/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -224,14 +224,48 @@ BaseViewProps::BaseViewProps(
                                                        "cursor",
                                                        sourceProps.cursor,
                                                        {})),
+      boxShadow(
+          CoreFeatures::enablePropIteratorSetter ? sourceProps.boxShadow
+                                                 : convertRawProp(
+                                                       context,
+                                                       rawProps,
+                                                       "boxShadow",
+                                                       sourceProps.boxShadow,
+                                                       {})),
       filter(
           CoreFeatures::enablePropIteratorSetter ? sourceProps.filter
                                                  : convertRawProp(
                                                        context,
                                                        rawProps,
-                                                       "experimental_filter",
+                                                       "filter",
                                                        sourceProps.filter,
                                                        {})),
+      backgroundImage(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.backgroundImage
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "experimental_backgroundImage",
+                    sourceProps.backgroundImage,
+                    {})),
+      mixBlendMode(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.mixBlendMode
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "experimental_mixBlendMode",
+                    sourceProps.mixBlendMode,
+                    {})),
+      isolation(
+          CoreFeatures::enablePropIteratorSetter ? sourceProps.isolation
+                                                 : convertRawProp(
+                                                       context,
+                                                       rawProps,
+                                                       "isolation",
+                                                       sourceProps.isolation,
+                                                       {})),
       transform(
           CoreFeatures::enablePropIteratorSetter ? sourceProps.transform
                                                  : convertRawProp(
@@ -368,6 +402,7 @@ void BaseViewProps::setProp(
   switch (hash) {
     RAW_SET_PROP_SWITCH_CASE_BASIC(opacity);
     RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor);
+    RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage");
     RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor);
     RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset);
     RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOpacity);
@@ -377,6 +412,7 @@ void BaseViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(shouldRasterize);
     RAW_SET_PROP_SWITCH_CASE_BASIC(zIndex);
     RAW_SET_PROP_SWITCH_CASE_BASIC(pointerEvents);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(isolation);
     RAW_SET_PROP_SWITCH_CASE_BASIC(hitSlop);
     RAW_SET_PROP_SWITCH_CASE_BASIC(onLayout);
     RAW_SET_PROP_SWITCH_CASE_BASIC(collapsable);
@@ -384,6 +420,8 @@ void BaseViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews);
     RAW_SET_PROP_SWITCH_CASE_BASIC(experimental_layoutConformance);
     RAW_SET_PROP_SWITCH_CASE_BASIC(cursor);
+    RAW_SET_PROP_SWITCH_CASE(filter, "filter");
+    RAW_SET_PROP_SWITCH_CASE(boxShadow, "boxShadow");
 #if TARGET_OS_TV
       RAW_SET_PROP_SWITCH_CASE_BASIC(isTVSelectable);
       RAW_SET_PROP_SWITCH_CASE_BASIC(hasTVPreferredFocus);
@@ -440,36 +478,53 @@ static BorderRadii ensureNoOverlap(const BorderRadii& radii, const Size& size) {
   // Source: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
 
   auto insets = EdgeInsets{
-      /* .left = */ radii.topLeft + radii.bottomLeft,
-      /* .top = */ radii.topLeft + radii.topRight,
-      /* .right = */ radii.topRight + radii.bottomRight,
-      /* .bottom = */ radii.bottomLeft + radii.bottomRight,
+      .left = radii.topLeft.horizontal + radii.bottomLeft.horizontal,
+      .top = radii.topLeft.vertical + radii.topRight.vertical,
+      .right = radii.topRight.horizontal + radii.bottomRight.horizontal,
+      .bottom = radii.bottomLeft.vertical + radii.bottomRight.vertical,
   };
 
   auto insetsScale = EdgeInsets{
-      /* .left = */
-      insets.left > 0 ? std::min((Float)1.0, size.height / insets.left) : 0,
-      /* .top = */
-      insets.top > 0 ? std::min((Float)1.0, size.width / insets.top) : 0,
-      /* .right = */
-      insets.right > 0 ? std::min((Float)1.0, size.height / insets.right) : 0,
-      /* .bottom = */
-      insets.bottom > 0 ? std::min((Float)1.0, size.width / insets.bottom) : 0,
+      .left =
+          insets.left > 0 ? std::min((Float)1.0, size.height / insets.left) : 0,
+      .top = insets.top > 0 ? std::min((Float)1.0, size.width / insets.top) : 0,
+      .right = insets.right > 0
+          ? std::min((Float)1.0, size.height / insets.right)
+          : 0,
+      .bottom = insets.bottom > 0
+          ? std::min((Float)1.0, size.width / insets.bottom)
+          : 0,
   };
 
   return BorderRadii{
-      /* topLeft = */
-      static_cast<float>(
-          radii.topLeft * std::min(insetsScale.top, insetsScale.left)),
-      /* topRight = */
-      static_cast<float>(
-          radii.topRight * std::min(insetsScale.top, insetsScale.right)),
-      /* bottomLeft = */
-      static_cast<float>(
-          radii.bottomLeft * std::min(insetsScale.bottom, insetsScale.left)),
-      /* bottomRight = */
-      static_cast<float>(
-          radii.bottomRight * std::min(insetsScale.bottom, insetsScale.right)),
+      .topLeft =
+          {static_cast<float>(
+               radii.topLeft.horizontal *
+               std::min(insetsScale.top, insetsScale.left)),
+           static_cast<float>(
+               radii.topLeft.vertical *
+               std::min(insetsScale.top, insetsScale.left))},
+      .topRight =
+          {static_cast<float>(
+               radii.topRight.horizontal *
+               std::min(insetsScale.top, insetsScale.right)),
+           static_cast<float>(
+               radii.topRight.vertical *
+               std::min(insetsScale.top, insetsScale.right))},
+      .bottomLeft =
+          {static_cast<float>(
+               radii.bottomLeft.horizontal *
+               std::min(insetsScale.bottom, insetsScale.left)),
+           static_cast<float>(
+               radii.bottomLeft.vertical *
+               std::min(insetsScale.bottom, insetsScale.left))},
+      .bottomRight =
+          {static_cast<float>(
+               radii.bottomRight.horizontal *
+               std::min(insetsScale.bottom, insetsScale.right)),
+           static_cast<float>(
+               radii.bottomRight.vertical *
+               std::min(insetsScale.bottom, insetsScale.right))},
   };
 }
 
@@ -477,29 +532,35 @@ static BorderRadii radiiPercentToPoint(
     const RectangleCorners<ValueUnit>& radii,
     const Size& size) {
   return BorderRadii{
-      /* topLeft = */
-      (radii.topLeft.unit == UnitType::Percent)
-          ? static_cast<float>(
-                (radii.topLeft.value / 100) * std::max(size.width, size.height))
-          : static_cast<float>(radii.topLeft.value),
-      /* topRight = */
-      (radii.topRight.unit == UnitType::Percent)
-          ? static_cast<float>(
-                (radii.topRight.value / 100) *
-                std::max(size.width, size.height))
-          : static_cast<float>(radii.topRight.value),
-      /* bottomLeft = */
-      (radii.bottomLeft.unit == UnitType::Percent)
-          ? static_cast<float>(
-                (radii.bottomLeft.value / 100) *
-                std::max(size.width, size.height))
-          : static_cast<float>(radii.bottomLeft.value),
-      /* bottomRight = */
-      (radii.bottomRight.unit == UnitType::Percent)
-          ? static_cast<float>(
-                (radii.bottomRight.value / 100) *
-                std::max(size.width, size.height))
-          : static_cast<float>(radii.bottomRight.value),
+      .topLeft =
+          {radii.topLeft.resolve(size.width),
+           radii.topLeft.resolve(size.height)},
+      .topRight =
+          {radii.topRight.resolve(size.width),
+           radii.topRight.resolve(size.height)},
+      .bottomLeft =
+          {radii.bottomLeft.resolve(size.width),
+           radii.bottomLeft.resolve(size.height)},
+      .bottomRight =
+          {radii.bottomRight.resolve(size.width),
+           radii.bottomRight.resolve(size.height)},
+  };
+}
+
+CascadedBorderWidths BaseViewProps::getBorderWidths() const {
+  return CascadedBorderWidths{
+      .left = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Left)),
+      .top = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Top)),
+      .right = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Right)),
+      .bottom =
+          optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Bottom)),
+      .start = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Start)),
+      .end = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::End)),
+      .horizontal =
+          optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Horizontal)),
+      .vertical =
+          optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Vertical)),
+      .all = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::All)),
   };
 }
 
@@ -508,39 +569,18 @@ BorderMetrics BaseViewProps::resolveBorderMetrics(
   auto isRTL =
       bool{layoutMetrics.layoutDirection == LayoutDirection::RightToLeft};
 
-  auto borderWidths = CascadedBorderWidths{
-      /* .left = */ optionalFloatFromYogaValue(
-          yogaStyle.border(yoga::Edge::Left)),
-      /* .top = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Top)),
-      /* .right = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Right)),
-      /* .bottom = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Bottom)),
-      /* .start = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Start)),
-      /* .end = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::End)),
-      /* .horizontal = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Horizontal)),
-      /* .vertical = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Vertical)),
-      /* .all = */
-      optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::All)),
-  };
+  auto borderWidths = getBorderWidths();
 
   BorderRadii radii = radiiPercentToPoint(
       borderRadii.resolve(isRTL, ValueUnit{0.0f, UnitType::Point}),
       layoutMetrics.frame.size);
 
   return {
-      /* .borderColors = */ borderColors.resolve(isRTL, {}),
-      /* .borderWidths = */ borderWidths.resolve(isRTL, 0),
-      /* .borderRadii = */
-      ensureNoOverlap(radii, layoutMetrics.frame.size),
-      /* .borderCurves = */
-      borderCurves.resolve(isRTL, BorderCurve::Circular),
-      /* .borderStyles = */ borderStyles.resolve(isRTL, BorderStyle::Solid),
+      .borderColors = borderColors.resolve(isRTL, {}),
+      .borderWidths = borderWidths.resolve(isRTL, 0),
+      .borderRadii = ensureNoOverlap(radii, layoutMetrics.frame.size),
+      .borderCurves = borderCurves.resolve(isRTL, BorderCurve::Circular),
+      .borderStyles = borderStyles.resolve(isRTL, BorderStyle::Solid),
   };
 }