GestureStateManager seems to not be working for manual gestures

[Onzeka]

Description

I am not able to change any manual gesture event state with gestureStateManager. I checked the function is called correctly but does not seem to have any effect.

for example if we take the example of the documentation

we have this

import { Text, View, StyleSheet } from 'react-native';

import {GestureHandlerRootView,Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated,{useSharedValue,useAnimatedStyle,runOnJS} from 'react-native-reanimated';

export default function App() {
  
const trackedPointers = [];
    const active = useSharedValue(false);
    

  for (let i = 0; i < 12; i++) {
    trackedPointers[i] =useSharedValue({
        visible: false,
        x: 0,
        y: 0,
      });
  }

  const gesture = Gesture.Manual().onTouchesDown((e, manager) => {
    for (const touch of e.changedTouches) {
      trackedPointers[touch.id].value = {
        visible: true,
        x: touch.x,
        y: touch.y,
      };
    }
    
    if (e.numberOfTouches >= 2) {
      manager.activate();
    }
  }).onTouchesMove((e, _manager) => {
    for (const touch of e.changedTouches) {
      trackedPointers[touch.id].value = {
        visible: true,
        x: touch.x,
        y: touch.y,
      };
    }
  }).onTouchesUp((e, manager) => {
    for (const touch of e.changedTouches) {
      trackedPointers[touch.id].value = {
        visible: false,
        x: touch.x,
        y: touch.y,
      };
    }

    if (e.numberOfTouches === 0) {
      manager.end();
    }
  })
  .onStart(() => {
    active.value = true;
  })
  .onEnd(() => {
    active.value = false;
  });


  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
    <GestureDetector gesture={gesture}>
      <Animated.View style={{ flex: 1 }}>
        {trackedPointers.map((pointer, index) => (
          <PointerElement pointer={pointer} active={active} key={index} />
        ))}
      </Animated.View>
    </GestureDetector>
    </GestureHandlerRootView>
  );
}

function PointerElement(props) {
    const animatedStyle = useAnimatedStyle(() => ({
      transform: [
        { translateX: props.pointer.value.x },
        { translateY: props.pointer.value.y },
        {
          scale:
            (props.pointer.value.visible ? 1 : 0) *
            (props.active.value ? 1.3 : 1),
        },
      ],
      backgroundColor: props.active.value ? 'red' : 'blue',
    }));
  
    return <Animated.View style={[styles.pointer, animatedStyle]} />;
  }


  const styles = StyleSheet.create({
    pointer: {
      width: 60,
      height: 60,
      borderRadius: 30,
      backgroundColor: 'red',
      position: 'absolute',
      marginStart: -30,
      marginTop: -30,
    },
  });

and on the device we have :

If I am not mistaken multiple touch on the screen should trigger a call to manager.activate and then the onStart call should set the active shared value to true so that the blue dots would be red. I checked and indeed the event stay in the BEGIN state and never switch to ACTIVE. It might be a reanimated issue though but I am not sure how their setGestureState and _setGestureState work.

Steps to reproduce

Use GestureStateManager.anyfunc in a Manual gesture the state will not be changed

Snack or a link to a repository

https://snack.expo.dev/@onzeka/eager-pudding?platform=android

Gesture Handler version

2.5.0

React Native version

0.69.5

Platforms

Android, iOS

JavaScript runtime

No response

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

No response

Device

No response

Device model

No response

Acknowledgements

Yes

[j-piasecki]

Hi! This seems to be more of an issue with Expo Go rather than Gesture Handler or Reanimated, as it works correctly when I ejected the project.

[Onzeka]

Oh okok :( thank you !