Migration from hammer

example/src/App.tsx

@@ -43,6 +43,10 @@ import DragNDrop from './new_api/drag_n_drop';
 import BetterHorizontalDrawer from './new_api/betterHorizontalDrawer';
 import ManualGestures from './new_api/manualGestures/index';
 
+import { enableExperimentalWebImplementation } from 'react-native-gesture-handler';
+
+enableExperimentalWebImplementation();
+
 interface Example {
   name: string;
   component: React.ComponentType;

example/src/basic/multitap/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, Alert, Text } from 'react-native';
+import { StyleSheet, View, Text } from 'react-native';
 
 import {
   LongPressGestureHandler,
@@ -28,12 +28,14 @@ export class PressBox extends Component<PressBoxProps> {
   };
   private onSingleTap = (event: TapGestureHandlerStateChangeEvent) => {
     if (event.nativeEvent.state === State.ACTIVE) {
-      Alert.alert("I'm touched");
+      // eslint-disable-next-line no-alert
+      window.alert("I'm touched");
     }
   };
   private onDoubleTap = (event: TapGestureHandlerStateChangeEvent) => {
     if (event.nativeEvent.state === State.ACTIVE) {
-      Alert.alert('Double tap, good job!');
+      // eslint-disable-next-line no-alert
+      window.alert('Double tap, good job!');
     }
   };
   render() {

example/src/basic/panResponder/index.tsx

@@ -6,7 +6,6 @@ import {
   I18nManager,
   GestureResponderEvent,
   PanResponderGestureState,
-  Alert,
   GestureResponderHandlers,
 } from 'react-native';
 
@@ -129,7 +128,8 @@ class PanResponderExample extends Component {
 
 export default class Example extends Component {
   onClick = () => {
-    Alert.alert("I'm so touched");
+    // eslint-disable-next-line no-alert
+    window.alert("I'm so touched");
   };
   render() {
     return (

example/src/new_api/camera/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Alert, StyleSheet, useWindowDimensions } from 'react-native';
+import { StyleSheet, useWindowDimensions } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -21,7 +21,7 @@ export default function Home() {
   const [isRecording, setIsRecording] = useState(false);
   const [remainingTimeMs, setRemainingTimeMs] = useState(MAX_VIDEO_DURATION_MS);
   const [recordingIntervalHandle, setRecordingIntervalHandle] =
-    useState<ReturnType<typeof setTimeout> | null>(null);
+    useState<ReturnType<typeof setInterval> | null>(null);
 
   const filtersPanGesture = Gesture.Pan()
     .onUpdate((e) => {
@@ -107,11 +107,13 @@ export default function Home() {
   }
 
   function takePhoto() {
-    Alert.alert('You took a photo');
+    // eslint-disable-next-line no-alert
+    window.alert('You took a photo');
   }
 
   function takeSeries() {
-    Alert.alert('You took a series of photos');
+    // eslint-disable-next-line no-alert
+    window.alert('You took a series of photos');
   }
 
   function startRecording() {
@@ -129,7 +131,8 @@ export default function Home() {
     clearInterval(recordingIntervalHandle!);
     setRemainingTimeMs(MAX_VIDEO_DURATION_MS);
 
-    Alert.alert(
+    // eslint-disable-next-line no-alert
+    window.alert(
       `You took a video (${(MAX_VIDEO_DURATION_MS - remainingTimeMs) / 1000} s)`
     );
   }

example/src/recipes/scaleAndRotate/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { Animated, Platform, StyleSheet } from 'react-native';
 
 import {
   PanGestureHandler,
@@ -135,7 +135,11 @@ export class PinchableBox extends React.Component {
                         ],
                       },
                     ]}
-                    source={require('./swmansion.png')}
+                    source={
+                      Platform.OS === 'web'
+                        ? require('./swm.svg')
+                        : require('./swmansion.png')
+                    }
                   />
                 </Animated.View>
               </PinchGestureHandler>

example/src/release_tests/rows/index.tsx

@@ -5,7 +5,6 @@ import {
   Text,
   View,
   LayoutChangeEvent,
-  Alert,
 } from 'react-native';
 
 import {
@@ -133,7 +132,8 @@ export const InfoButton = (props: BorderlessButtonProps & { name: string }) => (
   <BorderlessButton
     {...props}
     style={styles.infoButton}
-    onPress={() => Alert.alert(`${props.name} info button clicked`)}>
+    // eslint-disable-next-line no-alert
+    onPress={() => window.alert(`${props.name} info button clicked`)}>
     <View style={styles.infoButtonBorders}>
       <Text style={styles.infoButtonText}>i</Text>
     </View>
@@ -149,7 +149,8 @@ export default class Example extends Component {
           <Swipeable enableTrackpadTwoFingerGesture>
             <RectButton
               style={styles.rectButton}
-              onPress={() => Alert.alert('First row clicked')}>
+              // eslint-disable-next-line no-alert
+              onPress={() => window.alert('First row clicked')}>
               <Text style={styles.buttonText}>
                 Swipe this row & observe highlight delay
               </Text>
@@ -164,7 +165,8 @@ export default class Example extends Component {
           <View style={styles.buttonDelimiter} />
           <RectButton
             style={styles.rectButton}
-            onPress={() => Alert.alert('Second row clicked')}>
+            // eslint-disable-next-line no-alert
+            onPress={() => window.alert('Second row clicked')}>
             <Text style={styles.buttonText}>
               Second info icon will block scrolling
             </Text>
@@ -177,7 +179,8 @@ export default class Example extends Component {
           <RectButton
             rippleColor="red"
             style={styles.rectButton}
-            onPress={() => Alert.alert('Third row clicked')}>
+            // eslint-disable-next-line no-alert
+            onPress={() => window.alert('Third row clicked')}>
             <Text style={styles.buttonText}>
               This one will cancel when you drag outside
             </Text>
@@ -192,7 +195,8 @@ export default class Example extends Component {
             <RectButton
               enabled={false}
               style={styles.rectButton}
-              onPress={() => Alert.alert('Fourth row clicked')}>
+              // eslint-disable-next-line no-alert
+              onPress={() => window.alert('Fourth row clicked')}>
               <Text style={styles.buttonText}>
                 This row is &quot;disabled&quot; but you can swipe it
               </Text>
@@ -201,12 +205,14 @@ export default class Example extends Component {
           </Swipeable>
           <LongPressGestureHandler
             onHandlerStateChange={({ nativeEvent }) =>
-              nativeEvent.state === State.ACTIVE && Alert.alert('Long')
+              // eslint-disable-next-line no-alert
+              nativeEvent.state === State.ACTIVE && window.alert('Long')
             }>
             <RectButton
               rippleColor="red"
               style={styles.rectButton}
-              onPress={() => Alert.alert('Fifth row clicked')}>
+              // eslint-disable-next-line no-alert
+              onPress={() => window.alert('Fifth row clicked')}>
               <Text style={styles.buttonText}>
                 Clickable row with long press handler
               </Text>

example/src/showcase/swipeable/AppleStyleSwipeableRow.tsx

@@ -1,12 +1,5 @@
 import React, { Component, PropsWithChildren } from 'react';
-import {
-  Animated,
-  StyleSheet,
-  Text,
-  View,
-  I18nManager,
-  Alert,
-} from 'react-native';
+import { Animated, StyleSheet, Text, View, I18nManager } from 'react-native';
 
 import { RectButton } from 'react-native-gesture-handler';
 
@@ -51,7 +44,8 @@ export default class AppleStyleSwipeableRow extends Component<
     });
     const pressHandler = () => {
       this.close();
-      Alert.alert(text);
+      // eslint-disable-next-line no-alert
+      window.alert(text);
     };
 
     return (

example/src/showcase/swipeable/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, Text, View, I18nManager, Alert } from 'react-native';
+import { StyleSheet, Text, View, I18nManager } from 'react-native';
 
 import { FlatList, RectButton } from 'react-native-gesture-handler';
 
@@ -16,7 +16,8 @@ type DataRow = {
 };
 
 const Row = ({ item }: { item: DataRow }) => (
-  <RectButton style={styles.rectButton} onPress={() => Alert.alert(item.from)}>
+  // eslint-disable-next-line no-alert
+  <RectButton style={styles.rectButton} onPress={() => window.alert(item.from)}>
     <Text style={styles.fromText}>{item.from}</Text>
     <Text numberOfLines={2} style={styles.messageText}>
       {item.message}

src/EnableExperimentalWebImplementation.ts

@@ -0,0 +1,18 @@
+let EXPERIMENTAL_WEB_IMPLEMENTATION = false;
+let getWasCalled = false;
+
+export function enableExperimentalWebImplementation(shouldEnable = true): void {
+  if (getWasCalled) {
+    console.error(
+      'Some parts of this application have already started using old gesture handler implementation. No changes will be applied. You can try enabling new implementation earlier.'
+    );
+    return;
+  }
+
+  EXPERIMENTAL_WEB_IMPLEMENTATION = shouldEnable;
+}
+
+export function isExperimentalWebImplementationEnabled(): boolean {
+  getWasCalled = true;
+  return EXPERIMENTAL_WEB_IMPLEMENTATION;
+}