Eric Edouard
|
8993ffc82e
|
Added border curve style prop ("Squircle" effect - iOS only) (#33783)
Summary:
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
NOTE: PR is based on https://github.com/facebook/react-native/pull/32017 which went stale for quite a long time but can now safely be closed
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: https://github.com/facebook/react-native-website/pull/2785
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[iOS] [Added] - Added `borderCurve` style prop for smooth border radius (squircle effect)
Pull Request resolved: https://github.com/facebook/react-native/pull/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):
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
|
2022-07-21 04:11:30 -07:00 |
