[Web | iOS] Fix Switch component

[m-bert]

Description

This PR aims to align Switch behavior across platforms.

iOS

On iOS only first tap on switch would work, later calls would be suppressed. Turns out that UISwitch triggers only UIControlEventTouchUpInside and UIControlEventValueChanged callbacks - no UIControlEventTouchDown. This was verified on standalone, native iOS app in SwiftUI.

To fix that, I've moved Gesture Handler events flow to UIControlEventValueChanged.

web

On web there's a problem with hierarchy - current implementation assumes that our view is Switch. In reality it is div wrapper that contains input and other stuff that build this component.

Test plan

Tested on the following example

import { useState } from 'react';
import { StyleSheet, Switch } from 'react-native';
import {
  GestureDetector,
  GestureHandlerRootView,
  Switch as GestureSwitch,
  useNativeGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const g = useNativeGesture({
    onBegin: () => {
      console.log('gesture begin');
    },
    onActivate: () => {
      console.log('gesture activate');
    },
    onUpdate: () => {
      console.log('gesture update');
    },
    onDeactivate: () => {
      console.log('gesture deactivate');
    },
    onFinalize: () => {
      console.log('gesture finalize');
    },
  });
  const [enabled, setEnabled] = useState(false);

  return (
    <GestureHandlerRootView style={styles.container}>
      <Switch
        value={enabled}
        onValueChange={setEnabled}
        style={{ backgroundColor: 'red' }}
      />
      <GestureDetector gesture={g}>
        <Switch
          value={enabled}
          onValueChange={setEnabled}
          style={{ backgroundColor: 'green' }}
        />
      </GestureDetector>
      <GestureSwitch
        onBegin={() => {
          console.log('gesture begin');
        }}
        onActivate={() => {
          console.log('gesture activate');
        }}
        onUpdate={() => {
          console.log('gesture update');
        }}
        onDeactivate={() => {
          console.log('gesture deactivate');
        }}
        onFinalize={() => {
          console.log('gesture finalize');
        }}
        value={enabled}
        onValueChange={setEnabled}
        style={{ backgroundColor: 'blue' }}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[m-bert]

Ideally I'd like to keep this as one variable. It doesn't make much sense now, but I'll investigate it later (possibly with our TextInput) and move it to one variable to keep role in one place, not using this "one-hot" tactic.

[Copilot]

Pull request overview

Aligns Switch gesture-handler behavior across iOS and web by adapting platform-specific event/hierarchy differences so RNGH can consistently activate and dispatch its state flow for Switch.

Changes:

• Web: Detect Switch via an input[role="switch"] within the wrapper element and treat it like a “button-like” control for immediate activation.
• iOS: Special-case UISwitch by dispatching RNGH state transitions from a control event callback instead of relying on TouchDown.

Reviewed changes

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

File	Description
packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts	Adds switch-role detection and adjusts activation/move handling to support the web Switch DOM structure.
packages/react-native-gesture-handler/apple/Handlers/RNNativeViewHandler.mm	Adds UISwitch special handling by routing gesture event flow through a new handleSwitch callback.

---

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