Added border curve style prop ("Squircle" effect - iOS only)

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -105,6 +105,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderColor: colorAttributes,
+  borderCurve: true,
   borderEndColor: colorAttributes,
   borderLeftColor: colorAttributes,
   borderRadius: true,

Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -193,6 +193,7 @@ const validAttributesForNonEventProps = {
   removeClippedSubviews: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor')},
+  borderCurve: true,
   borderWidth: true,
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},

Libraries/StyleSheet/StyleSheetTypes.js

@@ -532,6 +532,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
+  borderCurve?: 'circular' | 'continuous',
   borderBottomColor?: ____ColorValue_Internal,
   borderEndColor?: ____ColorValue_Internal,
   borderLeftColor?: ____ColorValue_Internal,

React/Base/RCTConvert.h

@@ -10,6 +10,7 @@
 
 #import <React/RCTAnimationType.h>
 #import <React/RCTBorderStyle.h>
+#import <React/RCTBorderCurve.h>
 #import <React/RCTDefines.h>
 #import <React/RCTLog.h>
 #import <React/RCTPointerEvents.h>
@@ -130,6 +131,7 @@ typedef BOOL css_backface_visibility_t;
 + (RCTPointerEvents)RCTPointerEvents:(id)json;
 + (RCTAnimationType)RCTAnimationType:(id)json;
 + (RCTBorderStyle)RCTBorderStyle:(id)json;
++ (RCTBorderCurve)RCTBorderCurve:(id)json;
 + (RCTTextDecorationLineType)RCTTextDecorationLineType:(id)json;
 
 @end

React/Base/RCTConvert.m

@@ -345,6 +345,15 @@ + (NSLocale *)NSLocale:(id)json
     RCTBorderStyleSolid,
     integerValue)
 
+RCT_ENUM_CONVERTER(
+     RCTBorderCurve,
+     (@{
+       @"circular" : @(RCTBorderCurveCircular),
+       @"continuous" : @(RCTBorderCurveContinuous),
+     }),
+     RCTBorderCurveCircular,
+     integerValue)
+
 RCT_ENUM_CONVERTER(
     RCTTextDecorationLineType,
     (@{

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

@@ -516,6 +516,16 @@ static void RCTReleaseRCTBorderColors(RCTBorderColors borderColors)
   CGColorRelease(borderColors.right);
 }
 
+static CALayerCornerCurve CornerCurveFromBorderCurve(BorderCurve borderCurve)
+{
+  switch (borderCurve) {
+    case BorderCurve::Continuous:
+      return kCACornerCurveContinuous;
+    case BorderCurve::Circular:
+      return kCACornerCurveCircular;
+  }
+}
+
 static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
 {
   switch (borderStyle) {
@@ -580,6 +590,9 @@ - (void)invalidateLayer
     layer.borderColor = borderColor;
     CGColorRelease(borderColor);
     layer.cornerRadius = (CGFloat)borderMetrics.borderRadii.topLeft;
+    if (@available(iOS 13.0, *)) {
+        layer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
+    }
     layer.backgroundColor = _backgroundColor.CGColor;
   } else {
     if (!_borderLayer) {

React/Views/RCTBorderCurve.h

@@ -0,0 +1,13 @@
+/*
+  * Copyright (c) Facebook, Inc. and its affiliates.
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+
+#import <Foundation/Foundation.h>
+
+typedef NS_ENUM(NSInteger, RCTBorderCurve) {
+	RCTBorderCurveContinuous = 0,
+	RCTBorderCurveCircular,
+};

React/Views/RCTView.h

@@ -7,6 +7,7 @@
 
 #import <UIKit/UIKit.h>
 
+#import <React/RCTBorderCurve.h>
 #import <React/RCTBorderStyle.h>
 #import <React/RCTComponent.h>
 #import <React/RCTPointerEvents.h>
@@ -93,6 +94,11 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 @property (nonatomic, assign) CGFloat borderEndWidth;
 @property (nonatomic, assign) CGFloat borderWidth;
 
+/**
+ * Border curve.
+ */
+@property (nonatomic, assign) RCTBorderCurve borderCurve;
+
 /**
  * Border styles.
  */

React/Views/RCTView.m

@@ -10,6 +10,7 @@
 #import <React/RCTMockDef.h>
 
 #import "RCTAutoInsetsProtocol.h"
+#import "RCTBorderCurve.h"
 #import "RCTBorderDrawing.h"
 #import "RCTI18nUtil.h"
 #import "RCTLog.h"
@@ -126,6 +127,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _borderBottomRightRadius = -1;
     _borderBottomStartRadius = -1;
     _borderBottomEndRadius = -1;
+    _borderCurve = RCTBorderCurveCircular;
     _borderStyle = RCTBorderStyleSolid;
     _hitTestEdgeInsets = UIEdgeInsetsZero;
 
@@ -945,6 +947,20 @@ -(void)setBorder##side##Radius : (CGFloat)radius \
                     setBorderRadius(TopEnd) setBorderRadius(BottomLeft) setBorderRadius(BottomRight)
                         setBorderRadius(BottomStart) setBorderRadius(BottomEnd)
 
+#pragma mark - Border Curve
+
+#define setBorderCurve(side)                            \
+  -(void)setBorder##side##Curve : (RCTBorderCurve)curve \
+  {                                                     \
+    if (_border##side##Curve == curve) {                \
+      return;                                           \
+    }                                                   \
+    _border##side##Curve = curve;                       \
+    [self.layer setNeedsDisplay];                       \
+  }
+
+                            setBorderCurve()
+
 #pragma mark - Border Style
 
 #define setBorderStyle(side)                            \

React/Views/RCTViewManager.m

@@ -8,6 +8,7 @@
 #import "RCTViewManager.h"
 
 #import "RCTAssert.h"
+#import "RCTBorderCurve.h"
 #import "RCTBorderStyle.h"
 #import "RCTBridge.h"
 #import "RCTConvert+Transform.h"
@@ -264,6 +265,19 @@ - (RCTShadowView *)shadowView
     view.removeClippedSubviews = json ? [RCTConvert BOOL:json] : defaultView.removeClippedSubviews;
   }
 }
+RCT_CUSTOM_VIEW_PROPERTY(borderCurve, RCTBorderCurve, RCTView)
+{
+  if (@available(iOS 13.0, *)) {
+    switch ([RCTConvert RCTBorderCurve:json]) {
+      case RCTBorderCurveContinuous:
+        view.layer.cornerCurve = kCACornerCurveContinuous;
+        break;
+      case RCTBorderCurveCircular:
+        view.layer.cornerCurve = kCACornerCurveCircular;
+        break;
+    }
+  }
+}
 RCT_CUSTOM_VIEW_PROPERTY(borderRadius, CGFloat, RCTView)
 {
   if ([view respondsToSelector:@selector(setBorderRadius:)]) {

ReactCommon/react/renderer/components/view/ViewProps.cpp

@@ -67,6 +67,15 @@ ViewProps::ViewProps(
                                                 "Color",
                                                 sourceProps.borderColors,
                                                 {})),
+      borderCurves(
+          Props::enablePropIteratorSetter ? sourceProps.borderCurves
+                                          : convertRawProp(
+                                                context,
+                                                rawProps,
+                                                "border",
+                                                "Curve",
+                                                sourceProps.borderCurves,
+                                                {})),
       borderStyles(
           Props::enablePropIteratorSetter ? sourceProps.borderStyles
                                           : convertRawProp(
@@ -415,6 +424,7 @@ BorderMetrics ViewProps::resolveBorderMetrics(
       /* .borderWidths = */ borderWidths.resolve(isRTL, 0),
       /* .borderRadii = */
       ensureNoOverlap(borderRadii.resolve(isRTL, 0), layoutMetrics.frame.size),
+      /* .borderCurves = */ borderCurves.resolve(isRTL, BorderCurve::Circular),
       /* .borderStyles = */ borderStyles.resolve(isRTL, BorderStyle::Solid),
   };
 }

ReactCommon/react/renderer/components/view/ViewProps.h

@@ -51,6 +51,7 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
   // Borders
   CascadedBorderRadii borderRadii{};
   CascadedBorderColors borderColors{};
+  CascadedBorderCurves borderCurves{};
   CascadedBorderStyles borderStyles{};
 
   // Shadow

ReactCommon/react/renderer/components/view/conversions.h

@@ -563,6 +563,24 @@ inline void fromRawValue(
   react_native_assert(false);
 }
 
+inline void fromRawValue(
+    const PropsParserContext &context,
+    const RawValue &value,
+    BorderCurve &result) {
+  react_native_assert(value.hasType<std::string>());
+  auto stringValue = (std::string)value;
+  if (stringValue == "circular") {
+    result = BorderCurve::Circular;
+    return;
+  }
+  if (stringValue == "continuous") {
+    result = BorderCurve::Continuous;
+    return;
+  }
+  LOG(FATAL) << "Could not parse BorderCurve:" << stringValue;
+  react_native_assert(false);
+}
+
 inline void fromRawValue(
     const PropsParserContext &context,
     const RawValue &value,

ReactCommon/react/renderer/components/view/primitives.h

@@ -80,6 +80,8 @@ inline static bool operator!=(ViewEvents const &lhs, ViewEvents const &rhs) {
 
 enum class BackfaceVisibility { Auto, Visible, Hidden };
 
+enum class BorderCurve { Circular, Continuous };
+
 enum class BorderStyle { Solid, Dotted, Dashed };
 
 template <typename T>
@@ -205,11 +207,13 @@ struct CascadedRectangleCorners {
 };
 
 using BorderWidths = RectangleEdges<Float>;
+using BorderCurves = RectangleCorners<BorderCurve>;
 using BorderStyles = RectangleEdges<BorderStyle>;
 using BorderColors = RectangleEdges<SharedColor>;
 using BorderRadii = RectangleCorners<Float>;
 
 using CascadedBorderWidths = CascadedRectangleEdges<Float>;
+using CascadedBorderCurves = CascadedRectangleCorners<BorderCurve>;
 using CascadedBorderStyles = CascadedRectangleEdges<BorderStyle>;
 using CascadedBorderColors = CascadedRectangleEdges<SharedColor>;
 using CascadedBorderRadii = CascadedRectangleCorners<Float>;
@@ -218,18 +222,21 @@ struct BorderMetrics {
   BorderColors borderColors{};
   BorderWidths borderWidths{};
   BorderRadii borderRadii{};
+  BorderCurves borderCurves{};
   BorderStyles borderStyles{};
 
   bool operator==(const BorderMetrics &rhs) const {
     return std::tie(
                this->borderColors,
                this->borderWidths,
                this->borderRadii,
+               this->borderCurves,
                this->borderStyles) ==
         std::tie(
                rhs.borderColors,
                rhs.borderWidths,
                rhs.borderRadii,
+               rhs.borderCurves,
                rhs.borderStyles);
   }
 

packages/rn-tester/js/examples/View/ViewExample.js

@@ -17,6 +17,7 @@ const {
   Text,
   TouchableWithoutFeedback,
   View,
+  Platform,
 } = require('react-native');
 
 class ViewBorderStyleExample extends React.Component<
@@ -360,12 +361,29 @@ exports.examples = [
     title: 'Border Radius',
     render(): React.Node {
       return (
-        <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
-          <Text style={{fontSize: 11}}>
-            Too much use of `borderRadius` (especially large radii) on anything
-            which is scrolling may result in dropped frames. Use sparingly.
-          </Text>
-        </View>
+        <>
+          <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
+            <Text style={{fontSize: 11}}>
+              Too much use of `borderRadius` (especially large radii) on
+              anything which is scrolling may result in dropped frames. Use
+              sparingly.
+            </Text>
+          </View>
+          {Platform.OS === 'ios' && (
+            <View
+              style={{
+                borderRadius: 20,
+                padding: 8,
+                marginTop: 12,
+                backgroundColor: '#527FE4',
+                borderCurve: 'continuous',
+              }}>
+              <Text style={{fontSize: 16, color: 'white'}}>
+                View with continuous border curve
+              </Text>
+            </View>
+          )}
+        </>
       );
     },
   },