From 89fd16666718ecfe87a21782b31bd54cad9f15ad Mon Sep 17 00:00:00 2001 From: Gokulakrishnan Date: Thu, 11 Jan 2024 18:49:14 +0530 Subject: [PATCH] added cornerRadius for hover style (#66) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * added corner radius for hover style * fix: implement proper handling for old arch, reformat code --------- Co-authored-by: Oskar Kwaśniewski --- .../View/RCTViewComponentView.mm | 18 +++++++++++++----- packages/react-native/React/Views/RCTView.m | 13 ++++++++++++- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index 80d6afa112dd67..4ac4da5b07ae42 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -285,14 +285,22 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared & } // `border` - if (oldViewProps.borderStyles != newViewProps.borderStyles || oldViewProps.borderRadii != newViewProps.borderRadii || + if (oldViewProps.borderStyles != newViewProps.borderStyles || oldViewProps.borderColors != newViewProps.borderColors) { needsInvalidateLayer = YES; } - + // 'borderRadii' + if (oldViewProps.borderRadii != newViewProps.borderRadii) { + needsInvalidateLayer = YES; +#if TARGET_OS_VISION + CGFloat borderRadius = newViewProps.borderRadii.all ? newViewProps.borderRadii.all.value() : 0.0; + [self updateHoverEffect:[NSString stringWithUTF8String:newViewProps.visionos_hoverEffect.c_str()] withCornerRadius:borderRadius]; +#endif + } #if TARGET_OS_VISION if (oldViewProps.visionos_hoverEffect != newViewProps.visionos_hoverEffect) { - [self updateHoverEffect:[NSString stringWithUTF8String:newViewProps.visionos_hoverEffect.c_str()]]; + CGFloat borderRadius = newViewProps.borderRadii.all ? newViewProps.borderRadii.all.value() : 0.0; + [self updateHoverEffect:[NSString stringWithUTF8String:newViewProps.visionos_hoverEffect.c_str()] withCornerRadius:borderRadius]; } #endif @@ -514,13 +522,13 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event } #if TARGET_OS_VISION -- (void) updateHoverEffect:(NSString*)hoverEffect { +- (void) updateHoverEffect:(NSString*)hoverEffect withCornerRadius:(CGFloat)cornerRadius { if (hoverEffect == nil || [hoverEffect isEqualToString:@""]) { self.hoverStyle = nil; return; } - UIShape *shape = [UIShape rectShapeWithCornerRadius:self.layer.cornerRadius]; + UIShape *shape = [UIShape rectShapeWithCornerRadius:cornerRadius]; id effect; if ([hoverEffect isEqualToString:@"lift"]) { diff --git a/packages/react-native/React/Views/RCTView.m b/packages/react-native/React/Views/RCTView.m index 821a5b1a1981a4..b1e77639678325 100644 --- a/packages/react-native/React/Views/RCTView.m +++ b/packages/react-native/React/Views/RCTView.m @@ -676,7 +676,18 @@ - (void)setHoverEffect:(NSString *)hoverEffect { return; } - UIShape *shape = [UIShape rectShapeWithCornerRadius:_borderRadius]; + CGFloat cornerRadius = 0.0; + RCTCornerRadii cornerRadii = [self cornerRadii]; + + if (RCTCornerRadiiAreEqual(cornerRadii)) { + cornerRadius = cornerRadii.topLeft; + + } else { + // TODO: Handle a case when corner radius is different for each corner. + cornerRadius = cornerRadii.topLeft; + } + + UIShape *shape = [UIShape rectShapeWithCornerRadius:cornerRadius]; id effect; if ([hoverEffect isEqualToString:@"lift"]) {