added cornerRadius for hover style (#66)

* added corner radius for hover style * fix: implement proper handling for old arch, reformat code --------- Co-authored-by: Oskar Kwaśniewski <oskarkwasniewski@icloud.com>
callstack · Jan 11, 2024 · 5ddaefe · 5ddaefe
1 parent 4f83d1c
commit 5ddaefe
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 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
@@ -287,14 +287,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<UIHoverEffect> effect;
 
     if ([hoverEffect isEqualToString:@"lift"]) {

diff --git 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<UIHoverEffect> effect;
 
     if ([hoverEffect isEqualToString:@"lift"]) {