Added border curve style prop ("Squircle" effect - iOS only) by eric-edouard · Pull Request #32017 · react/react-native

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: react/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: react/react-native#32017

janicduplessis

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

cc @yungsters

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

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


Use kCACornerCurveContinuous / kCACornerCurveCircular

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

 }
+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'),

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.

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: react/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 Rouxand 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: react/react-native#32017

eric-edouard mentioned this pull request Sep 18, 2021
Added borderCurve prop to view-style-props.md react/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

Comment threadReact/Views/RCTView.h Outdated
Comment threadReact/Views/RCTViewManager.m Outdated

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 suggested changes Oct 21, 2021
View reviewed changes

Comment threadReact/Views/RCTViewManager.m Outdated

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

Uh oh!

Conversation

eric-edouard commented Aug 15, 2021• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

Test Plan

Uh oh!

analysis-bot commented Aug 15, 2021• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot commented Aug 15, 2021• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

janicduplessis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

janicduplessisSep 28, 2021

Choose a reason for hiding this comment

Uh oh!

janicduplessisSep 28, 2021

Choose a reason for hiding this comment

Uh oh!

yungsters commented Oct 4, 2021

Uh oh!

Uh oh!

Uh oh!

eric-edouard commented Oct 5, 2021

Uh oh!

janicduplessis commented Oct 5, 2021

Uh oh!

facebook-github-bot commented Oct 20, 2021

Uh oh!

philIip left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

janicduplessis commented Feb 28, 2022

Uh oh!

eric-edouard commented May 7, 2022

Uh oh!

giautm commented May 7, 2022

Uh oh!

eric-edouard commented May 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

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