[Web] Don't cancel buttons when pointer moves inside

[j-piasecki]

Description

Prevents the buttons from being canceled when the pointer is moved inside the button.

Note that this only works with a mouse, since the browser will cancel any events with no touchAction during any drag gesture.

Test plan

Before	After
Screen.Recording.2026-04-20.at.11.55.13.mov	Screen.Recording.2026-04-20.at.11.54.55.mov

Expand

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

export default function EmptyExample() {
  const [isActive, setIsActive] = useState(false);

  return (
    <View style={styles.container}>
      <Touchable
        style={[styles.button, isActive && styles.buttonActive]}
        onPress={() => console.log('pressed')}
        onPressIn={() => setIsActive(true)}
        onPressOut={() => setIsActive(false)}
        activeScale={1.2}>
        <Text style={styles.label}>{isActive ? 'Highlighted' : 'Press me'}</Text>
      </Touchable>
      <Text style={styles.hint}>
        Press the button, then slowly drag your pointer away from it.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    gap: 24,
  },
  button: {
    backgroundColor: '#ddd',
    paddingHorizontal: 32,
    paddingVertical: 16,
    borderRadius: 8,
  },
  buttonActive: {
    backgroundColor: '#f97316',
  },
  label: {
    fontSize: 20,
    fontWeight: '600',
  },
  hint: {
    textAlign: 'center',
    opacity: 0.6,
    fontSize: 14,
  },
});

[Copilot]

Pull request overview

This PR fixes web button/touchable cancellation behavior by ensuring button-role elements don’t get cancelled just due to pointer movement within bounds, while still cancelling correctly when the pointer actually leaves the element (even when pointer capture isn’t used).

Changes:

• Stop cancelling role="button" gestures on movement distance threshold; only non-button views use movement to activate.
• Add a pointerleave-based fallback to trigger “pressed pointer left view” logic when pointermove no longer fires due to lack of pointer capture (e.g. role="button").

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/react-native-gesture-handler/src/web/tools/PointerEventManager.ts	Uses DOM pointerleave to reliably run pressed-pointer leave handling when pointer capture isn’t used.
packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts	Removes movement-distance-based cancellation for button-role views so moving inside the button doesn’t cancel the press.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.