Cancel handlers by NativeViewGestureHandler (#2788)

## Description

This is a follow-up PR to #2787 that is meant to fix scrolling of swipeable elements. It overrides `shouldHandlerBeCancelledBy` method so that **_active_** `NativeViewGestureHandler` that is _**not a button**_, will cancel other handler. 

Keep in mind that on web, if scroll has already started we cannot cancel it by calling `preventDefault`, hence it makes sense to cancel other handlers in that case (but we may want to limit it just to `Pan`).

Fixes #2617

## Test plan

Tested on

- Swipeable example in our example app
- Transformations example with added text to achieve scrolling
<details>
<summary> Modified code from #2617 </summary>

```jsx
import React from 'react';
import { View, Text } from 'react-native';
import { FlatList, GestureHandlerRootView } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';

export default function Home() {
  type ItemProps = {
    item: {
      text: string;
    };
  };

  const data = Array.from({ length: 50 }, (_, i) => ({
    id: i,
    text: `Item ${i}`,
  }));

  const Item = ({ item }: ItemProps) => {
    return (
      <View style={{ margin: 10 }}>
        <Swipeable
          renderRightActions={() => (
            <View
              style={{
                justifyContent: 'center',
              }}>
              <Text style={{ color: 'white', textAlign: 'center' }}>
                Delete
              </Text>
            </View>
          )}>
          <View
            style={{
              height: 50,
              backgroundColor: 'white',
              justifyContent: 'center',
            }}>
            <Text>{item.text}</Text>
          </View>
        </Swipeable>
      </View>
    );
  };

  return (
    <GestureHandlerRootView>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Item item={item} />}
        style={{ maxHeight: 400 }}
      />
    </GestureHandlerRootView>
  );
}

```

</details>

Author: m-bert

src/web/handlers/NativeViewGestureHandler.ts

@@ -28,15 +28,10 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const view = this.delegate.getView() as HTMLElement;
 
     view.style['touchAction'] = 'auto';
-
     //@ts-ignore Turns on defualt touch behavior on Safari
     view.style['WebkitTouchCallout'] = 'auto';
 
-    if (view.hasAttribute('role')) {
-      this.buttonRole = true;
-    } else {
-      this.buttonRole = false;
-    }
+    this.buttonRole = view.getAttribute('role') === 'button';
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
@@ -164,4 +159,8 @@ export default class NativeViewGestureHandler extends GestureHandler {
   public disallowsInterruption(): boolean {
     return this.disallowInterruption;
   }
+
+  public isButton(): boolean {
+    return this.buttonRole;
+  }
 }

src/web/tools/InteractionManager.ts

@@ -1,4 +1,6 @@
+import { State } from '../../State';
 import GestureHandler from '../handlers/GestureHandler';
+import NativeViewGestureHandler from '../handlers/NativeViewGestureHandler';
 import { Config, Handler } from '../interfaces';
 
 export default class InteractionManager {
@@ -102,10 +104,13 @@ export default class InteractionManager {
 
   public shouldHandlerBeCancelledBy(
     _handler: GestureHandler,
-    _otherHandler: GestureHandler
+    otherHandler: GestureHandler
   ): boolean {
-    //TODO: Implement logic
-    return false;
+    return (
+      otherHandler instanceof NativeViewGestureHandler &&
+      otherHandler.getState() === State.ACTIVE &&
+      !otherHandler.isButton()
+    );
   }
 
   public dropRelationsForHandlerWithTag(handlerTag: number): void {