manualActivation doesn't work in the Web.

[pedrogarciyalopez]

Description

Please, take a look at the code below. When savedLeft.value reaches 100 or more, stateManager.fail() is called, but onUpdate and onEnd callbacks continue to trigger. This happens on the web, everything works fine in native.

import React from 'react';
import { StyleSheet, View } 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 left = useSharedValue(0);

  const savedLeft = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .manualActivation(true)
    .onTouchesDown((e, stateManager) => {
      if (savedLeft.value >= 100) {
        stateManager.fail();
      } else {
        stateManager.activate();
      }
    })
    .onUpdate(({ translationX }) => {
      left.value = savedLeft.value + translationX;
    })
    .onEnd(() => {
      savedLeft.value = left.value;
    });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [ { translateX: left.value } ]
    }
  })

  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={panGesture}>
        <View style={styles.container}>
          <Animated.View style={[ styles.square, animatedStyle ]}/>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  square: {
    height: 100,
    width: 100,
    backgroundColor: 'red'
  }
})

Steps to reproduce

try it on Snack

Snack or a link to a repository

https://snack.expo.dev/3EoUbugC3qzcu1iXk4-QW

Gesture Handler version

2.15.0

React Native version

0.71.9

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @pedrogarciyalopez! I've just created this PR, could you please check if it helps?

[pedrogarciyalopez]

@m-bert Yes, that helped, thank you! I have another question. The translateX property is being assigned incorrect values in the onUpdate callback, they differ between web and native. Try to place your finger on the screen and swipe left, in native you immediately get negative values for translateX, and the square starts moving left. However, in web, translateX always starts from some positive value, and the square jumps right before starting to move left. This happens only when you use manualActivation. Try comment out lines 10-13, and everything will work the same in both web and native.

Try it on snack: https://snack.expo.dev/7-qYLGoKZ4SRdr4wpfj0Q

[m-bert]

Hi @pedrogarciyalopez! Thanks for confirming that the fix work! I will merge it and close this issue.

Regarding second problem, could you please open new issue and put your repro there?

[m-bert]

Hi again, @pedrogarciyalopez! I think I've found out what causes translation problems. Could you please check if #2871 works? If so, we don't have to open another issue 😅

[pedrogarciyalopez]

@m-bert thank you for the quick help! Now it works as expected. When will it be merged? Which version should I use?

[m-bert]

It is already merged 😅 I'm not 100% sure about release date, but we have plans to do it next week.