microsoft
/
react-native-macos
зеркало из https://github.com/microsoft/react-native-macos.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
react-native-macos/React/Base
История
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

![](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: 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):

![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
 		2022-07-21 04:11:30 -07:00
..
Surface Minor: Rename RCTNotAllowedInAppWideFabric to RCTNotAllowedInFabricWithoutLegacy 2022-07-08 15:07:55 -07:00
RCTAssert.h Minor: Rename RCTNotAllowedInAppWideFabric to RCTNotAllowedInFabricWithoutLegacy 2022-07-08 15:07:55 -07:00
RCTAssert.m Minor: Rename RCTNotAllowedInAppWideFabric to RCTNotAllowedInFabricWithoutLegacy 2022-07-08 15:07:55 -07:00
RCTBridge+Private.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTBridge.h Remove {eventName}: true from ViewConfig validAttributes 2022-01-06 19:09:53 -08:00
RCTBridge.m (Easy) Remove RCTNotAllowedInBridgeless validation for RCTRegisterModule 2022-03-29 17:27:05 -07:00
RCTBridgeDelegate.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTBridgeMethod.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTBridgeModule.h 2/3 Make interop WebView component Bridgeless compatible, and make `uiManager addUIBlock` migration easier 2022-03-02 14:09:56 -08:00
RCTBridgeModuleDecorator.h 1/5 Refactor CxxBridge: Introduce RCTBridgeModuleDecorator to attach @synthesize ivars to RCTTurboModules, in Bridge mode 2022-02-25 08:50:34 -08:00
RCTBridgeModuleDecorator.m 1/5 Refactor CxxBridge: Introduce RCTBridgeModuleDecorator to attach @synthesize ivars to RCTTurboModules, in Bridge mode 2022-02-25 08:50:34 -08:00
RCTBundleManager.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTBundleURLProvider.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTBundleURLProvider.mm Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTCallableJSModules.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTComponentEvent.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTComponentEvent.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTConstants.h Add MC to check whether canSendEvents_DEPRECATED is needed 2022-05-01 13:36:09 -07:00
RCTConstants.m Add MC to check whether canSendEvents_DEPRECATED is needed 2022-05-01 13:36:09 -07:00
RCTConvert.h Added border curve style prop ("Squircle" effect - iOS only) (#33783) 2022-07-21 04:11:30 -07:00
RCTConvert.m Added border curve style prop ("Squircle" effect - iOS only) (#33783) 2022-07-21 04:11:30 -07:00
RCTCxxConvert.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTCxxConvert.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTDefines.h Enable absolute bridgeless with REACT_NATIVE_FORCE_NEW_ARCHITECTURE flag on Wilde 2022-06-21 18:55:29 -07:00
RCTDisplayLink.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTDisplayLink.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTErrorCustomizer.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTErrorInfo.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTErrorInfo.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTEventDispatcher.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTEventDispatcherProtocol.h Make ScrollView sticky headers work w/o dispatching RCTEventEmitter.receiveEvent 2022-06-21 07:36:01 -07:00
RCTFrameUpdate.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTFrameUpdate.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTImageSource.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTImageSource.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTInitializing.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTInvalidating.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJSScriptLoaderModule.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJSStackFrame.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJSStackFrame.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJSThread.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJSThread.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJavaScriptExecutor.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTJavaScriptLoader.h Fix parseTypeFromHeader for Hermes bytecode 2022-03-15 05:58:52 -07:00
RCTJavaScriptLoader.mm Fix parseTypeFromHeader for Hermes bytecode 2022-03-15 05:58:52 -07:00
RCTKeyCommands.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTKeyCommands.m Back out "fixed SDK issue while uploading app in debug scheme" 2022-06-21 10:48:14 -07:00
RCTLog.h Fix RCTLogError and RCTLogWarn to display RedBox or LogBox in Bridgeless 2022-02-14 19:42:07 -08:00
RCTLog.mm Fix RCTLogError and RCTLogWarn to display RedBox or LogBox in Bridgeless 2022-02-14 19:42:07 -08:00
RCTManagedPointer.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTManagedPointer.mm Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTMockDef.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTModuleData.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTModuleData.mm (Easy) 2/5 Refactor RCTModuleData to use RCTBridgeModuleDecorator, to attach @synthesize ivars to non-TurboModule RCTBridgeModules in Bridge mode 2022-02-25 08:50:34 -08:00
RCTModuleMethod.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTModuleMethod.mm Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTModuleRegistry.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTMultipartDataTask.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTMultipartDataTask.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTMultipartStreamReader.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTMultipartStreamReader.m fixing more imports 2022-06-14 13:37:04 -07:00
RCTNullability.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTPLTag.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTParserUtils.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTParserUtils.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTPerformanceLogger.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTPerformanceLogger.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTPerformanceLoggerLabels.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTPerformanceLoggerLabels.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRedBoxSetEnabled.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRedBoxSetEnabled.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTReloadCommand.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTReloadCommand.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRootContentView.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRootContentView.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRootView.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRootView.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRootViewDelegate.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTRootViewInternal.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTTouchEvent.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTTouchEvent.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTTouchHandler.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTTouchHandler.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTURLRequestDelegate.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTURLRequestHandler.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTUtils.h prevent from publishing dimensions change event when app changes state (#34014) 2022-06-28 08:56:25 -07:00
RCTUtils.m prevent from publishing dimensions change event when app changes state (#34014) 2022-06-28 08:56:25 -07:00
RCTUtilsUIOverride.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTUtilsUIOverride.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTVersion.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTVersion.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTViewRegistry.m 2/3 Make interop WebView component Bridgeless compatible, and make `uiManager addUIBlock` migration easier 2022-03-02 14:09:56 -08:00
RCTWeakProxy.h Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00
RCTWeakProxy.m Update copyright headers from Facebook to Meta 2021-12-30 15:11:21 -08:00