V2 alpha: Unable to run TapGestureHandler-based animation more than once

Description

Unsure if this is a bug, but when using <TapGestureHandler /> and reanimated v2 (which is amazing!), I’m unable to re-trigger my animation after it finishes. It’s pretty simple - on tap start, set the scale from 1.0 to 0.9. On tap end, reset back to 1.0. It works once, then not again. Having migrated from v1 to v2, I suspect it may be an underlying issue with the clock? I didn’t see anything documentation suggesting that anything other than what’s below is required for triggering this kind of simple animation more than once. The basic random width example works fine.

Code

import React from 'react'
import { View } from 'react-native'
import Animated, {
  useSharedValue,
  withSpring,
  useAnimatedStyle,
  useAnimatedGestureHandler,
} from 'react-native-reanimated';
import { TapGestureHandler } from 'react-native-gesture-handler';

const styles = {
  container: {
    flex: 1,
    backgroundColor: 'rgba(200, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  box: {
    width: 140,
    height: 300,
    backgroundColor: 'rgba(200, 200, 200, 0.6)',
    borderRadius: 26
  }
}

export function ReanimatedExample() {
  const s = useSharedValue(1);

  const tapGestureHandler = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      s.value = withSpring(0.9);
    },
    onEnd: (event, ctx) => {
      s.value = withSpring(1);
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { scale: s.value },
      ],
    };
  });

  return (
    <View style={styles.container}>
      <TapGestureHandler onGestureEvent={tapGestureHandler}>
        <Animated.View style={[
          styles.box,
          animatedStyle
        ]} />
      </TapGestureHandler>
    </View>
  );
}

Package versions

• React: v16.11.0
• React Native: v0.62.2
• React Native Reanimated: v2.0.0-alpha.1
• React Native Gesture Handler: v1.6.0

[terrysahaidak]

After some testing, I can clearly say this is a bug in reanimated’s useAnimatedGestureHandler.

The problem that it uses this condition for “onStart” check:

if (event.oldState === UNDETERMINED && handlers.onStart) {
  handlers.onStart(event, context);
}

But it should use this (at least for tap for sure) instead:

if (event.state === BEGAN && handlers.onStart) {
  handlers.onStart(event, context);
}

I will submit a fix later today.

[drewandre]

@divykj and @terrysahaidak 2.0.0-alpha.3 release seemed to solve the issue I was experiencing above and these changes worked great against the newest alpha release. I’m now able to re-run TapGestureHandler-based animations more than once. Thanks for your help!