[macOS] Add HoverGestureHandler

MacOSExample/src/App.tsx

@@ -15,6 +15,7 @@ import PinchableBox from './recipes/scaleAndRotate';
 import Tap from './basic/tap';
 import LongPressExample from './basic/longPress';
 import ManualExample from './basic/manual';
+import HoverExample from './basic/hover';
 
 interface Example {
   name: string;
@@ -35,6 +36,7 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'Tap', component: Tap },
       { name: 'LongPress', component: LongPressExample },
       { name: 'Manual', component: ManualExample },
+      { name: 'Hover', component: HoverExample },
     ],
   },
 ];

MacOSExample/src/basic/hover/index.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AnimationDuration = 250;
+
+const Colors = {
+  Initial: '#0a2688',
+  Hovered: '#6fcef5',
+};
+
+export default function HoverExample() {
+  const isHovered = useSharedValue(false);
+  const colorProgress = useSharedValue(0);
+  const color1 = useSharedValue(Colors.Initial);
+  const color2 = useSharedValue(Colors.Hovered);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      colorProgress.value,
+      [0, 1],
+      [color1.value, color2.value]
+    );
+
+    return {
+      transform: [
+        {
+          scale: withTiming(isHovered.value ? 1.2 : 1, {
+            duration: AnimationDuration,
+          }),
+        },
+      ],
+      backgroundColor,
+    };
+  });
+
+  const g = Gesture.Hover()
+    .onBegin(() => {
+      console.log('onBegin');
+
+      isHovered.value = true;
+      colorProgress.value = withTiming(1, {
+        duration: AnimationDuration,
+      });
+    })
+    .onStart(() => console.log('onStart'))
+    .onEnd(() => console.log('onEnd'))
+    .onFinalize((_, success) => {
+      console.log('onFinalize', success);
+
+      isHovered.value = false;
+
+      colorProgress.value = withTiming(0, {
+        duration: AnimationDuration,
+      });
+    });
+
+  return (
+    <View style={styles.container}>
+      <GestureDetector gesture={g}>
+        <Animated.View style={[styles.pressBox, animatedStyles]} />
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+
+  pressBox: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+  },
+});

apple/Handlers/RNHoverHandler.m

@@ -6,6 +6,7 @@
 //
 
 #import "RNHoverHandler.h"
+#import <React/UIView+React.h>
 
 #if !TARGET_OS_OSX
 
@@ -163,17 +164,58 @@ - (RNGestureHandlerEventExtraData *)eventExtraData:(UIGestureRecognizer *)recogn
 
 #else
 
-@implementation RNHoverGestureHandler
+@implementation RNHoverGestureHandler {
+  NSTrackingArea *trackingArea;
+  RNGHUIView *_view;
+}
 
 - (instancetype)initWithTag:(NSNumber *)tag
 {
-  RCTLogWarn(@"HoverGestureHandler is not supported on macOS");
   if ((self = [super initWithTag:tag])) {
     _recognizer = [NSGestureRecognizer alloc];
   }
+
   return self;
 }
 
+- (void)bindToView:(RNGHUIView *)view
+{
+  _view = view;
+
+  NSTrackingAreaOptions options =
+      NSTrackingMouseEnteredAndExited | NSTrackingActiveInActiveApp | NSTrackingInVisibleRect;
+
+  trackingArea = [[NSTrackingArea alloc] initWithRect:_view.bounds options:options owner:self userInfo:nil];
+  [_view addTrackingArea:trackingArea];
+}
+
+- (void)unbindFromView
+{
+  [_view removeTrackingArea:trackingArea];
+  _view = nil;
+}
+
+- (void)mouseEntered:(NSEvent *)event
+{
+  [self sendEventsInState:RNGestureHandlerStateBegan
+           forViewWithTag:_view.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+  [self sendEventsInState:RNGestureHandlerStateActive
+           forViewWithTag:_view.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+}
+
+- (void)mouseExited:(NSEvent *)theEvent
+{
+  [self sendEventsInState:RNGestureHandlerStateEnd
+           forViewWithTag:_view.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+
+  [self sendEventsInState:RNGestureHandlerStateUndetermined
+           forViewWithTag:_view.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+}
+
 @end
 
 #endif