fix: refactor visionos_hoverStyle to take a string and new arch support

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -33,9 +33,7 @@ import useAndroidRippleForView, {
 import * as React from 'react';
 import {useImperativeHandle, useMemo, useRef, useState} from 'react';
 
-const defaultHoverStyle: HoverStyle = {
-  effectType: 'automatic',
-};
+const defaultHoverStyle: HoverStyle = 'highlight';
 
 type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
 

packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

@@ -22,9 +22,7 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-const defaultHoverStyle: HoverStyle = {
-  effectType: 'automatic',
-};
+const defaultHoverStyle: HoverStyle = 'highlight';
 
 type TVProps = $ReadOnly<{|
   hasTVPreferredFocus?: ?boolean,

packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts

@@ -16,20 +16,7 @@ import {LayoutChangeEvent, PointerEvents} from '../../Types/CoreEventTypes';
 import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 
-export type HoverStyle = {
-  /**
-   * If true the hover effect is enabled. Defaults to true.
-   */
-  enabled: boolean;
-  /**
-   * Hover effect type to apply to the view.
-   */
-  effectType: 'automatic' | 'lift' | 'highlight';
-  /**
-   * Corner radius of the hover effect.
-   */
-  cornerRadius?: number | undefined;
-};
+export type HoverStyle = 'lift' | 'highlight';
 
 export type TVParallaxProperties = {
   /**

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -263,20 +263,7 @@ type AndroidDrawableRipple = $ReadOnly<{|
   rippleRadius?: ?number,
 |}>;
 
-export type HoverStyle = $ReadOnly<{|
-  /**
-   * If true the hover effect is enabled. Defaults to true.
-   */
-  enabled?: ?boolean,
-  /**
-   * Hover effect type to apply to the view.
-   */
-  effectType: 'automatic' | 'lift' | 'highlight',
-  /**
-   * Corner radius of the hover effect.
-   */
-  cornerRadius?: ?number,
-|}>;
+export type HoverStyle = 'lift' | 'highlight';
 
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
 

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -293,6 +293,12 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
       oldViewProps.borderColors != newViewProps.borderColors) {
     needsInvalidateLayer = YES;
   }
+
+#if TARGET_OS_VISION
+  if (oldViewProps.visionos_hoverStyle != newViewProps.visionos_hoverStyle) {
+    [self updateHoverStyleProp:[NSString stringWithUTF8String:newViewProps.visionos_hoverStyle.c_str()]];
+  }
+#endif
 
   // `nativeId`
   if (oldViewProps.nativeId != newViewProps.nativeId) {
@@ -513,6 +519,28 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
   }
 }
 
+#if TARGET_OS_VISION
+- (void) updateHoverStyleProp:(NSString*)hoverStyle {
+    if (hoverStyle == nil || [hoverStyle isEqualToString:@""]) {
+        self.hoverStyle = nil;
+        return;
+    }
+
+    UIShape *shape = [UIShape rectShapeWithCornerRadius:self.layer.cornerRadius];
+    id<UIHoverEffect> hoverEffect;
+
+    if ([hoverStyle isEqualToString:@"lift"]) {
+        hoverEffect = [UIHoverLiftEffect effect];
+    } else if ([hoverStyle isEqualToString:@"highlight"]) {
+        hoverEffect = [UIHoverHighlightEffect effect];
+    }
+
+    if (hoverEffect != nil) {
+        self.hoverStyle = [UIHoverStyle styleWithEffect:hoverEffect shape:shape];
+    }
+}
+#endif
+
 static RCTCornerRadii RCTCornerRadiiFromBorderRadii(BorderRadii borderRadii)
 {
   return RCTCornerRadii{

packages/react-native/React/Views/RCTView.h

@@ -124,7 +124,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 /**
  *  The hover style to apply to a view, including an effect and a shape to use for displaying that effect.
  */
-@property (nonatomic, copy) NSDictionary *hoverStyleProperties;
+@property (nonatomic, copy) NSString *hoverStyleEffect;
 #endif
 
 /**

packages/react-native/React/Views/RCTView.m

@@ -668,33 +668,26 @@ - (UIEdgeInsets)bordersAsInsets
 
 
 #if TARGET_OS_VISION
-- (void)setHoverStyleProperties:(NSDictionary *)hoverStyleProperties {
-    _hoverStyleProperties = hoverStyleProperties;
+- (void)setHoverStyleEffect:(NSString *)hoverStyleEffect {
+    _hoverStyleEffect = hoverStyleEffect;
 
-    BOOL enabled = _hoverStyleProperties[@"enabled"] != nil ? [_hoverStyleProperties[@"enabled"] boolValue] : YES;
-
-    if (!enabled || hoverStyleProperties == nil) {
+    if (hoverStyleEffect == nil) {
         self.hoverStyle = nil;
         return;
     }
 
-    NSString *effectType = (NSString *)[_hoverStyleProperties objectForKey:@"effectType"];
-    NSNumber *cornerRadius = (NSNumber *)[_hoverStyleProperties objectForKey:@"cornerRadius"];
-
-    float cornerRadiusFloat = [cornerRadius floatValue];
-
-    UIShape *shape = [UIShape rectShapeWithCornerRadius:cornerRadiusFloat];
+    UIShape *shape = [UIShape rectShapeWithCornerRadius:_borderRadius];
     id<UIHoverEffect> hoverEffect;
 
-    if ([effectType isEqualToString:@"lift"]) {
+    if ([hoverStyleEffect isEqualToString:@"lift"]) {
         hoverEffect = [UIHoverLiftEffect effect];
-    } else if ([effectType isEqualToString:@"highlight"]) {
+    } else if ([hoverStyleEffect isEqualToString:@"highlight"]) {
         hoverEffect = [UIHoverHighlightEffect effect];
-    } else if ([effectType isEqualToString:@"automatic"]) {
-        hoverEffect = [UIHoverAutomaticEffect effect];
     }
 
-    self.hoverStyle = [UIHoverStyle styleWithEffect:hoverEffect shape:shape];
+    if (hoverEffect != nil) {
+        self.hoverStyle = [UIHoverStyle styleWithEffect:hoverEffect shape:shape];
+    }
 }
 #endif
 

packages/react-native/React/Views/RCTViewManager.m

@@ -194,7 +194,7 @@ - (RCTShadowView *)shadowView
 RCT_REMAP_VIEW_PROPERTY(testID, reactAccessibilityElement.accessibilityIdentifier, NSString)
 
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
-RCT_REMAP_VISIONOS_VIEW_PROPERTY(visionos_hoverStyle, hoverStyleProperties, NSDictionary)
+RCT_REMAP_VISIONOS_VIEW_PROPERTY(visionos_hoverStyle, hoverStyleEffect, NSString)
 RCT_REMAP_VIEW_PROPERTY(backfaceVisibility, layer.doubleSided, css_backface_visibility_t)
 RCT_REMAP_VIEW_PROPERTY(opacity, alpha, CGFloat)
 RCT_REMAP_VIEW_PROPERTY(shadowColor, layer.shadowColor, CGColor)

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -71,6 +71,17 @@ BaseViewProps::BaseViewProps(
                     "backgroundColor",
                     sourceProps.backgroundColor,
                     {})),
+#if TARGET_OS_VISION
+    visionos_hoverStyle(
+        CoreFeatures::enablePropIteratorSetter
+            ? sourceProps.visionos_hoverStyle
+            : convertRawProp(
+                  context,
+                  rawProps,
+                  "visionos_hoverStyle",
+                  sourceProps.visionos_hoverStyle,
+                  {})),
+#endif
       borderRadii(
           CoreFeatures::enablePropIteratorSetter ? sourceProps.borderRadii
                                                  : convertRawProp(
@@ -281,6 +292,9 @@ void BaseViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(collapsable);
     RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews);
     RAW_SET_PROP_SWITCH_CASE_BASIC(experimental_layoutConformance);
+#if TARGET_OS_VISION
+    RAW_SET_PROP_SWITCH_CASE_BASIC(visionos_hoverStyle);
+#endif
     // events field
     VIEW_EVENT_CASE(PointerEnter);
     VIEW_EVENT_CASE(PointerEnterCapture);

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h

@@ -63,6 +63,10 @@ class BaseViewProps : public YogaStylableProps, public AccessibilityProps {
   PointerEventsMode pointerEvents{};
   EdgeInsets hitSlop{};
   bool onLayout{};
+
+#if TARGET_OS_VISION
+  std::string visionos_hoverStyle{};
+#endif
 
   ViewEvents events{};