Fix touchable onPress being dispatched by mistake on scroll on mobile web

https://github.com/necolas/react-native-web/issues/1219\#issuecomment-537724507

Author: brunolemos

packages/components/src/components/common/Link.tsx

@@ -6,7 +6,7 @@ import React, {
   useLayoutEffect,
   useRef,
 } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { GestureResponderEvent, StyleSheet, Text, View } from 'react-native'
 
 import { useHover } from '../../hooks/use-hover'
 import { Browser } from '../../libs/browser'
@@ -185,11 +185,14 @@ export const Link = React.forwardRef<Touchable, LinkProps>((props, ref) => {
         default: {
           ...otherProps,
           onPress: href
-            ? (e: any) => {
+            ? (e: GestureResponderEvent) => {
                 if (onPress) onPress(e)
+                if (e && e.isDefaultPrevented()) return
 
                 if (href.startsWith('http')) Browser.openURL(href)
-                else Linking.openURL(href)
+                else if (!href.startsWith('javascript:')) Linking.openURL(href)
+
+                if (e) e.preventDefault()
               }
             : onPress,
         } as any,
@@ -200,8 +203,11 @@ export const Link = React.forwardRef<Touchable, LinkProps>((props, ref) => {
           onPress: href
             ? (e: any) => {
                 if (onPress) onPress(e)
+                if (e && e.isDefaultPrevented()) return
 
                 if (isDeepLink && href) Linking.openURL(href)
+
+                if (e) e.preventDefault()
               }
             : onPress,
           selectable: true,

packages/components/src/components/common/Touchable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import {
   TouchableHighlightProps,
   TouchableOpacity,
@@ -34,13 +34,16 @@ export const Touchable = React.forwardRef(
       analyticsValue,
       onLongPress: _onLongPress,
       onPress: _onPress,
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
       selectable,
       tooltip,
       ...props
     }: TouchableProps,
     ref,
   ) => {
     const touchableRef = useRef<TouchableOpacity>(null)
+    const pressInPagePointRef = useRef({ x: 0, y: 0 })
 
     useLayoutEffect(() => {
       if (typeof ref === 'function') {
@@ -63,35 +66,79 @@ export const Touchable = React.forwardRef(
       if (!tooltip && node.removeAttribute) node.removeAttribute('title')
     }, [touchableRef.current, tooltip])
 
-    const onPress: typeof _onPress = analyticsLabel
-      ? e => {
+    const onLongPress: typeof _onLongPress =
+      _onLongPress ||
+      (tooltip && Platform.supportsTouch
+        ? () => {
+            alert(tooltip)
+          }
+        : undefined)
+
+    const onPressIn = useCallback<NonNullable<TouchableProps['onPressIn']>>(
+      e => {
+        if (Platform.OS === 'web') {
+          pressInPagePointRef.current = {
+            x: e.nativeEvent.pageX,
+            y: e.nativeEvent.pageY,
+          }
+        }
+
+        if (_onPressIn) _onPressIn(e)
+      },
+      [_onPressIn],
+    )
+
+    const onPressOut = useCallback<NonNullable<TouchableProps['onPressOut']>>(
+      e => {
+        if (_onPressOut) _onPressOut(e)
+
+        if (Platform.OS === 'web') {
+          const [x, y] = [e.nativeEvent.pageX, e.nativeEvent.pageY]
+          if (
+            Math.abs(pressInPagePointRef.current.x - x) > 1 ||
+            Math.abs(pressInPagePointRef.current.y - y) > 1
+          ) {
+            e.preventDefault()
+          }
+        }
+      },
+      [_onPressOut],
+    )
+
+    const onPress = useCallback<NonNullable<TouchableProps['onPress']>>(
+      e => {
+        if (analyticsLabel) {
           analytics.trackEvent(
             analyticsCategory || 'button',
             analyticsAction || 'press',
             analyticsLabel,
             analyticsValue,
           )
-          if (_onPress) _onPress(e)
         }
-      : _onPress
 
-    const onLongPress: typeof _onLongPress =
-      _onLongPress ||
-      (tooltip && Platform.supportsTouch
-        ? () => {
-            alert(tooltip)
-          }
-        : undefined)
+        if (e && e.isDefaultPrevented()) return
+        if (_onPress) _onPress(e)
+      },
+      [
+        _onPress,
+        analyticsCategory || 'button',
+        analyticsAction || 'press',
+        analyticsLabel,
+        analyticsValue,
+      ],
+    )
 
     return (
       <TouchableComponent
         {...props}
         ref={touchableRef}
         data-touchable
         data-touchable-disabled={!!props.disabled}
-        data-touchable-onpress={!!onPress}
+        data-touchable-onpress={!!_onPress}
         onLongPress={onLongPress}
         onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         style={[
           props.disabled && { opacity: 0.5 },
           selectable === true && ({ userSelect: undefined } as any),