Merge branch 'main' into @jpiasecki/web-gate-pointer-cancel

Author: j-piasecki

packages/react-native-gesture-handler/apple/Handlers/RNNativeViewHandler.mm

@@ -253,11 +253,6 @@ - (void)handleTouchDown:(UIView *)sender forEvent:(UIEvent *)event
             withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
                                                        withNumberOfTouches:event.allTouches.count
                                                            withPointerType:_pointerType]];
-
-  [self sendActiveStateEventIfChangedForView:sender
-                                   extraData:[RNGestureHandlerEventExtraData forPointerInside:YES
-                                                                          withNumberOfTouches:event.allTouches.count
-                                                                              withPointerType:_pointerType]];
 }
 
 - (void)handleTouchUpOutside:(UIView *)sender forEvent:(UIEvent *)event
@@ -275,11 +270,12 @@ - (void)handleTouchUpOutside:(UIView *)sender forEvent:(UIEvent *)event
 
 - (void)handleTouchUpInside:(UIView *)sender forEvent:(UIEvent *)event
 {
-  [self sendEventsInState:RNGestureHandlerStateEnd
-           forViewWithTag:sender.reactTag
-            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
-                                                       withNumberOfTouches:event.allTouches.count
-                                                           withPointerType:_pointerType]];
+  RNGestureHandlerEventExtraData *extraData = [RNGestureHandlerEventExtraData forPointerInside:YES
+                                                                           withNumberOfTouches:event.allTouches.count
+                                                                               withPointerType:_pointerType];
+
+  [self sendActiveStateEventIfChangedForView:sender extraData:extraData];
+  [self sendEventsInState:RNGestureHandlerStateEnd forViewWithTag:sender.reactTag withExtraData:extraData];
 }
 
 - (void)handleDragExit:(UIView *)sender forEvent:(UIEvent *)event

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

@@ -49,6 +49,14 @@
  */
 - (void)applyStartAnimationState;
 
+/**
+ * Resets all transient press/animation state so the button can be safely reused
+ * by Fabric view recycling. Cancels pending press-out blocks, removes in-flight
+ * animations, and unconditionally restores the animation target's transform/alpha
+ * and the underlay opacity to neutral values.
+ */
+- (void)prepareForRecycle;
+
 /**
  * Updates the underlay layer's corner radii with separate horizontal/vertical
  * components per corner, supporting elliptical inner corners when border widths

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

@@ -117,6 +117,28 @@ - (void)cancelPendingPressOutAnimation
   [_underlayLayer removeAllAnimations];
 }
 
+- (void)prepareForRecycle
+{
+  // Fabric reuses the same wrapper + button instance across mounts. Without
+  // this reset, residual press-in transform/alpha/underlay-opacity from a
+  // prior use leaks into the recycled view, and `updateProps:` won't undo it
+  // when defaults are unchanged between mounts.
+  [self cancelPendingPressOutAnimation];
+
+  RNGHUIView *target = self.animationTarget ?: self;
+  target.layer.transform = CATransform3DIdentity;
+#if !TARGET_OS_OSX
+  target.alpha = 1.0;
+#else
+  target.alphaValue = 1.0;
+#endif
+  _underlayLayer.opacity = 0;
+
+  _isTouchInsideBounds = NO;
+  _suppressSuperControlActionDispatch = NO;
+  _pressInTimestamp = 0;
+}
+
 #if TARGET_OS_OSX
 - (void)viewWillMoveToWindow:(RNGHWindow *)newWindow
 {

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

@@ -34,6 +34,7 @@ @interface RNGestureHandlerButtonComponentView () <RCTRNGestureHandlerButtonView
 
 @implementation RNGestureHandlerButtonComponentView {
   RNGestureHandlerButton *_buttonView;
+  BOOL _needsAnimationStateReset;
 }
 
 #if TARGET_OS_OSX
@@ -67,6 +68,20 @@ - (instancetype)initWithFrame:(CGRect)frame
   return self;
 }
 
+- (void)prepareForRecycle
+{
+  [self.layer removeAnimationForKey:@"transform"];
+  self.layer.transform = CATransform3DIdentity;
+
+  [_buttonView prepareForRecycle];
+
+  // Force the next updateProps: to re-run applyStartAnimationState even if
+  // the new mount's defaults match the previous mount's.
+  _needsAnimationStateReset = YES;
+
+  [super prepareForRecycle];
+}
+
 - (void)mountChildComponentView:(RNGHUIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
   [_buttonView mountChildComponentView:childComponentView index:index];
@@ -143,8 +158,33 @@ - (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetric
 
 - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
 {
+  // super's invalidateLayer (called via finalizeUpdates) unconditionally sets
+  // self.layer.opacity to the React style.opacity, overwriting our
+  // applyStartAnimationState alpha and interrupting in-flight press
+  // animations. Save/restore around super, but only touch what super actually
+  // disturbed — re-adding an unchanged animation resets its progress.
+  float savedOpacity = self.layer.opacity;
+  CAAnimation *savedOpacityAnimation = [self.layer animationForKey:@"opacity"];
+
   [super finalizeUpdates:updateMask];
 
+  BOOL opacityChanged = savedOpacity != self.layer.opacity;
+  BOOL animationChanged = savedOpacityAnimation != [self.layer animationForKey:@"opacity"];
+  if (opacityChanged || animationChanged) {
+    [CATransaction begin];
+    [CATransaction setDisableActions:YES];
+    if (animationChanged) {
+      [self.layer removeAnimationForKey:@"opacity"];
+      if (savedOpacityAnimation) {
+        [self.layer addAnimation:savedOpacityAnimation forKey:@"opacity"];
+      }
+    }
+    if (opacityChanged) {
+      self.layer.opacity = savedOpacity;
+    }
+    [CATransaction commit];
+  }
+
   // Resolve per-corner border radii from props and forward to the button
   // so its underlay CALayer gets the matching shape.
   const auto borderMetrics = _props->resolveBorderMetrics(_layoutMetrics);
@@ -267,11 +307,15 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 {
   const auto &newProps = *std::static_pointer_cast<const RNGestureHandlerButtonProps>(props);
 
-  // Re-apply the idle visual state only on first mount or when one of the default
-  // values actually changed. Doing it on every commit interrupts in-flight press
-  // animations whenever React re-renders the children mid-press.
-  BOOL shouldApplyStartAnimationState = !oldProps;
-  if (oldProps) {
+  // After recycling, treat diffing branches as a fresh mount so values that
+  // survived recycling on _buttonView (e.g. pointerEvents) get re-applied.
+  BOOL treatAsFirstMount = !oldProps || _needsAnimationStateReset;
+  _needsAnimationStateReset = NO;
+
+  // Avoid re-running applyStartAnimationState on every commit — it would
+  // interrupt in-flight press animations during mid-press re-renders.
+  BOOL shouldApplyStartAnimationState = treatAsFirstMount;
+  if (!treatAsFirstMount) {
     const auto &oldButtonProps = *std::static_pointer_cast<const RNGestureHandlerButtonProps>(oldProps);
     shouldApplyStartAnimationState = oldButtonProps.defaultOpacity != newProps.defaultOpacity ||
         oldButtonProps.defaultScale != newProps.defaultScale ||
@@ -303,7 +347,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   // This is necessary because pointerEvents is redefined in the spec,
   // which shadows the base property with a different, incompatible type.
   const auto &newViewProps = static_cast<const ViewProps &>(newProps);
-  if (!oldProps) {
+  if (treatAsFirstMount) {
     _buttonView.pointerEvents = RCTPointerEventsToEnum(newViewProps.pointerEvents);
   } else {
     const auto &oldButtonProps = *std::static_pointer_cast<const RNGestureHandlerButtonProps>(oldProps);

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

@@ -16,7 +16,6 @@
                       toView:(nonnull RNGHUIView *)view
               withActionType:(RNGestureHandlerActionType)actionType
             withHostDetector:(nullable RNGHUIView *)hostDetector;
-- (void)detachHandlerWithTag:(nonnull NSNumber *)handlerTag;
 - (void)detachHandlerWithTag:(nonnull NSNumber *)handlerTag fromHostDetector:(nonnull RNGHUIView *)hostDetectorView;
 - (void)dropHandlerWithTag:(nonnull NSNumber *)handlerTag;
 - (void)dropAllHandlers;

packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx

@@ -134,7 +134,7 @@ describe('[API v3] Components', () => {
       >;
       const { jsEventHandler } = gesture.detectorCallbacks;
 
-      // Fire BEGAN
+      // Fire BEGAN — long press timer starts here
       act(() => {
         jsEventHandler?.({
           oldState: State.UNDETERMINED,
@@ -145,7 +145,7 @@ describe('[API v3] Components', () => {
         });
       });
 
-      // Fire ACTIVE — long press timer starts here (on iOS / non-Android)
+      // Fire ACTIVE
       act(() => {
         jsEventHandler?.({
           oldState: State.BEGAN,

packages/react-native-gesture-handler/src/components/GestureButtons.tsx

@@ -36,37 +36,38 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
     delayLongPress: 600,
   };
 
-  private lastActive: boolean;
+  private lastIsPressed: boolean;
   private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
   private longPressDetected: boolean;
 
   constructor(props: BaseButtonWithRefProps) {
     super(props);
-    this.lastActive = false;
+    this.lastIsPressed = false;
     this.longPressDetected = false;
   }
 
   private handleEvent = ({
     nativeEvent,
   }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => {
     const { state, oldState, pointerInside } = nativeEvent;
-    const active = pointerInside && state === State.ACTIVE;
+    const isPressed =
+      pointerInside && (state === State.BEGAN || state === State.ACTIVE);
 
-    if (active !== this.lastActive && this.props.onActiveStateChange) {
-      this.props.onActiveStateChange(active);
+    if (isPressed !== this.lastIsPressed && this.props.onActiveStateChange) {
+      this.props.onActiveStateChange(isPressed);
     }
 
     if (
       !this.longPressDetected &&
       oldState === State.ACTIVE &&
       state !== State.CANCELLED &&
-      this.lastActive &&
+      this.lastIsPressed &&
       this.props.onPress
     ) {
       this.props.onPress(pointerInside);
     }
 
-    if (!this.lastActive && state === State.BEGAN && pointerInside) {
+    if (!this.lastIsPressed && state === State.BEGAN && pointerInside) {
       this.longPressDetected = false;
       if (this.props.onLongPress) {
         this.longPressTimeout = setTimeout(
@@ -93,7 +94,7 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
       this.longPressTimeout = undefined;
     }
 
-    this.lastActive = active;
+    this.lastIsPressed = isPressed;
   };
 
   private onLongPress = () => {

packages/react-native-gesture-handler/src/components/touchables/GenericTouchable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Component } from 'react';
-import { Animated, Platform } from 'react-native';
+import { Animated } from 'react-native';
 
 import type {
   GestureEvent,
@@ -174,10 +174,7 @@ export default class GenericTouchable extends Component<
       // Need to handle case with external cancellation (e.g. by ScrollView)
       this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
     } else if (
-      // This platform check is an implication of slightly different behavior of handlers on different platform.
-      // And Android "Active" state is achieving on first move of a finger, not on press in.
-      // On iOS event on "Began" is not delivered.
-      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
+      state === State.BEGAN &&
       this.STATE === TOUCHABLE_STATE.UNDETERMINED
     ) {
       // Moving inside requires

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx

@@ -69,16 +69,16 @@ export const BaseButton = (props: BaseButtonProps) => {
   };
 
   const onDeactivate = (e: EndCallbackEventType) => {
+    props.onDeactivate?.(e);
+  };
+
+  const onFinalize = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
     if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
 
-    props.onDeactivate?.(e);
-  };
-
-  const onFinalize = (e: EndCallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;