Remove AnimatedEvent action type from NativeDetector

[m-bert]

Description

We came to a conclusion that current event handling may conflict with gesture relations, such as simultaneous when one of the gestures is using Animated. This PR removes AnimatedEvent action type from NativeDetector and adds flag to GestureHandler, which represents if handler should send events for Animated.

Status

• Android ✅

• iOS ✅

Test plan

Test pan1, pan2 and gesture from the code below.

Note

Since simultaneous relation is not yet implemented, only first pan works when gesture is used. On Android you can solve that ba commenting out otherHandler.cancel() in makeActive function (this line)

Tested on the following code:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const pan1 = useGesture('PanGestureHandler', {
    onUpdate: (e: any) => {
      console.log('Pan1 update:', e);
    },
  });

  const pan2 = useGesture('PanGestureHandler', {
    onUpdate: event,
    dispatchesAnimatedEvents: true,
  });

  const gesture = {
    tag: [pan1.tag, pan2.tag],
    gestureEvents: {
      onGestureHandlerStateChange: (e) => {
        pan1.gestureEvents.onGestureHandlerStateChange(e);
        pan2.gestureEvents.onGestureHandlerStateChange(e);
      },
      onGestureHandlerEvent: pan1.gestureEvents.onGestureHandlerEvent,
      onGestureHandlerAnimatedEvent:
        pan2.gestureEvents.onGestureHandlerAnimatedEvent,
      onGestureHandlerTouchEvent: (e) => {
        pan1.gestureEvents.onGestureHandlerTouchEvent(e);
        pan2.gestureEvents.onGestureHandlerTouchEvent(e);
      },
    },
    dispatchesAnimatedEvents: true, // Assuming this is always true for this example
  };

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: value }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

[j-piasecki]

Is action type needed now in the events?

[m-bert]

Seems like it is not. Removed in 9cc3073

[j-piasecki]

Suggested change

	withAnimatedEvent:(BOOL)useAnimatedEvent
	forAnimated:(BOOL)forAnimated

[m-bert]

Ok, looks better. Done in 118467e

[j-piasecki]

Suggested change

	withAnimatedEvent:(BOOL)useAnimatedEvent
	forAnimated:(BOOL)forAnimated

[m-bert]

Also done in 118467e