Gesture.Tap().maxDuration(...) not working on web

Description

Using maxDuration() on a Tap gesture doesn’t seem to work on web.

Platforms

• iOS
• Android
• Web

Screenshots

Steps To Reproduce

Run the code example below on the web then tap and hold on the red circle.

Expected behavior

For it to behave the same as on native where if the tap is held longer than the maxDuration value, the onTouchesCancelled callback is called followed by the onFinalize callback being called.

Actual behavior

On web, the tap can be held forever without ever being canceled.

Snack or minimal code example

import { Platform, StyleSheet, Text } from 'react-native'
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler'
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated'

export default function App() {
  const isPressed = useSharedValue(false)
  const wasCancelled = useSharedValue(false)
  const wasFinalized = useSharedValue(false)

  const tapGesture = Gesture.Tap()
    .maxDuration(500)
    .onBegin(() => {
      isPressed.value = true
      wasCancelled.value = false
      wasFinalized.value = false
    })
    .onTouchesCancelled(() => {
      wasCancelled.value = true
    })
    .onFinalize(() => {
      isPressed.value = false
      wasFinalized.value = true
    })

  const wasCancelledAnimatedStyles = useAnimatedStyle(() => ({
    opacity: wasCancelled.value ? 1 : 0,
  }))

  const wasFinalizedAnimatedStyles = useAnimatedStyle(() => ({
    opacity: wasFinalized.value ? 1 : 0,
  }))

  const ballAnimatedStyles = useAnimatedStyle(() => ({
    backgroundColor: isPressed.value ? 'yellow' : 'red',
  }))

  return (
    <GestureHandlerRootView style={styles.container}>
      <Text style={styles.text}>
        {Platform.OS === 'web' ? 'Web Version' : 'Native Version'}
      </Text>
      <Animated.View style={wasCancelledAnimatedStyles}>
        <Text style={styles.text}>`onTouchesCancelled()` was called.</Text>
      </Animated.View>
      <Animated.View style={wasFinalizedAnimatedStyles}>
        <Text style={styles.text}>`onFinalize()` was called.</Text>
      </Animated.View>
      <GestureDetector gesture={tapGesture}>
        <Animated.View style={[styles.ball, ballAnimatedStyles]} />
      </GestureDetector>
    </GestureHandlerRootView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    paddingBottom: 16,
    fontSize: 16,
  },
  ball: {
    width: 128,
    height: 128,
    borderRadius: 64,
  },
})

Package versions

• React: 17.0.1
• React Native: 0.64.3
• React Native Gesture Handler: 2.2.1
• React Native Reanimated: 2.3.3

[j-piasecki]

It’s similar situation to https://github.com/software-mansion/react-native-gesture-handler/issues/2063#issuecomment-1131475881. If you want to know whether the gesture ended successfully or was cancelled you can use the second argument of onEnd and onFinalize callbacks, for example:

const tap = Gesture.Tap()
  .onBegin(() => console.log('begin'))
  .onStart(() => console.log('start'))
  .onEnd((_e, success) => console.log('end, successful:', success))
  .onFinalize((_e, success) => console.log('finalize, successful:', success));

[elliotwaite]

Okay, sounds good, I created the new issue here: https://github.com/software-mansion/react-native-gesture-handler/issues/2263