State Manager

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';

packages/react-native-gesture-handler/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "lib/typescript",
     "paths": {
       "react-native-gesture-handler": ["./src"]
-    }
+    }, "types": ["./src/global.d.ts", "jest"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "jestSetup.js"]
 }