Separate Reanimated from JS (#3682)

## Description

Currently we have 2 ways of handling events - `Animated` and `JS`/`Reanimated`. Handling both `JS` and `Reanimated` in the same places results in more complex codebase. It also introduces problems with composing gestures. We decided to split those implementations.

## Test plan

<details>
<summary>Tested on the following code:</summary>

```tsx
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 gesture = useGesture('PanGestureHandler', {
    onBegin: (e: unknown) => {
      'worklet';
      console.log('onBegin', e);
    },
    onStart: (e: unknown) => {
      'worklet';
      console.log('onStart', e);
    },
    // onUpdate: event,
    onUpdate: (e: unknown) => {
      'worklet';
      console.log('onUpdate', e);
    },
    onEnd: (e: unknown) => {
      'worklet';
      console.log('onEnd', e);
    },
    onFinalize: (e: unknown) => {
      'worklet';
      console.log('onFinalize', e);
    },
    onTouchesDown: (e: unknown) => {
      'worklet';
      console.log('onTouchesDown', e);
    },
    onTouchesMove: (e: unknown) => {
      'worklet';
      console.log('onTouchesMoved', e);
    },
    onTouchesUp: (e: unknown) => {
      'worklet';
      console.log('onTouchesUp', e);
    },
    onTouchesCancelled: (e: unknown) => {
      'worklet';
      console.log('onTouchesCancelled', e);
    },
  });

  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>
  );
}
```

</details>

Author: m-bert

.eslintrc.json

@@ -71,6 +71,7 @@
     "@eslint-react/no-array-index-key": "warn",
     "@eslint-react/hooks-extra/no-direct-set-state-in-use-effect": "warn",
     "@eslint-react/hooks-extra/prefer-use-state-lazy-initialization": "warn",
+    "@eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks": "warn",
     "no-redeclare": "off",
     "@typescript-eslint/no-redeclare": "error",
     "no-use-before-define": "off",

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/FlingGestureHandler.kt

@@ -6,7 +6,7 @@ import android.os.Looper
 import android.view.MotionEvent
 import android.view.VelocityTracker
 import com.facebook.react.bridge.ReadableMap
-import com.swmansion.gesturehandler.react.eventbuilders.FlingGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.FlingGestureHandlerEventDataBuilder
 
 class FlingGestureHandler : GestureHandler() {
   var numberOfPointersRequired = DEFAULT_NUMBER_OF_TOUCHES_REQUIRED

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -19,8 +19,8 @@ import com.facebook.react.uimanager.PixelUtil
 import com.swmansion.gesturehandler.BuildConfig
 import com.swmansion.gesturehandler.RNSVGHitTester
 import com.swmansion.gesturehandler.react.RNGestureHandlerDetectorView
-import com.swmansion.gesturehandler.react.RNGestureHandlerTouchEvent
-import com.swmansion.gesturehandler.react.eventbuilders.GestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.RNGestureHandlerTouchEvent
+import com.swmansion.gesturehandler.react.events.eventbuilders.GestureHandlerEventDataBuilder
 import java.lang.IllegalStateException
 import java.util.*
 
@@ -80,6 +80,7 @@ open class GestureHandler {
   private val trackedPointers: Array<PointerData?> = Array(MAX_POINTERS_COUNT) { null }
   var needsPointerData = false
   var dispatchesAnimatedEvents = false
+  var dispatchesReanimatedEvents = false
 
   private var hitSlop: FloatArray? = null
   var eventCoalescingKey: Short = 0
@@ -131,6 +132,8 @@ open class GestureHandler {
     isEnabled = DEFAULT_IS_ENABLED
     hitSlop = DEFAULT_HIT_SLOP
     mouseButton = DEFAULT_MOUSE_BUTTON
+    dispatchesAnimatedEvents = DEFAULT_DISPATCHES_ANIMATED_EVENTS
+    dispatchesReanimatedEvents = DEFAULT_DISPATCHES_REANIMATED_EVENTS
   }
 
   fun hasCommonPointers(other: GestureHandler): Boolean {
@@ -886,6 +889,9 @@ open class GestureHandler {
       if (config.hasKey(KEY_DISPATCHES_ANIMATED_EVENTS)) {
         handler.dispatchesAnimatedEvents = config.getBoolean(KEY_DISPATCHES_ANIMATED_EVENTS)
       }
+      if (config.hasKey(KEY_SHOULD_USE_REANIMATED)) {
+        handler.dispatchesReanimatedEvents = config.getBoolean(KEY_SHOULD_USE_REANIMATED)
+      }
       if (config.hasKey(KEY_MANUAL_ACTIVATION)) {
         handler.manualActivation = config.getBoolean(KEY_MANUAL_ACTIVATION)
       }
@@ -901,6 +907,7 @@ open class GestureHandler {
       private const val KEY_ENABLED = "enabled"
       private const val KEY_NEEDS_POINTER_DATA = "needsPointerData"
       private const val KEY_DISPATCHES_ANIMATED_EVENTS = "dispatchesAnimatedEvents"
+      private const val KEY_SHOULD_USE_REANIMATED = "shouldUseReanimated"
       private const val KEY_MANUAL_ACTIVATION = "manualActivation"
       private const val KEY_MOUSE_BUTTON = "mouseButton"
       private const val KEY_HIT_SLOP = "hitSlop"
@@ -973,6 +980,8 @@ open class GestureHandler {
     private const val DEFAULT_IS_ENABLED = true
     private val DEFAULT_HIT_SLOP = null
     private const val DEFAULT_MOUSE_BUTTON = 0
+    private const val DEFAULT_DISPATCHES_ANIMATED_EVENTS = false
+    private const val DEFAULT_DISPATCHES_REANIMATED_EVENTS = false
 
     const val STATE_UNDETERMINED = 0
     const val STATE_FAILED = 1

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/HoverGestureHandler.kt

@@ -8,7 +8,7 @@ import android.view.View
 import android.view.ViewGroup
 import com.swmansion.gesturehandler.react.RNGestureHandlerRootHelper
 import com.swmansion.gesturehandler.react.RNViewConfigurationHelper
-import com.swmansion.gesturehandler.react.eventbuilders.HoverGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.HoverGestureHandlerEventDataBuilder
 
 class HoverGestureHandler : GestureHandler() {
   private var handler: Handler? = null

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/LongPressGestureHandler.kt

@@ -7,7 +7,7 @@ import android.os.SystemClock
 import android.view.MotionEvent
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.PixelUtil
-import com.swmansion.gesturehandler.react.eventbuilders.LongPressGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.LongPressGestureHandlerEventDataBuilder
 
 class LongPressGestureHandler(context: Context) : GestureHandler() {
   var minDurationMs = DEFAULT_MIN_DURATION_MS

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/ManualGestureHandler.kt

@@ -2,7 +2,7 @@ package com.swmansion.gesturehandler.core
 
 import android.content.Context
 import android.view.MotionEvent
-import com.swmansion.gesturehandler.react.eventbuilders.ManualGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.ManualGestureHandlerEventDataBuilder
 
 class ManualGestureHandler : GestureHandler() {
   override fun onHandle(event: MotionEvent, sourceEvent: MotionEvent) {

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/NativeViewGestureHandler.kt

@@ -15,7 +15,7 @@ import com.facebook.react.views.text.ReactTextView
 import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.view.ReactViewGroup
 import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager
-import com.swmansion.gesturehandler.react.eventbuilders.NativeGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.NativeGestureHandlerEventDataBuilder
 import com.swmansion.gesturehandler.react.isScreenReaderOn
 
 class NativeViewGestureHandler : GestureHandler() {

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/PanGestureHandler.kt

@@ -10,7 +10,7 @@ import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.PixelUtil
 import com.swmansion.gesturehandler.core.GestureUtils.getLastPointerX
 import com.swmansion.gesturehandler.core.GestureUtils.getLastPointerY
-import com.swmansion.gesturehandler.react.eventbuilders.PanGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.PanGestureHandlerEventDataBuilder
 
 class PanGestureHandler(context: Context?) : GestureHandler() {
   var velocityX = 0f

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/PinchGestureHandler.kt

@@ -4,7 +4,7 @@ import android.content.Context
 import android.graphics.PointF
 import android.view.MotionEvent
 import android.view.ViewConfiguration
-import com.swmansion.gesturehandler.react.eventbuilders.PinchGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.PinchGestureHandlerEventDataBuilder
 import kotlin.math.abs
 
 class PinchGestureHandler : GestureHandler() {

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/RotationGestureHandler.kt

@@ -4,7 +4,7 @@ import android.content.Context
 import android.graphics.PointF
 import android.view.MotionEvent
 import com.swmansion.gesturehandler.core.RotationGestureDetector.OnRotationGestureListener
-import com.swmansion.gesturehandler.react.eventbuilders.RotationGestureHandlerEventDataBuilder
+import com.swmansion.gesturehandler.react.events.eventbuilders.RotationGestureHandlerEventDataBuilder
 import kotlin.math.abs
 
 class RotationGestureHandler : GestureHandler() {