mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
8993ffc82e
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
125 lines
4.2 KiB
Objective-C
125 lines
4.2 KiB
Objective-C
/*
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import <UIKit/UIKit.h>
|
|
|
|
#import <React/RCTBorderCurve.h>
|
|
#import <React/RCTBorderStyle.h>
|
|
#import <React/RCTComponent.h>
|
|
#import <React/RCTPointerEvents.h>
|
|
|
|
extern const UIAccessibilityTraits SwitchAccessibilityTrait;
|
|
|
|
@protocol RCTAutoInsetsProtocol;
|
|
|
|
@interface RCTView : UIView
|
|
|
|
/**
|
|
* Accessibility event handlers
|
|
*/
|
|
@property (nonatomic, copy) RCTDirectEventBlock onAccessibilityAction;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onAccessibilityTap;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onMagicTap;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onAccessibilityEscape;
|
|
|
|
/**
|
|
* Used to control how touch events are processed.
|
|
*/
|
|
@property (nonatomic, assign) RCTPointerEvents pointerEvents;
|
|
|
|
+ (void)autoAdjustInsetsForView:(UIView<RCTAutoInsetsProtocol> *)parentView
|
|
withScrollView:(UIScrollView *)scrollView
|
|
updateOffset:(BOOL)updateOffset;
|
|
|
|
/**
|
|
* Layout direction of the view.
|
|
* This is inherited from UIView+React, but we override it here
|
|
* to improve performance and make subclassing/overriding possible/easier.
|
|
*/
|
|
@property (nonatomic, assign) UIUserInterfaceLayoutDirection reactLayoutDirection;
|
|
|
|
/**
|
|
* This is an optimization used to improve performance
|
|
* for large scrolling views with many subviews, such as a
|
|
* list or table. If set to YES, any clipped subviews will
|
|
* be removed from the view hierarchy whenever -updateClippedSubviews
|
|
* is called. This would typically be triggered by a scroll event
|
|
*/
|
|
@property (nonatomic, assign) BOOL removeClippedSubviews;
|
|
|
|
/**
|
|
* Hide subviews if they are outside the view bounds.
|
|
* This is an optimisation used predominantly with RKScrollViews
|
|
* but it is applied recursively to all subviews that have
|
|
* removeClippedSubviews set to YES
|
|
*/
|
|
- (void)updateClippedSubviews;
|
|
|
|
/**
|
|
* Border radii.
|
|
*/
|
|
@property (nonatomic, assign) CGFloat borderRadius;
|
|
@property (nonatomic, assign) CGFloat borderTopLeftRadius;
|
|
@property (nonatomic, assign) CGFloat borderTopRightRadius;
|
|
@property (nonatomic, assign) CGFloat borderTopStartRadius;
|
|
@property (nonatomic, assign) CGFloat borderTopEndRadius;
|
|
@property (nonatomic, assign) CGFloat borderBottomLeftRadius;
|
|
@property (nonatomic, assign) CGFloat borderBottomRightRadius;
|
|
@property (nonatomic, assign) CGFloat borderBottomStartRadius;
|
|
@property (nonatomic, assign) CGFloat borderBottomEndRadius;
|
|
|
|
/**
|
|
* Border colors (actually retained).
|
|
*/
|
|
@property (nonatomic, strong) UIColor *borderTopColor;
|
|
@property (nonatomic, strong) UIColor *borderRightColor;
|
|
@property (nonatomic, strong) UIColor *borderBottomColor;
|
|
@property (nonatomic, strong) UIColor *borderLeftColor;
|
|
@property (nonatomic, strong) UIColor *borderStartColor;
|
|
@property (nonatomic, strong) UIColor *borderEndColor;
|
|
@property (nonatomic, strong) UIColor *borderColor;
|
|
|
|
/**
|
|
* Border widths.
|
|
*/
|
|
@property (nonatomic, assign) CGFloat borderTopWidth;
|
|
@property (nonatomic, assign) CGFloat borderRightWidth;
|
|
@property (nonatomic, assign) CGFloat borderBottomWidth;
|
|
@property (nonatomic, assign) CGFloat borderLeftWidth;
|
|
@property (nonatomic, assign) CGFloat borderStartWidth;
|
|
@property (nonatomic, assign) CGFloat borderEndWidth;
|
|
@property (nonatomic, assign) CGFloat borderWidth;
|
|
|
|
/**
|
|
* Border curve.
|
|
*/
|
|
@property (nonatomic, assign) RCTBorderCurve borderCurve;
|
|
|
|
/**
|
|
* Border styles.
|
|
*/
|
|
@property (nonatomic, assign) RCTBorderStyle borderStyle;
|
|
|
|
/**
|
|
* Insets used when hit testing inside this view.
|
|
*/
|
|
@property (nonatomic, assign) UIEdgeInsets hitTestEdgeInsets;
|
|
|
|
/**
|
|
* (Experimental and unused for Paper) Pointer event handlers.
|
|
*/
|
|
@property (nonatomic, assign) RCTBubblingEventBlock onPointerCancel;
|
|
@property (nonatomic, assign) RCTBubblingEventBlock onPointerDown;
|
|
@property (nonatomic, assign) RCTBubblingEventBlock onPointerMove;
|
|
@property (nonatomic, assign) RCTBubblingEventBlock onPointerUp;
|
|
@property (nonatomic, assign) RCTCapturingEventBlock onPointerEnter;
|
|
@property (nonatomic, assign) RCTCapturingEventBlock onPointerLeave;
|
|
@property (nonatomic, assign) RCTBubblingEventBlock onPointerOver;
|
|
@property (nonatomic, assign) RCTBubblingEventBlock onPointerOut;
|
|
|
|
@end
|