[m-bert]

Description

When a Touchable/Pressable is disabled while a press is in progress, the button kept tracking the touch: onPressOut only arrived on release and onPress still fired even though the button was already disabled.

setUserEnabled: now ends the press when it flips to NO. It cancels UIControl tracking and sends UIControlEventTouchCancel to the targets, so the managed handler moves to CANCELLED and JS receives onPressOut without onPress. The press visuals are reset with a zero-duration animation instead of the regular press-out fade: no finger lifted, and a disable usually restyles the button in the same frame, so the fade showed as a brief flash.

Test plan

Add a Touchable that disables itself shortly after onPressIn, e.g. a 700 ms timeout, and hold it past that point:

• onPressOut fires the moment the button gets disabled
• onPress does not fire on release
• the button snaps back to its resting look with no flash
• re-enabling and pressing again works as before

Tested on the following example:

import React, { useCallback, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Touchable } from 'react-native-gesture-handler';

// A button that gets disabled while a press is in progress.
// Press and hold the blue box. After `DISABLE_AFTER_MS` it disables itself.
// Expected: onPressOut fires at that moment, onPress never fires on release,
// and the press animation resets instead of staying stuck (macOS especially).
const DISABLE_AFTER_MS = 700;

export default function EmptyExample() {
  const [disabled, setDisabled] = useState(false);
  const [log, setLog] = useState<string[]>([]);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const push = useCallback((entry: string) => {
    console.log(`RNGH-mid-press: ${entry}`);
    setLog((l) => [...l.slice(-7), entry]);
  }, []);

  const onPressIn = useCallback(() => {
    push('onPressIn');
    timer.current = setTimeout(() => {
      push(`disabled after ${DISABLE_AFTER_MS}ms`);
      setDisabled(true);
    }, DISABLE_AFTER_MS);
  }, [push]);

  const onPressOut = useCallback(() => {
    push('onPressOut');
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = null;
    }
  }, [push]);

  const onPress = useCallback(() => push('onPress'), [push]);

  const reset = useCallback(() => {
    setDisabled(false);
    setLog([]);
  }, []);

  return (
    <View style={styles.container}>
      <Text>
        Hold the box for longer than {DISABLE_AFTER_MS}ms. It disables itself
        mid-press.
      </Text>
      <Touchable
        disabled={disabled}
        onPressIn={onPressIn}
        onPressOut={onPressOut}
        onPress={onPress}
        activeOpacity={0.4}
        style={[styles.box, disabled ? styles.boxDisabled : styles.boxEnabled]}>
        <Text style={styles.boxText}>{disabled ? 'disabled' : 'hold me'}</Text>
      </Touchable>
      <Touchable onPress={reset} style={styles.reset}>
        <Text style={styles.boxText}>re-enable and clear log</Text>
      </Touchable>
      {log.map((entry, i) => (
        <Text key={i} style={styles.log}>
          {entry}
        </Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 12,
  },
  box: {
    height: 100,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxEnabled: {
    backgroundColor: '#5b7bd5',
  },
  boxDisabled: {
    backgroundColor: '#9a9a9a',
  },
  boxText: {
    color: 'white',
    fontWeight: '600',
  },
  reset: {
    height: 44,
    borderRadius: 8,
    backgroundColor: '#3a3a3a',
    justifyContent: 'center',
    alignItems: 'center',
  },
  log: {
    fontVariant: ['tabular-nums'],
  },
});

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 74d6370f-7332-4731-83e5-b57838b17567

📥 Commits

Reviewing files that changed from the base of the PR and between 18b08dd and 4623093.

📒 Files selected for processing (1)

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

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Summary

Summary by CodeRabbit

• Bug Fixes
  • Disabling a button during an active press now properly cancels the interaction and immediately restores its resting visual state.
  • Pending press-out animations are canceled when the button is disabled.

Walkthrough

The button now cancels an active press when disabled on non-macOS platforms. It sends a touch-cancel event, stops tracking, cancels the press-out animation, and immediately restores the resting visual state. Whitespace-only lines were also removed.

Changes

Button press cancellation

Layer / File(s)	Summary
Cancel active press and reset state packages/react-native-gesture-handler/apple/RNGestureHandlerButton.mm	When the button is disabled during tracking, cancelActivePress stops tracking, dispatches UIControlEventTouchCancel, cancels the pending press-out animation, and restores the resting visual state without a transition. Whitespace-only lines were removed from related handlers.

Suggested reviewers: j-piasecki, rileysay

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to 46230

Disabling a button during an active iOS press now cancels the interaction, emits press-out behavior, prevents a later press action, and resets visuals immediately. No concrete merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes the main change: canceling an active iOS button press when the button becomes disabled.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

🟢 Approval recommended

The change is small, platform-gated to iOS, and directly addresses the reported mid-press disable behavior without widening API surface area.

Pull request overview

Fixes an iOS behavior gap in RNGestureHandlerButton where disabling a Touchable/Pressable mid-press would continue UIControl tracking until release, causing onPressOut to be delayed and onPress to still fire. The PR updates the native button so disabling immediately cancels the active press, dispatches a cancel event to targets, and resets press visuals without a fade flash.

Changes:

• Cancel an in-progress press when setUserEnabled: flips to NO (iOS-only), including UIControl tracking cancellation and UIControlEventTouchCancel dispatch.
• Reset pressed visuals instantly (duration 0) on cancel to avoid a “press-out fade” flash during disable/restyle.

File summaries

File	Description
packages/react-native-gesture-handler/apple/RNGestureHandlerButton.mm	Cancels active UIControl tracking when disabling mid-press and snaps visuals back to resting state without the regular fade.

Review details

• Files reviewed: 1/1 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.