Add hover selector

Author: wisniewskij

apps/common-app/src/apps/reanimated/examples/PseudoHoverExample.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+export default function PseudoHoverExample() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>Hover over the boxes (mouse / trackpad)</Text>
+      <View style={styles.row}>
+        <Animated.View
+          style={{
+            ...styles.box,
+            backgroundColor: { default: '#4a90e2', ':hover': '#1a5fb4' },
+            transform: {
+              default: [{ scale: 1 }],
+              ':hover': [{ scale: 1.1 }],
+            },
+            transitionDuration: '150ms',
+          }}
+        />
+        <Animated.View
+          style={{
+            ...styles.box,
+            backgroundColor: { default: '#e74c3c', ':hover': '#922b21' },
+            borderRadius: { default: 16, ':hover': 40 },
+            transitionDuration: '200ms',
+          }}
+        />
+        <Animated.View
+          style={{
+            ...styles.box,
+            backgroundColor: { default: '#2ecc71', ':hover': '#1a7a43' },
+            opacity: { default: 0.6, ':hover': 1 },
+            transitionDuration: '120ms',
+          }}
+        />
+      </View>
+      <Text style={styles.description}>
+        Style changes happen in C++ on UI thread.{'\n'}
+        No JS frame should appear on the profiler.
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 32,
+    padding: 20,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 20,
+  },
+  box: {
+    width: 90,
+    height: 90,
+    borderRadius: 16,
+  },
+  description: {
+    textAlign: 'center',
+    color: '#666',
+    fontSize: 14,
+    lineHeight: 22,
+  },
+});

apps/common-app/src/apps/reanimated/examples/index.ts

@@ -1,6 +1,7 @@
 import AboutExample from './AboutExample';
 import PseudoFocusExample from './PseudoFocusExample';
 import PseudoActiveExample from './PseudoActiveExample';
+import PseudoHoverExample from './PseudoHoverExample';
 import AmountExample from './AmountExample';
 import AndroidDrawPassExample from './AndroidDrawPassExample';
 import AnimatableRefExample from './AnimatableRefExample';
@@ -697,6 +698,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Pseudo-selectors (:focus)',
     screen: PseudoFocusExample,
   },
+  PseudoHoverExample: {
+    icon: '🖱️',
+    title: 'Pseudo-selectors (:hover)',
+    screen: PseudoHoverExample,
+  },
 
   // Old examples
   AnimatedStyleUpdateExample: {

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NativeProxy.java

@@ -136,6 +136,19 @@ public void attachPseudoSelector(int tag, String selector, PseudoSelectorCallbac
                 (v, hasFocus) -> callback.onSelectorStateChanged(hasFocus);
             view.setOnFocusChangeListener(focusListener);
             mPseudoSelectorDetachActions.put(tag, () -> view.setOnFocusChangeListener(null));
+          } else if (":hover".equals(selector)) {
+            View.OnHoverListener hoverListener =
+                (v, event) -> {
+                  int action = event.getActionMasked();
+                  if (action == MotionEvent.ACTION_HOVER_ENTER) {
+                    callback.onSelectorStateChanged(true);
+                  } else if (action == MotionEvent.ACTION_HOVER_EXIT) {
+                    callback.onSelectorStateChanged(false);
+                  }
+                  return false;
+                };
+            view.setOnHoverListener(hoverListener);
+            mPseudoSelectorDetachActions.put(tag, () -> view.setOnHoverListener(null));
           } else {
             View.OnTouchListener touchListener =
                 (v, event) -> {

packages/react-native-reanimated/apple/reanimated/apple/pseudoSelectors/REAPseudoSelectorObserver.h

@@ -15,7 +15,7 @@ NS_ASSUME_NONNULL_BEGIN
  * Supported selectors:
  *   ":active"  — UILongPressGestureRecognizer with minimumPressDuration = 0
  *   ":focus"   — NSNotificationCenter UITextFieldTextDidBeginEditing/DidEndEditing
- *   (":hover"  — UIHoverGestureRecognizer, to be added later)
+ *   ":hover"   — UIHoverGestureRecognizer (iOS 13+, pointer/trackpad/mouse devices)
  *
  * Lifetime: store as an associated object on the UIView so it is
  * automatically released when the view is deallocated.

packages/react-native-reanimated/apple/reanimated/apple/pseudoSelectors/REAPseudoSelectorObserver.mm

@@ -36,6 +36,15 @@ - (void)attachSelector:(NSString *)selectorName toView:(REAUIView *)view
     [view addGestureRecognizer:recognizer];
     _gestureRecognizer = recognizer;
     NSLog(@"[PseudoSelector] attached UILongPressGestureRecognizer (minimumPressDuration=0) to view: %@", view);
+  } else if ([selectorName isEqualToString:@":hover"]) {
+    if (@available(iOS 13.0, *)) {
+      UIHoverGestureRecognizer *recognizer =
+          [[UIHoverGestureRecognizer alloc] initWithTarget:self action:@selector(handleHoverGesture:)];
+      recognizer.delegate = self;
+      [view addGestureRecognizer:recognizer];
+      _gestureRecognizer = recognizer;
+      NSLog(@"[PseudoSelector] attached UIHoverGestureRecognizer to view: %@", view);
+    }
   } else if ([selectorName isEqualToString:@":focus"]) {
     NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
     __weak REAUIView *weakView = view;
@@ -77,6 +86,24 @@ - (void)attachSelector:(NSString *)selectorName toView:(REAUIView *)view
   }
 }
 
+- (void)handleHoverGesture:(UIHoverGestureRecognizer *)recognizer API_AVAILABLE(ios(13.0))
+{
+  switch (recognizer.state) {
+    case UIGestureRecognizerStateBegan:
+      NSLog(@"[PseudoSelector] :hover → true");
+      _callback(true);
+      break;
+    case UIGestureRecognizerStateEnded:
+    case UIGestureRecognizerStateCancelled:
+    case UIGestureRecognizerStateFailed:
+      NSLog(@"[PseudoSelector] :hover → false");
+      _callback(false);
+      break;
+    default:
+      break;
+  }
+}
+
 - (void)handleActiveGesture:(UILongPressGestureRecognizer *)recognizer
 {
   NSLog(@"[PseudoSelector] handleActiveGesture state: %ld", (long)recognizer.state);