[apple] Handle hover in Touchable (#4283)

## Description

Follow up for [Android
PR](#4282)
which brings hover animations to iOS, macOS and tvOS platforms.

Of course docs/jsdoc will have to be unified between them, it will be
done after merging either of these.

<!--
Description and motivation for this PR.

Include 'Fixes #<number>' if this is fixing some issue.
-->

## Test plan

<details>
<summary>Tested on existing Touchable example and the code below:
</summary>

```tsx
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  GestureHandlerRootView,
  Touchable as GHTouchable,
} from 'react-native-gesture-handler';

const SLOW = 700;

export default function App() {
  const [pressCount, setPressCount] = React.useState(0);
  const [disabled, setDisabled] = React.useState(false);

  // Auto-toggle `disabled` every 2s so hover mask/resume can be tested with a
  // mouse held still over the button — tapping a separate control would move
  // the pointer off first. Hover and watch: the visual masks to default while
  // disabled and resumes the hover look when re-enabled, pointer unmoved.
  React.useEffect(() => {
    const id = setInterval(() => setDisabled((d) => !d), 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <GestureHandlerRootView style={styles.root}>
      <Text style={styles.title}>Slow hover + press</Text>
      <Text style={styles.hint}>
        Use a mouse / stylus. Hover to grow & fade, press to shrink & fade more.
        Transitions should never flicker through the default state.
      </Text>

      <View style={styles.stage}>
        <GHTouchable
          // Press (active) visuals
          defaultOpacity={1}
          defaultScale={1}
          activeOpacity={0.3}
          activeScale={0.8}
          // Hover visuals
          hoverOpacity={0.6}
          hoverScale={1.2}
          // Underlay so the change is extra visible
          underlayColor="black"
          defaultUnderlayOpacity={0}
          hoverUnderlayOpacity={0.15}
          activeUnderlayOpacity={0.35}
          // Slow everything down: in/out for both tap and hover
          animationDuration={{
            tap: { in: SLOW, out: SLOW },
            hover: { in: SLOW, out: SLOW },
          }}
          disabled={disabled}
          style={styles.button}
          onPress={() => setPressCount((c) => c + 1)}>
          <Text style={styles.buttonText}>Hover / Press me</Text>
        </GHTouchable>
      </View>

      <Text style={styles.counter}>
        {disabled ? 'DISABLED' : 'enabled'} · Presses: {pressCount}
      </Text>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 8,
  },
  hint: {
    fontSize: 14,
    color: '#7f8c8d',
    textAlign: 'center',
    marginBottom: 40,
  },
  stage: {
    width: 260,
    height: 260,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 180,
    height: 180,
    borderRadius: 24,
    backgroundColor: '#8e44ad',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  counter: {
    marginTop: 40,
    fontSize: 16,
    color: '#2c3e50',
    fontWeight: 'bold',
  },
});
```

</details>

Author: m-bert

packages/docs-gesture-handler/docs/components/touchable.mdx

@@ -237,29 +237,23 @@ defaultUnderlayOpacity?: number;
 
 Defines the initial opacity of underlay when the button is inactive. By default set to `0`.
 
-<Badges platforms={['web', 'android']}>
 ### hoverOpacity
-</Badges>
 
 ```ts
 hoverOpacity?: number;
 ```
 
 Defines the opacity of the whole component when the button is hovered. By default falls back to [`defaultOpacity`](#defaultopacity).
 
-<Badges platforms={['web', 'android']}>
 ### hoverScale
-</Badges>
 
 ```ts
 hoverScale?: number;
 ```
 
 Defines the scale of the whole component when the button is hovered. By default falls back to [`defaultScale`](#defaultscale).
 
-<Badges platforms={['web', 'android']}>
 ### hoverUnderlayOpacity
-</Badges>
 
 ```ts
 hoverUnderlayOpacity?: number;
@@ -296,7 +290,7 @@ Press and hover animation timing, in milliseconds. Defaults to 50ms for the in p
 
 Each animation has two phases — `in` (running while the pointer engages the component) and `out` (running after the pointer releases) — across two categories:
 - `tap` — applies to presses.
-- `hover` — pointer hover (web and Android).
+- `hover` — pointer hover.
 
 `longPress` is an optional override for the press-out timing once the press has been held past [`delayLongPress`](#delaylongpress). It only has an `out` field (the press-in is always the `tap` in duration). If omitted, the long-press release uses the resolved `tap` out duration.
 

packages/react-native-gesture-handler/RNGestureHandler.podspec

@@ -20,7 +20,7 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/software-mansion/react-native-gesture-handler", :tag => "#{s.version}" }
   s.source_files = "apple/**/*.{h,m,mm}", "shared/**/*.{h,cpp}"
   s.requires_arc = true
-  s.platforms       = { ios: '11.0', tvos: '11.0', osx: '10.15', visionos: '1.0' }
+  s.platforms       = { ios: '15.1', tvos: '15.1', osx: '14.0', visionos: '1.0' }
   s.xcconfig = {
     "OTHER_CFLAGS" => "$(inherited) #{compilation_metadata_generation_flag} #{version_flag}"
   }

packages/react-native-gesture-handler/apple/Handlers/RNForceTouchHandler.m

@@ -89,9 +89,7 @@ - (void)performFeedbackIfRequired
 {
 #if !TARGET_OS_TV && !TARGET_OS_VISION
   if (_feedbackOnActivation) {
-    if (@available(iOS 10.0, *)) {
-      [[[UIImpactFeedbackGenerator alloc] initWithStyle:(UIImpactFeedbackStyleMedium)] impactOccurred];
-    }
+    [[[UIImpactFeedbackGenerator alloc] initWithStyle:(UIImpactFeedbackStyleMedium)] impactOccurred];
   }
 #endif
 }

packages/react-native-gesture-handler/apple/Handlers/RNHoverHandler.h

@@ -7,6 +7,5 @@
 
 #import "RNGestureHandler.h"
 
-API_AVAILABLE(ios(13.4))
 @interface RNHoverGestureHandler : RNGestureHandler
 @end

packages/react-native-gesture-handler/apple/Handlers/RNHoverHandler.m

@@ -13,19 +13,14 @@
 #import <React/RCTConvert.h>
 #import <UIKit/UIGestureRecognizerSubclass.h>
 
-#define CHECK_TARGET(__VERSION__)                                                \
-  defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_##__VERSION__) && \
-      __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_##__VERSION__ && !TARGET_OS_TV
-
 typedef NS_ENUM(NSInteger, RNGestureHandlerHoverEffect) {
   RNGestureHandlerHoverEffectNone = 0,
   RNGestureHandlerHoverEffectLift,
   RNGestureHandlerHoverEffectHightlight,
 };
 
-#if CHECK_TARGET(13_4)
+#if !TARGET_OS_TV
 
-API_AVAILABLE(ios(13.4))
 @interface RNBetterHoverGestureRecognizer : UIHoverGestureRecognizer <UIPointerInteractionDelegate>
 
 - (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler;
@@ -85,7 +80,7 @@ - (UIPointerStyle *)pointerInteraction:(UIPointerInteraction *)interaction style
 #endif
 
 @implementation RNHoverGestureHandler {
-#if CHECK_TARGET(13_4)
+#if !TARGET_OS_TV
   UIPointerInteraction *_pointerInteraction;
 #endif
 }
@@ -97,67 +92,55 @@ - (instancetype)initWithTag:(NSNumber *)tag
 #endif
 
   if ((self = [super initWithTag:tag])) {
-#if CHECK_TARGET(13_4)
-    if (@available(iOS 13.4, *)) {
-      _recognizer = [[RNBetterHoverGestureRecognizer alloc] initWithGestureHandler:self];
-      _pointerInteraction =
-          [[UIPointerInteraction alloc] initWithDelegate:(id<UIPointerInteractionDelegate>)_recognizer];
-    }
+#if !TARGET_OS_TV
+    _recognizer = [[RNBetterHoverGestureRecognizer alloc] initWithGestureHandler:self];
+    _pointerInteraction = [[UIPointerInteraction alloc] initWithDelegate:(id<UIPointerInteractionDelegate>)_recognizer];
 #endif
   }
   return self;
 }
 
 - (void)bindToView:(UIView *)view
 {
-#if CHECK_TARGET(13_4)
-  if (@available(iOS 13.4, *)) {
-    [super bindToView:view];
-    [view addInteraction:_pointerInteraction];
-  }
+#if !TARGET_OS_TV
+  [super bindToView:view];
+  [view addInteraction:_pointerInteraction];
 #endif
 }
 
 - (void)unbindFromView
 {
-#if CHECK_TARGET(13_4)
-  if (@available(iOS 13.4, *)) {
-    // Remove the interaction before [super unbindFromView] detaches the recognizer and nils recognizer.view.
-    [self.recognizer.view removeInteraction:_pointerInteraction];
-    [super unbindFromView];
-  }
+#if !TARGET_OS_TV
+  [self.recognizer.view removeInteraction:_pointerInteraction];
+  [super unbindFromView];
 #endif
 }
 
 - (void)resetConfig
 {
   [super resetConfig];
 
-#if CHECK_TARGET(13_4)
-  if (@available(iOS 13.4, *)) {
-    RNBetterHoverGestureRecognizer *recognizer = (RNBetterHoverGestureRecognizer *)_recognizer;
-    recognizer.hoverEffect = RNGestureHandlerHoverEffectNone;
-  }
+#if !TARGET_OS_TV
+  RNBetterHoverGestureRecognizer *recognizer = (RNBetterHoverGestureRecognizer *)_recognizer;
+  recognizer.hoverEffect = RNGestureHandlerHoverEffectNone;
 #endif
 }
 
 - (void)updateConfig:(NSDictionary *)config
 {
   [super updateConfig:config];
 
-#if CHECK_TARGET(13_4)
-  if (@available(iOS 13.4, *)) {
-    RNBetterHoverGestureRecognizer *recognizer = (RNBetterHoverGestureRecognizer *)_recognizer;
-    APPLY_INT_PROP(hoverEffect);
-  }
+#if !TARGET_OS_TV
+  RNBetterHoverGestureRecognizer *recognizer = (RNBetterHoverGestureRecognizer *)_recognizer;
+  APPLY_INT_PROP(hoverEffect);
 #endif
 }
 
 - (void)setCurrentPointerType:(RNGestureHandlerPointerType)pointerType
 {
   _pointerType = pointerType;
 
-#if CHECK_TARGET(16_1)
+#if !TARGET_OS_TV
   if (@available(iOS 16.1, *)) {
     if (((UIHoverGestureRecognizer *)self.recognizer).zOffset > 0.0) {
       _pointerType = RNGestureHandlerStylus;

packages/react-native-gesture-handler/apple/Handlers/RNPanHandler.m

@@ -380,14 +380,9 @@ - (void)resetConfig
   recognizer.activeOffsetYStart = NAN;
   recognizer.activeOffsetYEnd = NAN;
   recognizer.failOffsetYStart = NAN;
-  recognizer.failOffsetYStart = NAN;
   recognizer.failOffsetYEnd = NAN;
-#if !TARGET_OS_OSX && !TARGET_OS_TV && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130400
-  if (@available(iOS 13.4, *)) {
-    recognizer.allowedScrollTypesMask = 0;
-  }
-#endif
 #if !TARGET_OS_OSX && !TARGET_OS_TV
+  recognizer.allowedScrollTypesMask = 0;
   recognizer.minimumNumberOfTouches = 1;
   recognizer.maximumNumberOfTouches = NSUIntegerMax;
 #endif
@@ -412,12 +407,10 @@ - (void)updateConfig:(NSDictionary *)config
   APPLY_FLOAT_PROP(failOffsetYStart);
   APPLY_FLOAT_PROP(failOffsetYEnd);
 
-#if !TARGET_OS_OSX && !TARGET_OS_TV && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130400
-  if (@available(iOS 13.4, *)) {
-    bool enableTrackpadTwoFingerGesture = [RCTConvert BOOL:config[@"enableTrackpadTwoFingerGesture"]];
-    if (enableTrackpadTwoFingerGesture) {
-      recognizer.allowedScrollTypesMask = UIScrollTypeMaskAll;
-    }
+#if !TARGET_OS_OSX && !TARGET_OS_TV
+  bool enableTrackpadTwoFingerGesture = [RCTConvert BOOL:config[@"enableTrackpadTwoFingerGesture"]];
+  if (enableTrackpadTwoFingerGesture) {
+    recognizer.allowedScrollTypesMask = UIScrollTypeMaskAll;
   }
 
   APPLY_NAMED_INT_PROP(minimumNumberOfTouches, @"minPointers");

packages/react-native-gesture-handler/apple/RNGestureHandlerButton.h

@@ -37,6 +37,11 @@
 @property (nonatomic, assign) CGFloat defaultScale;
 @property (nonatomic, assign) CGFloat defaultUnderlayOpacity;
 @property (nonatomic, assign) CGFloat activeUnderlayOpacity;
+@property (nonatomic, assign) NSInteger hoverAnimationInDuration;
+@property (nonatomic, assign) NSInteger hoverAnimationOutDuration;
+@property (nonatomic, assign) CGFloat hoverOpacity;
+@property (nonatomic, assign) CGFloat hoverScale;
+@property (nonatomic, assign) CGFloat hoverUnderlayOpacity;
 @property (nonatomic, strong, nullable) RNGHColor *underlayColor;
 
 /**
@@ -54,6 +59,8 @@
 #if TARGET_OS_TV
 - (void)handleAnimatePressIn;
 - (void)handleAnimatePressOut;
+- (void)onHoverIn;
+- (void)onHoverOut;
 #endif // TARGET_OS_TV
 
 /**