[Web | iOS] Fix Switch component (#4112)

## 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

<details>
<summary>Tested on the following example</summary>

```tsx
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',
  },
});
```

</details>

Author: m-bert

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

@@ -139,22 +139,33 @@ - (void)bindToView:(UIView *)view
   // for properties like `disallowInterruption` to work.
   if ([view isKindOfClass:[UIControl class]]) {
     UIControl *control = (UIControl *)view;
-    [control addTarget:self action:@selector(handleTouchDown:forEvent:) forControlEvents:UIControlEventTouchDown];
-    [control addTarget:self
-                  action:@selector(handleTouchUpOutside:forEvent:)
-        forControlEvents:UIControlEventTouchUpOutside];
-    [control addTarget:self
-                  action:@selector(handleTouchUpInside:forEvent:)
-        forControlEvents:UIControlEventTouchUpInside];
-    [control addTarget:self action:@selector(handleDragExit:forEvent:) forControlEvents:UIControlEventTouchDragExit];
-    [control addTarget:self
-                  action:@selector(handleDragInside:forEvent:)
-        forControlEvents:UIControlEventTouchDragInside];
-    [control addTarget:self
-                  action:@selector(handleDragOutside:forEvent:)
-        forControlEvents:UIControlEventTouchDragOutside];
-    [control addTarget:self action:@selector(handleDragEnter:forEvent:) forControlEvents:UIControlEventTouchDragEnter];
-    [control addTarget:self action:@selector(handleTouchCancel:forEvent:) forControlEvents:UIControlEventTouchCancel];
+
+    // Pressing UISwitch triggers only touchUp and valueChanged callbacks. In order to align its behavior
+    // with other UIControls, we have to dispatch full Gesture Handler events flow in one callback, as
+    // touchesDown is not executed.
+    if ([view isKindOfClass:[UISwitch class]]) {
+      _pointerType = RNGestureHandlerTouch;
+      [control addTarget:self action:@selector(handleSwitch:) forControlEvents:UIControlEventValueChanged];
+    } else {
+      [control addTarget:self action:@selector(handleTouchDown:forEvent:) forControlEvents:UIControlEventTouchDown];
+      [control addTarget:self
+                    action:@selector(handleTouchUpOutside:forEvent:)
+          forControlEvents:UIControlEventTouchUpOutside];
+      [control addTarget:self
+                    action:@selector(handleTouchUpInside:forEvent:)
+          forControlEvents:UIControlEventTouchUpInside];
+      [control addTarget:self action:@selector(handleDragExit:forEvent:) forControlEvents:UIControlEventTouchDragExit];
+      [control addTarget:self
+                    action:@selector(handleDragInside:forEvent:)
+          forControlEvents:UIControlEventTouchDragInside];
+      [control addTarget:self
+                    action:@selector(handleDragOutside:forEvent:)
+          forControlEvents:UIControlEventTouchDragOutside];
+      [control addTarget:self
+                    action:@selector(handleDragEnter:forEvent:)
+          forControlEvents:UIControlEventTouchDragEnter];
+      [control addTarget:self action:@selector(handleTouchCancel:forEvent:) forControlEvents:UIControlEventTouchCancel];
+    }
   } else {
     [super bindToView:view];
   }
@@ -191,6 +202,27 @@ - (void)sendActiveStateEventIfChangedForView:(UIView *)sender extraData:(RNGestu
   [self sendEventsInState:RNGestureHandlerStateActive forViewWithTag:sender.reactTag withExtraData:extraData];
 }
 
+- (void)handleSwitch:(UIView *)sender
+{
+  [self sendEventsInState:RNGestureHandlerStateBegan
+           forViewWithTag:sender.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
+  [self sendEventsInState:RNGestureHandlerStateActive
+           forViewWithTag:sender.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
+  [self sendEventsInState:RNGestureHandlerStateEnd
+           forViewWithTag:sender.reactTag
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
+
+  [self reset];
+}
+
 - (void)handleTouchDown:(UIView *)sender forEvent:(UIEvent *)event
 {
   [self setCurrentPointerTypeForEvent:event];

packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts

@@ -14,6 +14,7 @@ import type IGestureHandler from './IGestureHandler';
 
 export default class NativeViewGestureHandler extends GestureHandler {
   private buttonRole!: boolean;
+  private switchRole!: boolean;
 
   // TODO: Implement logic for activation on start properly
   private shouldActivateOnStart = false;
@@ -49,6 +50,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
     this.restoreViewStyles(view);
     this.buttonRole = view.getAttribute('role') === 'button';
+    this.switchRole = view.querySelector('input[role="switch"]') !== null;
   }
 
   public override updateGestureConfig(config: Config): void {
@@ -101,7 +103,11 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const view = this.delegate.view as HTMLElement;
     const isRNGHText = view.hasAttribute('rnghtext');
 
-    if ((this.buttonRole && this.shouldActivateOnStart) || isRNGHText) {
+    if (
+      (this.buttonRole && this.shouldActivateOnStart) ||
+      this.switchRole ||
+      isRNGHText
+    ) {
       this.activate();
     }
   }
@@ -114,11 +120,11 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const dy = this.startY - lastCoords.y;
     const distSq = dx * dx + dy * dy;
 
-    if (
-      distSq >= this.minDistSq &&
-      !this.buttonRole &&
-      this.state === State.BEGAN
-    ) {
+    if (this.switchRole || this.buttonRole) {
+      return;
+    }
+
+    if (distSq >= this.minDistSq && this.state === State.BEGAN) {
       this.activate();
     }
   }