State Manager (#3880)

## Description

Implements V3 State Manager, to manually manage gestures.

## Test plan

Tested on the following example, the long press should activate
instantely, while the minDuration is extremely big.
<details>

```ts
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView, GestureDetector, useLongPressGesture, GestureStateManager } from 'react-native-gesture-handler';

export default function TwoPressables() {
  const longPress = useLongPressGesture({
    onTouchesDown: (e) => {
      'worklet';
      console.log("touches down")
      GestureStateManager.begin(e.handlerTag)
      GestureStateManager.activate(e.handlerTag)
    },
    onActivate: () => {
      'worklet';
      console.log("long pressed")

    },
    minDuration: 100000000,
    disableReanimated: true
  })
  return (
    <GestureHandlerRootView>
      <View style={styles.root}>
        <GestureDetector gesture={longPress}>
          <View style={styles.outer}>
            <Text style={styles.label}>Outer</Text>
          </View>
        </GestureDetector>
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f7f7',
  },
  outer: {
    padding: 20,
    backgroundColor: '#ddd',
    borderRadius: 12,
  },
  label: {
    fontSize: 18,
    marginBottom: 10,
  },
});
```
</details>

Author: akwasniewski

apps/basic-example/tsconfig.json

@@ -17,7 +17,8 @@
         "../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
       ]
     },
-    "types": ["jest"]
+    "types": ["jest","../../packages/react-native-gesture-handler/src/global.d.ts"]
+
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

apps/common-app/tsconfig.json

@@ -18,7 +18,8 @@
       "react-native-gesture-handler/jest-utils": [
         "../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
       ]
-    }
+    },
+    "types": ["../../packages/react-native-gesture-handler/src/global.d.ts"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "index.ts"]
 }

apps/expo-example/tsconfig.json

@@ -17,7 +17,9 @@
       "react-native-gesture-handler/jest-utils": [
         "../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
       ]
-    }
+    },
+    "types": ["../../packages/react-native-gesture-handler/src/global.d.ts"]
+
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "App.tsx"],
   "exclude": ["metro.config.js", "android", "ios", ".bundle", "node_modules"]

apps/macos-example/tsconfig.json

@@ -17,7 +17,9 @@
       "react-native-gesture-handler/jest-utils": [
         "../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
       ]
-    }
+    },
+    "types": ["../../packages/react-native-gesture-handler/src/global.d.ts"]
+
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "index.ts"],
   "exclude": ["metro.config.js", "macos", ".bundle", "node_modules"]

packages/react-native-gesture-handler/src/global.d.ts

@@ -0,0 +1,13 @@
+export {};
+
+declare global {
+  // eslint-disable-next-line no-var
+  var _setGestureStateSync:
+    | ((handlerTag: number, state: number) => void)
+    | undefined;
+
+  // eslint-disable-next-line no-var
+  var _setGestureStateAsync:
+    | ((handlerTag: number, state: number) => void)
+    | undefined;
+}

packages/react-native-gesture-handler/src/handlers/gestures/gestureStateManager.ts

@@ -10,12 +10,6 @@ export interface GestureStateManagerType {
   handlerTag: number;
 }
 
-// Declare methods to keep the TS happy
-declare const globalThis: {
-  _setGestureStateSync?: (handlerTag: number, state: State) => void;
-  _setGestureStateAsync?: (handlerTag: number, state: State) => void;
-};
-
 const wrappedSetGestureState = (handlerTag: number, state: State) => {
   'worklet';
 

packages/react-native-gesture-handler/src/index.ts

@@ -68,7 +68,7 @@ export type {
   SimultaneousGestureType as LegacySimultaneousGesture,
   ExclusiveGestureType as LegacyExclusiveGesture,
 } from './handlers/gestures/gestureComposition';
-export type { GestureStateManagerType as GestureStateManager } from './handlers/gestures/gestureStateManager';
+export type { GestureStateManagerType as LegacyGestureStateManager } from './handlers/gestures/gestureStateManager';
 export { NativeViewGestureHandler } from './handlers/NativeViewGestureHandler';
 export type {
   LegacyRawButtonProps,

packages/react-native-gesture-handler/src/v3/gestureStateManager.ts

@@ -0,0 +1,43 @@
+import { State } from '../State';
+import { tagMessage } from '../utils';
+
+export type GestureStateManagerType = {
+  begin(handlerTag: number): void;
+  activate(handlerTag: number): void;
+  fail(handlerTag: number): void;
+  end(handlerTag: number): void;
+};
+
+const setGestureState = (handlerTag: number, state: State) => {
+  'worklet';
+
+  if (globalThis._setGestureStateSync) {
+    globalThis._setGestureStateSync(handlerTag, state);
+  } else if (globalThis._setGestureStateAsync) {
+    globalThis._setGestureStateAsync(handlerTag, state);
+  } else {
+    throw new Error(tagMessage('Failed to set gesture state'));
+  }
+};
+
+export const GestureStateManager: GestureStateManagerType = {
+  begin(handlerTag: number) {
+    'worklet';
+    setGestureState(handlerTag, State.BEGAN);
+  },
+
+  activate(handlerTag: number) {
+    'worklet';
+    setGestureState(handlerTag, State.ACTIVE);
+  },
+
+  fail(handlerTag: number) {
+    'worklet';
+    setGestureState(handlerTag, State.FAILED);
+  },
+
+  end(handlerTag: number) {
+    'worklet';
+    setGestureState(handlerTag, State.END);
+  },
+};

packages/react-native-gesture-handler/src/v3/gestureStateManager.web.ts

@@ -0,0 +1,32 @@
+import { State } from '../State';
+import NodeManager from '../web/tools/NodeManager';
+import { GestureStateManagerType } from './gestureStateManager';
+
+export const GestureStateManager: GestureStateManagerType = {
+  begin(handlerTag: number): void {
+    'worklet';
+    NodeManager.getHandler(handlerTag).begin();
+  },
+
+  activate(handlerTag: number): void {
+    'worklet';
+    const handler = NodeManager.getHandler(handlerTag);
+    // Force going from UNDETERMINED to ACTIVE through BEGAN to preserve
+    // the correct state transition flow.
+    if (handler.state === State.UNDETERMINED) {
+      handler.begin();
+    }
+
+    handler.activate(true);
+  },
+
+  fail(handlerTag: number): void {
+    'worklet';
+    NodeManager.getHandler(handlerTag).fail();
+  },
+
+  end(handlerTag: number): void {
+    'worklet';
+    NodeManager.getHandler(handlerTag).end();
+  },
+};

packages/react-native-gesture-handler/src/v3/index.ts

@@ -72,3 +72,5 @@ export {
 } from './components';
 
 export type { ComposedGesture } from './types';
+
+export { GestureStateManager } from './gestureStateManager';