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

eric-edouard · 2021-08-15T14:44:21Z

Summary

Since iOS 13+, it is possible to change the corner curve property on iOS in order to smoothen border radius and make it more "rounded" (also called "squircle")
Here's an article explaining in details what it is.
This property is also built in figma, but currently there is no way to implement this directly with react-native despite it being available natively on iOS.

Many open source react-native libraries were created in order to simulate this behaviour:
react-native-super-ellipse-mask
react-native-squircle-view
react-native-figma-squircle

But they rely on creating an SVG shape with the smoothed corners and masking the view behind. This makes it not very performant (flickering on mounting was a common side-effect)

This PR aims at implementing the property natively.

PR for the docs update: facebook/react-native-website#2785

Changelog

[iOS] [Added] - Added cornerCurve style prop to smoothen the border radius (squircle effect)

Test Plan

We used the RNTester app and added an example with cornerCurve set to 'continuous' (only on iOS).

As the difference is quite subtle, we also made some more tests to better illustrate the difference (these are not in the showcase app):

We overlapped two views with position: absolute, the one in the background has a red background and has cornerRadius set to false, and the one in the foreground is set to true. We can clearly see where the borders differs on the corners.

analysis-bot · 2021-08-15T15:13:34Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 8fef520

analysis-bot · 2021-08-15T15:21:31Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	9,244,183	-106,910
android	hermes	armeabi-v7a	8,756,653	+423,508
android	hermes	x86	9,688,928	-294,541
android	hermes	x86_64	9,655,826	-113,017
android	jsc	arm64-v8a	10,880,255	+214,725
android	jsc	armeabi-v7a	9,783,974	+472,903
android	jsc	x86	10,920,388	+142,791
android	jsc	x86_64	11,528,797	+311,901

Base commit: 8fef520

Relates to this PR: facebook/react-native#32017

janicduplessis

What about naming it borderCurve (borderRadiusCurve? cornerCurve? borderRadiusStyle?) with value 'circular' | 'continuous'.

cc @yungsters

janicduplessis · 2021-09-28T23:00:49Z

React/Views/RCTViewManager.m

+RCT_CUSTOM_VIEW_PROPERTY(cornerSmoothing, BOOL, RCTView)
+{
+  if ([RCTConvert BOOL:json]) {
+    view.layer.cornerCurve = @"continuous";


Use kCACornerCurveContinuous / kCACornerCurveCircular

janicduplessis · 2021-09-28T23:02:28Z

React/Views/RCTViewManager.m

@@ -259,6 +259,14 @@ - (RCTShadowView *)shadowView
    view.removeClippedSubviews = json ? [RCTConvert BOOL:json] : defaultView.removeClippedSubviews;
  }
 }
+RCT_CUSTOM_VIEW_PROPERTY(cornerSmoothing, BOOL, RCTView)
+{
+  if ([RCTConvert BOOL:json]) {


cornerCurve seems to be available on iOS 13+ only. You can add if (@available(iOS 13.0, *)) { so it does nothing on older versions.

yungsters · 2021-10-04T16:43:49Z

What about naming it borderCurve (borderRadiusCurve? cornerCurve? borderRadiusStyle?) with value 'circular' | 'continuous'.

Sounds good to me.

borderCurve: ?('circular' | 'continuous'),

React/Views/RCTView.h

React/Views/RCTViewManager.m

eric-edouard · 2021-10-05T14:06:43Z

@janicduplessis is it normal that the CI fails here ? Thanks

janicduplessis · 2021-10-05T15:51:47Z

I think its fine, failures don't seem related to your changes.

LGTM thanks for the PR!!

@yungsters Can you import this?

facebook-github-bot · 2021-10-20T02:43:55Z

@yungsters has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

philIip

thanks so much for working on this! looking real snazzy - just have one change i'd like to be made.

React/Views/RCTViewManager.m

janicduplessis · 2022-02-28T21:52:16Z

@philIip Could you have a look at this again? seems like all feedback have been addressed.

eric-edouard · 2022-05-07T11:16:41Z

@janicduplessis @philIip quick bump on this one, looks like the ReactNativeViewViewConfig.js doesn't exist anymore + merging with main fails locally with

error: add_cacheinfo failed to refresh for path 'packages/react-native-gradle-plugin/gradlew.bat'; merge aborting.

Any help on what should I do next to get this feature merged? Thanks!

giautm · 2022-05-07T11:39:22Z

I think this commit can help, 7b9490b Just move the change to Libraries/NativeComponent/PlatformBaseViewConfig.js

eric-edouard · 2022-05-07T13:41:16Z

thanks @giautm
@janicduplessis I kept running into merge issues mentioned above so I just opened a fresh PR here: #33783 if you don't mind. This one can safely be closed

Summary:  NOTE: PR is based on #32017 which went stale for quite a long time but can now safely be closed ![](https://preview.redd.it/nuvl4746ys471.png?width=960&crop=smart&auto=webp&s=084a517a645364ac246b70b7fa8e0f2470cc7af3) Since iOS 13+, it is possible to change the corner curve property on iOS in order to smoothen border radius and make it more "rounded" (also called "squircle") Here's an [article](https://medium.com/arthurofbabylon/a-smooth-corner-radius-in-ios-54b80aa2d372) explaining in details what it is. This property is also built in figma, but currently there is no way to implement this directly with react-native despite it being available natively on iOS. Many open source react-native libraries were created in order to simulate this behaviour: [react-native-super-ellipse-mask](https://github.com/everdrone/react-native-super-ellipse-mask) [react-native-squircle-view](https://github.com/everdrone/react-native-squircle-view) [react-native-figma-squircle](https://github.com/tienphaw/react-native-figma-squircle) But they rely on creating an SVG shape with the smoothed corners and masking the view behind. This makes it not very performant (flickering on mounting was a common side-effect) This PR aims at implementing the property natively. PR for the docs update: facebook/react-native-website#2785 ## Changelog  [iOS] [Added] - Added `borderCurve` style prop for smooth border radius (squircle effect) Pull Request resolved: #33783 Test Plan: We used the RNTester app and added an example with `cornerCurve ` set to `'continuous'` (only on iOS). As the difference is quite subtle, we also made some more tests to better illustrate the difference (these are not in the RN-tester app): ![IMG_0810](https://user-images.githubusercontent.com/19872411/133893536-26207c53-aade-4583-9eef-7a1739b6907b.PNG) We overlapped two views with `position: absolute`, the one in the background has a red background and has `cornerRadius` set to `false`, and the one in the foreground is set to `true`. We can clearly see where the borders differs on the corners. Reviewed By: sammy-SC Differential Revision: D37883631 Pulled By: cipolleschi fbshipit-source-id: 09f06de9628fa326323eba63875de30102c4a59e

added cornerSmoothing style prop

66894d7

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 15, 2021

Benjamin Roux and others added 4 commits August 17, 2021 19:04

adding native property

1b30215

Merge branch 'facebook:main' into ios-corner-smoothing

acdf199

removed prop from view props to leave only for style prop

8b9543b

added cornerSmoothing example on the RNTester app

41726a0

eric-edouard marked this pull request as ready for review September 18, 2021 15:16

eric-edouard added a commit to eric-edouard/react-native-website that referenced this pull request Sep 18, 2021

Added cornerSmoothing prop to view-style-props.md

2ff83be

Relates to this PR: facebook/react-native#32017

eric-edouard mentioned this pull request Sep 18, 2021

Added borderCurve prop to view-style-props.md facebook/react-native-website#2785

Merged

janicduplessis suggested changes Sep 28, 2021

View reviewed changes

janicduplessis self-assigned this Sep 28, 2021

janicduplessis added the Needs: React Native Team Attention label Sep 28, 2021

react-native-bot added Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Oct 1, 2021

eric-edouard added 2 commits October 4, 2021 23:13

added borderCurve view style prop (renamed from cornerSmoothing)

30444b3

revert podfile.lock + project.pbxproj changes

728ef63

eric-edouard changed the title ~~Added corner smoothing style prop ("Squircle" effect - iOS only)~~ Added border curve style prop ("Squircle" effect - iOS only) Oct 4, 2021

janicduplessis approved these changes Oct 5, 2021

View reviewed changes

janicduplessis suggested changes Oct 5, 2021

View reviewed changes

React/Views/RCTView.h Outdated Show resolved Hide resolved

React/Views/RCTViewManager.m Outdated Show resolved Hide resolved

eric-edouard added 3 commits October 5, 2021 07:38

removed RCTBorderCurve.h from BUCK

65c320f

removed RCTBorderCurve from RCTView.h

cc6b0c2

switch case for border curve prop

8ae45c0

janicduplessis approved these changes Oct 5, 2021

View reviewed changes

janicduplessis assigned yungsters Oct 5, 2021

philIip requested changes Oct 21, 2021

View reviewed changes

React/Views/RCTViewManager.m Outdated Show resolved Hide resolved

removed default cornerCurve style in convert mapper

6cc9632

eric-edouard requested a review from philIip December 22, 2021 22:19

eric-edouard mentioned this pull request May 7, 2022

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

Closed

janicduplessis closed this May 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

eric-edouard commented Aug 15, 2021 •

edited

Loading

analysis-bot commented Aug 15, 2021 •

edited

Loading

analysis-bot commented Aug 15, 2021 •

edited

Loading

janicduplessis left a comment •

edited

Loading

janicduplessis Sep 28, 2021

janicduplessis Sep 28, 2021

yungsters commented Oct 4, 2021

eric-edouard commented Oct 5, 2021

janicduplessis commented Oct 5, 2021

facebook-github-bot commented Oct 20, 2021

philIip left a comment

janicduplessis commented Feb 28, 2022

eric-edouard commented May 7, 2022

giautm commented May 7, 2022

eric-edouard commented May 7, 2022

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

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

Conversation

eric-edouard commented Aug 15, 2021 • edited Loading

Summary

Changelog

Test Plan

analysis-bot commented Aug 15, 2021 • edited Loading

analysis-bot commented Aug 15, 2021 • edited Loading

janicduplessis left a comment • edited Loading

Choose a reason for hiding this comment

janicduplessis Sep 28, 2021

Choose a reason for hiding this comment

janicduplessis Sep 28, 2021

Choose a reason for hiding this comment

yungsters commented Oct 4, 2021

eric-edouard commented Oct 5, 2021

janicduplessis commented Oct 5, 2021

facebook-github-bot commented Oct 20, 2021

philIip left a comment

Choose a reason for hiding this comment

janicduplessis commented Feb 28, 2022

eric-edouard commented May 7, 2022

giautm commented May 7, 2022

eric-edouard commented May 7, 2022

eric-edouard commented Aug 15, 2021 •

edited

Loading

analysis-bot commented Aug 15, 2021 •

edited

Loading

analysis-bot commented Aug 15, 2021 •

edited

Loading

janicduplessis left a comment •

edited

Loading