[Web] Reset web-exclusive properties when handler is disabled.

example/App.tsx

@@ -52,6 +52,7 @@
 import PagerAndDrawer from './src/basic/pagerAndDrawer';
 import ForceTouch from './src/basic/forcetouch';
 import Fling from './src/basic/fling';
+import WebStylesResetExample from './src/release_tests/webStylesReset';
 
 import ReanimatedSimple from './src/new_api/reanimated';
 import Camera from './src/new_api/camera';
@@ -151,6 +152,7 @@
       { name: 'Swipeable Reanimation', component: SwipeableReanimation },
       { name: 'RectButton (borders)', component: RectButtonBorders },
       { name: 'Gesturized pressable', component: GesturizedPressable },
+      { name: 'Web styles reset', component: WebStylesResetExample },
     ],
   },
   {
@@ -271,7 +273,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );

example/src/release_tests/webStylesReset/index.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  Pressable,
+} from 'react-native-gesture-handler';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const Colors = {
+  enabled: '#32a852',
+  disabled: '#b02525',
+};
+
+const AnimationDuration = 250;
+
+export default function WebStylesResetExample() {
+  const [enabled, setEnabled] = useState(true);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+
+  const colorProgress = useSharedValue(0);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      colorProgress.value,
+      [0, 1],
+      [Colors.enabled, Colors.disabled]
+    );
+
+    return { backgroundColor };
+  });
+
+  const g = Gesture.Pan()
+    .onUpdate((e) => {
+      setX(e.x);
+      setY(e.y);
+    })
+    .enabled(enabled);
+
+  return (
+    <View style={[styles.container, styles.centered]}>
+      <GestureDetector gesture={g} enableContextMenu={false}>
+        <Animated.View style={[styles.box, styles.centered, animatedStyles]}>
+          <Text style={{ fontSize: 32 }}> Lorem Ipsum </Text>
+        </Animated.View>
+      </GestureDetector>
+
+      <Pressable
+        style={[styles.button, styles.centered]}
+        onPress={() => {
+          setEnabled((prev) => !prev);
+
+          colorProgress.value = withTiming(enabled ? 1 : 0, {
+            duration: AnimationDuration,
+          });
+        }}>
+        <Text style={{ fontSize: 16 }}>{enabled ? 'Disable' : 'Enable'}</Text>
+      </Pressable>
+
+      <Text style={{ fontSize: 16 }}>
+        {' '}
+        x: {x}, y: {y}{' '}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  centered: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+
+  button: {
+    width: 250,
+    height: 35,
+    backgroundColor: 'plum',
+    borderRadius: 10,
+    margin: 25,
+  },
+
+  box: {
+    width: 250,
+    height: 250,
+    borderRadius: 25,
+  },
+});

src/web/handlers/GestureHandler.ts

@@ -14,10 +14,10 @@ import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import IGestureHandler from './IGestureHandler';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { PointerType } from '../../PointerType';
+import { GestureHandlerWebDelegate } from '../tools/GestureHandlerWebDelegate';
 
 export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
@@ -41,11 +41,9 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected shouldResetProgress = false;
   protected pointerType: PointerType = PointerType.MOUSE;
 
-  protected delegate: GestureHandlerDelegate<unknown, IGestureHandler>;
+  protected delegate: GestureHandlerWebDelegate;
 
-  public constructor(
-    delegate: GestureHandlerDelegate<unknown, IGestureHandler>
-  ) {
+  public constructor(delegate: GestureHandlerWebDelegate) {
     this.delegate = delegate;
   }
 
@@ -589,6 +587,10 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
 
+    if (this.delegate.wasInitialized()) {
+      this.delegate.onEnabledChange(enabled);
+    }
+
     if (this.config.shouldCancelWhenOutside !== undefined) {
       this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
     }
@@ -761,7 +763,7 @@ export default abstract class GestureHandler implements IGestureHandler {
     return this.config;
   }
 
-  public getDelegate(): GestureHandlerDelegate<unknown, IGestureHandler> {
+  public getDelegate(): GestureHandlerWebDelegate {
     return this.delegate;
   }
 

src/web/tools/GestureHandlerWebDelegate.ts

@@ -16,6 +16,7 @@ import KeyboardEventManager from './KeyboardEventManager';
 export class GestureHandlerWebDelegate
   implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
 {
+  private ready = false;
   private view!: HTMLElement;
   private gestureHandler!: IGestureHandler;
   private eventManagers: EventManager<unknown>[] = [];
@@ -31,19 +32,16 @@ export class GestureHandlerWebDelegate
       );
     }
 
+    this.ready = true;
+
     this.gestureHandler = handler;
     this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
 
     const config = handler.getConfig();
 
-    this.addContextMenuListeners(config);
-
-    this.view.style['userSelect'] = config.userSelect ?? 'none';
-    this.view.style['webkitUserSelect'] = config.userSelect ?? 'none';
-
-    this.view.style['touchAction'] = config.touchAction ?? 'none';
-    // @ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = 'none';
+    this.setUserSelect(config.enabled!); // `enabled` has default value of true if it was not provided
+    this.setTouchAction(config.enabled!);
+    this.setContextMenu(config.enabled!);
 
     this.eventManagers.push(new PointerEventManager(this.view));
     this.eventManagers.push(new TouchEventManager(this.view));
@@ -119,6 +117,47 @@ export class GestureHandlerWebDelegate
     e.stopPropagation();
   }
 
+  private setUserSelect(isHandlerEnabled: boolean) {
+    const { userSelect } = this.gestureHandler.getConfig();
+
+    this.view.style['userSelect'] = isHandlerEnabled
+      ? userSelect ?? 'none'
+      : 'auto';
+
+    this.view.style['webkitUserSelect'] = isHandlerEnabled
+      ? userSelect ?? 'none'
+      : 'auto';
+  }
+
+  private setTouchAction(isHandlerEnabled: boolean) {
+    const { touchAction } = this.gestureHandler.getConfig();
+
+    this.view.style['touchAction'] = isHandlerEnabled
+      ? touchAction ?? 'none'
+      : 'auto';
+
+    // @ts-ignore This one disables default events on Safari
+    this.view.style['WebkitTouchCallout'] = isHandlerEnabled
+      ? touchAction ?? 'none'
+      : 'auto';
+  }
+
+  private setContextMenu(isHandlerEnabled: boolean) {
+    const config = this.gestureHandler.getConfig();
+
+    if (isHandlerEnabled) {
+      this.addContextMenuListeners(config);
+    } else {
+      this.removeContextMenuListeners(config);
+    }
+  }
+
+  onEnabledChange(enabled: boolean): void {
+    this.setUserSelect(enabled);
+    this.setTouchAction(enabled);
+    this.setContextMenu(enabled);
+  }
+
   onBegin(): void {
     // no-op for now
   }
@@ -153,4 +192,8 @@ export class GestureHandlerWebDelegate
       manager.unregisterListeners();
     });
   }
+
+  public wasInitialized() {
+    return this.ready;
+  }
 }