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/Components/View/ReactNativeViewViewConfig.js

@@ -140,6 +140,7 @@ const ReactNativeViewConfig: ViewConfig = {
     borderBottomStartRadius: true,
     borderBottomWidth: true,
     borderColor: {process: require('../../StyleSheet/processColor')},
+    borderCurve: true,
     borderEndColor: {process: require('../../StyleSheet/processColor')},
     borderEndWidth: true,
     borderLeftColor: {process: require('../../StyleSheet/processColor')},

Libraries/StyleSheet/StyleSheetTypes.js

@@ -559,6 +559,7 @@ export type ____ViewStyle_Internal = $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/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/RCTViewManager.m

@@ -9,6 +9,7 @@
 
 #import "RCTAssert.h"
 #import "RCTBorderStyle.h"
+#import "RCTBorderCurve.h"
 #import "RCTBridge.h"
 #import "RCTConvert+Transform.h"
 #import "RCTConvert.h"
@@ -259,6 +260,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:)]) {

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

@@ -17,6 +17,7 @@ const {
   Text,
   TouchableWithoutFeedback,
   View,
+  Platform,
 } = require('react-native');
 
 exports.title = 'View';
@@ -81,12 +82,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>
+          )}
+        </>
       );
     },
   },