From d7fda2ff526825c6bcdb76ca47d85474040da2a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 23 Apr 2026 17:07:51 +0200 Subject: [PATCH 1/3] Store type in variable --- .../web/handlers/NativeViewGestureHandler.ts | 38 ++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts index 56d53c9d2b..b410480a83 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts @@ -12,9 +12,15 @@ import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate'; import GestureHandler from './GestureHandler'; import type IGestureHandler from './IGestureHandler'; +enum ControlType { + Button, + Switch, + TextInput, + Other, +} + export default class NativeViewGestureHandler extends GestureHandler { - private buttonRole!: boolean; - private switchRole!: boolean; + private controlType!: ControlType; // TODO: Implement logic for activation on start properly private shouldActivateOnStart = false; @@ -49,8 +55,16 @@ export default class NativeViewGestureHandler extends GestureHandler { const view = this.delegate.view as HTMLElement; this.restoreViewStyles(view); - this.buttonRole = view.getAttribute('role') === 'button'; - this.switchRole = view.querySelector('input[role="switch"]') !== null; + + if (view.getAttribute('role') === 'button') { + this.controlType = ControlType.Button; + } else if (view.querySelector('input[role="switch"]') !== null) { + this.controlType = ControlType.Switch; + } else if (view.matches('input:not([role]), textarea')) { + this.controlType = ControlType.TextInput; + } else { + this.controlType = ControlType.Other; + } } public override updateGestureConfig(config: Config): void { @@ -104,8 +118,8 @@ export default class NativeViewGestureHandler extends GestureHandler { const isRNGHText = view.hasAttribute('rnghtext'); if ( - (this.buttonRole && this.shouldActivateOnStart) || - this.switchRole || + (this.controlType === ControlType.Button && this.shouldActivateOnStart) || + this.controlType === ControlType.Switch || isRNGHText ) { this.activate(); @@ -120,7 +134,10 @@ export default class NativeViewGestureHandler extends GestureHandler { const dy = this.startY - lastCoords.y; const distSq = dx * dx + dy * dy; - if (this.switchRole || this.buttonRole) { + if ( + this.controlType === ControlType.Switch || + this.controlType === ControlType.Button + ) { return; } @@ -149,7 +166,10 @@ export default class NativeViewGestureHandler extends GestureHandler { this.tracker.removeFromTracker(event.pointerId); if (this.tracker.trackedPointersCount === 0) { - if (this.buttonRole && this.state === State.BEGAN) { + if ( + this.controlType === ControlType.Button && + this.state === State.BEGAN + ) { this.activate(); } @@ -204,7 +224,7 @@ export default class NativeViewGestureHandler extends GestureHandler { } public isButton(): boolean { - return this.buttonRole; + return this.controlType === ControlType.Button; } protected override transformNativeEvent(): Record { From a4183e0f354f34fe65ff4a5cd5ae5730867ca4d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 24 Apr 2026 12:21:20 +0200 Subject: [PATCH 2/3] Activate immediately --- .../src/web/handlers/NativeViewGestureHandler.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts index b410480a83..b53204b755 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts @@ -120,6 +120,7 @@ export default class NativeViewGestureHandler extends GestureHandler { if ( (this.controlType === ControlType.Button && this.shouldActivateOnStart) || this.controlType === ControlType.Switch || + this.controlType === ControlType.TextInput || isRNGHText ) { this.activate(); From 31904ed264490e153f51af5660f74a6ef9dedcac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 24 Apr 2026 13:08:26 +0200 Subject: [PATCH 3/3] Check only text inputs --- .../src/web/handlers/NativeViewGestureHandler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts index b53204b755..5d0b6ea90a 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts @@ -60,7 +60,7 @@ export default class NativeViewGestureHandler extends GestureHandler { this.controlType = ControlType.Button; } else if (view.querySelector('input[role="switch"]') !== null) { this.controlType = ControlType.Switch; - } else if (view.matches('input:not([role]), textarea')) { + } else if (view.matches('input:not([role]):not([type]), textarea')) { this.controlType = ControlType.TextInput; } else { this.controlType = ControlType.Other;