Dispatch press events directly from the native side on iOS

Author: j-piasecki

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

@@ -8,6 +8,25 @@
 
 #import "RNGestureHandler.h"
 
+typedef NS_ENUM(NSInteger, RNGHButtonEventType) {
+  RNGHButtonEventTypePress,
+  RNGHButtonEventTypePressIn,
+  RNGHButtonEventTypePressOut,
+  RNGHButtonEventTypeLongPress,
+  RNGHButtonEventTypeInteractionFinished,
+};
+
+/*
+ * Receives press events produced by the button's state machine so that they can
+ * be dispatched through the component's event emitter.
+ */
+@protocol RNGHButtonPressEventDelegate <NSObject>
+
+- (void)dispatchButtonEvent:(RNGHButtonEventType)type
+              withExtraData:(nullable RNGestureHandlerEventExtraData *)extraData;
+
+@end
+
 #if TARGET_OS_OSX
 
 #include <react/renderer/core/LayoutMetrics.h>
@@ -43,6 +62,15 @@
 @property (nonatomic, assign) CGFloat hoverScale;
 @property (nonatomic, assign) CGFloat hoverUnderlayOpacity;
 @property (nonatomic, strong, nullable) RNGHColor *underlayColor;
+@property (nonatomic, assign) BOOL hasLongPressHandler;
+
+/**
+ * Tag of the gesture handler managed by the button component. The press event
+ * state machine runs only while it's set.
+ */
+@property (nonatomic, strong, nullable) NSNumber *managedHandlerTag;
+
+@property (nonatomic, weak, nullable) id<RNGHButtonPressEventDelegate> pressEventDelegate;
 
 /**
  * The view that press animations are applied to. Defaults to self; set by the

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

@@ -7,6 +7,7 @@
 //
 
 #import "RNGestureHandlerButton.h"
+#import "Handlers/RNNativeViewHandler.h"
 
 #if !TARGET_OS_OSX
 #import <UIKit/UIKit.h>
@@ -18,6 +19,9 @@
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
 
+@interface RNGestureHandlerButton () <RNGHNativeViewHandlerStateObserver>
+@end
+
 /**
  * Gesture Handler Button components overrides standard mechanism used by RN
  * to determine touch target, which normally would reurn the UIView that is placed
@@ -50,6 +54,14 @@ @implementation RNGestureHandlerButton {
   BOOL _isHovered;
   BOOL _isPressed;
   dispatch_block_t _pendingHoverOutBlock;
+
+  // Press event state machine, driven by the state of the managed handler.
+  // Cannot rely on the pointerInside flag alone because it may change multiple
+  // times between the dispatched events.
+  BOOL _lastEventWasInside;
+  BOOL _longPressDetected;
+  dispatch_block_t _pendingLongPressBlock;
+  RNGestureHandlerEventExtraData *_lastObservedExtraData;
 #if TARGET_OS_OSX
   NSTrackingArea *_hoverTrackingArea;
 #endif
@@ -87,6 +99,12 @@ - (void)commonInit
   _isHovered = NO;
   _isPressed = NO;
   _pendingHoverOutBlock = nil;
+  _hasLongPressHandler = NO;
+  _managedHandlerTag = nil;
+  _lastEventWasInside = NO;
+  _longPressDetected = NO;
+  _pendingLongPressBlock = nil;
+  _lastObservedExtraData = nil;
 #if TARGET_OS_OSX
   self.wantsLayer = YES; // Crucial for macOS layer-backing
 #endif
@@ -148,6 +166,10 @@ - (void)prepareForRecycle
   // when defaults are unchanged between mounts.
   [self cancelPendingPressOutAnimation];
   [self cancelPendingHoverOut];
+  [self cancelPendingLongPress];
+  _lastEventWasInside = NO;
+  _longPressDetected = NO;
+  _lastObservedExtraData = nil;
 
   RNGHUIView *target = self.animationTarget ?: self;
   target.layer.transform = CATransform3DIdentity;
@@ -172,12 +194,16 @@ - (void)viewWillMoveToWindow:(RNGHWindow *)newWindow
   if (newWindow == nil) {
     [self cancelPendingPressOutAnimation];
     [self cancelPendingHoverOut];
+    [self cancelPendingLongPress];
     [self applyStartAnimationState];
     _isTouchInsideBounds = NO;
     _suppressSuperControlActionDispatch = NO;
     _pressInTimestamp = 0;
     _isHovered = NO;
     _isPressed = NO;
+    _lastEventWasInside = NO;
+    _longPressDetected = NO;
+    _lastObservedExtraData = nil;
   }
 }
 #else
@@ -187,12 +213,16 @@ - (void)willMoveToWindow:(RNGHWindow *)newWindow
   if (newWindow == nil) {
     [self cancelPendingPressOutAnimation];
     [self cancelPendingHoverOut];
+    [self cancelPendingLongPress];
     [self applyStartAnimationState];
     _isTouchInsideBounds = NO;
     _suppressSuperControlActionDispatch = NO;
     _pressInTimestamp = 0;
     _isHovered = NO;
     _isPressed = NO;
+    _lastEventWasInside = NO;
+    _longPressDetected = NO;
+    _lastObservedExtraData = nil;
   }
 }
 #endif
@@ -566,6 +596,110 @@ - (void)handleAnimatePressOut
   }
 }
 
+#pragma mark - Press event state machine
+
+- (void)onHandlerUpdate:(RNGestureHandlerEventExtraData *)extraData
+{
+  if (_managedHandlerTag == nil) {
+    return;
+  }
+
+  _lastObservedExtraData = extraData;
+  BOOL pointerInside = [extraData.data[@"pointerInside"] boolValue];
+
+  if (pointerInside == _lastEventWasInside) {
+    return;
+  }
+
+  if (pointerInside) {
+    [self dispatchButtonEvent:RNGHButtonEventTypePressIn withExtraData:extraData];
+  } else {
+    [self dispatchButtonEvent:RNGHButtonEventTypePressOut withExtraData:extraData];
+    [self cancelPendingLongPress];
+  }
+}
+
+- (void)onHandlerStateChange:(RNGestureHandlerState)newState
+                   prevState:(RNGestureHandlerState)prevState
+                   extraData:(RNGestureHandlerEventExtraData *)extraData
+{
+  if (_managedHandlerTag == nil) {
+    return;
+  }
+
+  _lastObservedExtraData = extraData;
+
+  // Capture a local copy, since dispatching the events changes the flag.
+  // Specifically the PressOut -> Press scenario on the END state.
+  BOOL localLastEventWasInside = _lastEventWasInside;
+  BOOL isFinished = newState == RNGestureHandlerStateEnd || newState == RNGestureHandlerStateFailed ||
+      newState == RNGestureHandlerStateCancelled;
+
+  if (newState == RNGestureHandlerStateBegan) {
+    [self dispatchButtonEvent:RNGHButtonEventTypePressIn withExtraData:extraData];
+    _longPressDetected = NO;
+
+    // Duration 0 fires the long press immediately; -1 (unset) disables it.
+    if (_hasLongPressHandler && _longPressDuration >= 0) {
+      [self scheduleLongPress];
+    }
+  }
+
+  if (isFinished) {
+    if (localLastEventWasInside) {
+      [self dispatchButtonEvent:RNGHButtonEventTypePressOut withExtraData:extraData];
+    }
+
+    [self cancelPendingLongPress];
+  }
+
+  if (newState == RNGestureHandlerStateEnd && !_longPressDetected && localLastEventWasInside) {
+    [self dispatchButtonEvent:RNGHButtonEventTypePress withExtraData:extraData];
+  }
+
+  if (isFinished) {
+    [self dispatchButtonEvent:RNGHButtonEventTypeInteractionFinished withExtraData:extraData];
+  }
+}
+
+- (void)dispatchButtonEvent:(RNGHButtonEventType)type withExtraData:(RNGestureHandlerEventExtraData *)extraData
+{
+  [self.pressEventDelegate dispatchButtonEvent:type withExtraData:extraData];
+
+  if (type == RNGHButtonEventTypePressIn) {
+    _lastEventWasInside = YES;
+  } else if (type == RNGHButtonEventTypePressOut) {
+    _lastEventWasInside = NO;
+  }
+}
+
+- (void)scheduleLongPress
+{
+  [self cancelPendingLongPress];
+
+  __weak auto weakSelf = self;
+  _pendingLongPressBlock = dispatch_block_create(DISPATCH_BLOCK_ASSIGN_CURRENT, ^{
+    __strong auto strongSelf = weakSelf;
+    if (strongSelf) {
+      strongSelf->_pendingLongPressBlock = nil;
+      strongSelf->_longPressDetected = YES;
+      [strongSelf dispatchButtonEvent:RNGHButtonEventTypeLongPress withExtraData:strongSelf->_lastObservedExtraData];
+    }
+  });
+  dispatch_after(
+      dispatch_time(DISPATCH_TIME_NOW, (int64_t)(_longPressDuration * NSEC_PER_MSEC)),
+      dispatch_get_main_queue(),
+      _pendingLongPressBlock);
+}
+
+- (void)cancelPendingLongPress
+{
+  if (_pendingLongPressBlock) {
+    dispatch_block_cancel(_pendingLongPressBlock);
+    _pendingLongPressBlock = nil;
+  }
+}
+
 #if !TARGET_OS_OSX && !TARGET_OS_TV
 - (void)handleHover:(UIHoverGestureRecognizer *)recognizer
 {

packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm

@@ -29,7 +29,7 @@ static RNGestureHandlerPointerEvents RCTPointerEventsToEnum(facebook::react::Poi
   }
 }
 
-@interface RNGestureHandlerButtonComponentView () <RCTRNGestureHandlerButtonViewProtocol>
+@interface RNGestureHandlerButtonComponentView () <RCTRNGestureHandlerButtonViewProtocol, RNGHButtonPressEventDelegate>
 @end
 
 @implementation RNGestureHandlerButtonComponentView {
@@ -63,6 +63,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _moduleId = -1;
     _buttonView = [[RNGestureHandlerButton alloc] initWithFrame:self.bounds];
     _buttonView.animationTarget = self;
+    _buttonView.pressEventDelegate = self;
 
     self.contentView = _buttonView;
   }
@@ -253,6 +254,49 @@ - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
                                          left:borderMetrics.borderWidths.left];
 }
 
+#pragma mark - RNGHButtonPressEventDelegate
+
+- (void)dispatchButtonEvent:(RNGHButtonEventType)type withExtraData:(RNGestureHandlerEventExtraData *)extraData
+{
+  if (_eventEmitter == nullptr) {
+    return;
+  }
+
+  const auto &eventEmitter = static_cast<const RNGestureHandlerButtonEventEmitter &>(*_eventEmitter);
+  NSDictionary *data = extraData.data;
+
+  // The generated event structs are distinct types with identical fields, hence
+  // the generic lambda.
+  auto fillEvent = [&](auto event) {
+    event.pointerInside = [data[@"pointerInside"] boolValue];
+    event.x = [data[@"x"] doubleValue];
+    event.y = [data[@"y"] doubleValue];
+    event.absoluteX = [data[@"absoluteX"] doubleValue];
+    event.absoluteY = [data[@"absoluteY"] doubleValue];
+    event.numberOfPointers = [data[@"numberOfPointers"] intValue];
+    event.pointerType = [data[@"pointerType"] intValue];
+    return event;
+  };
+
+  switch (type) {
+    case RNGHButtonEventTypePress:
+      eventEmitter.onPress(fillEvent(RNGestureHandlerButtonEventEmitter::OnPress{}));
+      break;
+    case RNGHButtonEventTypePressIn:
+      eventEmitter.onPressIn(fillEvent(RNGestureHandlerButtonEventEmitter::OnPressIn{}));
+      break;
+    case RNGHButtonEventTypePressOut:
+      eventEmitter.onPressOut(fillEvent(RNGestureHandlerButtonEventEmitter::OnPressOut{}));
+      break;
+    case RNGHButtonEventTypeLongPress:
+      eventEmitter.onLongPress(fillEvent(RNGestureHandlerButtonEventEmitter::OnLongPress{}));
+      break;
+    case RNGHButtonEventTypeInteractionFinished:
+      eventEmitter.onInteractionFinished(fillEvent(RNGestureHandlerButtonEventEmitter::OnInteractionFinished{}));
+      break;
+  }
+}
+
 #pragma mark - RCTComponentViewProtocol
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -371,6 +415,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   _moduleId = newProps.moduleId;
   _buttonView.userEnabled = newProps.enabled;
+  _buttonView.hasLongPressHandler = newProps.hasLongPressHandler;
   _buttonView.tapAnimationInDuration = newProps.tapAnimationInDuration > 0 ? newProps.tapAnimationInDuration : 0;
   _buttonView.tapAnimationOutDuration = newProps.tapAnimationOutDuration > 0 ? newProps.tapAnimationOutDuration : 0;
   _buttonView.longPressDuration = newProps.longPressDuration;