[Web] v3 typing and using handler data #3651

akwasniewski · 2025-08-01T12:30:46Z

Description

Changing web implementation to use v3 types with a proper handlerData field.

Test plan

check whether handledData is a proper field of nativeEvent when using NativeDetector.

  const gesture = useGesture('PanGestureHandler', {
    onBegin: (e: any) => {
      console.log('onGestureHandlerEvent', e.nativeEvent.handlerData);
    },
  });

…3-web-typing

m-bert · 2025-08-06T13:14:43Z

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -406,7 +405,6 @@ export default abstract class GestureHandler implements IGestureHandler {
      invokeNullableMethod(onGestureHandlerStateChange, resultEvent);
    }
    if (this.state === State.ACTIVE) {
-      resultEvent.nativeEvent.oldState = undefined;


As far as I remember this was necessary in order to keep compatibility with old API. Right, @j-piasecki?

I think this is the case referred in the comment above as

this may cause trouble in the future

Due to how new events are structures (no oldState field in update) we could either do a weird conditionality check as in 0c9692 or change the new types so they all include 'oldState'. Both solutions seem off, do you maybe have any better ideas?

m-bert · 2025-08-06T16:12:41Z

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

+        oldState: oldState,
+        handlerData: {
+          pointerType: this.pointerType,
+          numberOfPointers: this.tracker.trackedPointersCount,
+          pointerInside: this.delegate.isPointerInBounds(
+            this.tracker.getAbsoluteCoordsAverage()
+          ),
+          ...this.transformNativeEvent(),
+          target: this.viewRef,
+        },
+      } as StateChangeEvent<unknown> | UpdateEvent<unknown>,


Correct me if I'm wrong, but this will break compatibility with V2 as all events will have handlerData field, right?

My bad, should be fixed in 04ec35f

m-bert · 2025-08-08T06:30:13Z

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

+        } as StateChangeEvent<unknown> | UpdateEvent<unknown>,
+        timeStamp: Date.now(),
+      };
+    } else {


You can either use ternary operator for conditional return ?:, or remove this else statement as it doesn't do anything 😅

true hah, fixed in 0c9692

m-bert · 2025-08-14T11:45:06Z

packages/react-native-gesture-handler/src/web/interfaces.ts

  timeStamp: number;
 }

+// We need to leave any for v2 compatibility


Which any?

I managed to fix the underlying issue, thus the comment became obsolete. Removed in 2e47b1ae.

m-bert · 2025-08-14T11:47:18Z

packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts

+  get initialized(): boolean {
+    return this.isInitialized;
+  }


Wasn't it added in other PR?

Yes, but it was no longer necessary so it was removed. I didn't notice it during manual merge so it remained here. Fixed 1cd5eef

m-bert · 2025-08-14T11:53:57Z

packages/react-native-gesture-handler/src/web/interfaces.ts

+type ResultEventType = GestureHandlerEvent<unknown> | GestureHandlerNativeEvent;
+export interface ResultEvent<T extends ResultEventType = ResultEventType>
+  extends Record<string, T | number> {
+  nativeEvent: T;


Correct me if I'm wrong, but GestureHandlerEvent already has nativeEvent field (look here for context). In that case, we will have event type where it is possible to have nativeEvent.nativeEvent

Also I find it quite confusing with this default value, wouldn't it be easier to read if we had just ResultEvent<T> and then pass either GestureHandlerEvent, GestureHandlerNativeEvent or TouchEvent?

Correct me if I'm wrong, but GestureHandlerEvent already has nativeEvent

No, types in GestureHandlerEvent are wrappers on payload types defined here, and only add handlerData. Those types do not have nativeEvent field

Also I find it quite confusing with this default value

Ok, it was inspired by this. I thought that it would simplify the code as we would not have to write <unknown> everywhere. I don't have a strong preference, if you think it's better to add <unknown> i can change it.

m-bert · 2025-08-14T12:01:48Z

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

+  private ensureViewRef(viewRef: any): asserts viewRef is number {
+    if (!viewRef) {
+      throw new Error(tagMessage('Cannot handle event when target is null'));
+    }
+  }


Same here, little deja vu - wasn't it added in other PR?

Similar function, ensurePropsRef was added here

m-bert · 2025-08-14T12:06:14Z

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -369,7 +370,7 @@ export default abstract class GestureHandler implements IGestureHandler {
    const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef =
      this.propsRef!.current;

-    const touchEvent: ResultTouchEvent | undefined =
+    const touchEvent: ResultEvent<TouchEvent> | undefined =


Are you sure that TouchEvent will have correct fields and won't expose something that we do not provide?

Yes, gestureTouchEvent defined here, on which TouchEvent is a union has the same fields as the old nativeTouchEvent defined within web/interfaces.

Now when I think about it we could probably do the same for GestureHandlerNativeEvent, is there a reason why v2 redeclared those types for the web, when we already have similar types in commons?
EDIT: ok, nevermind they have conflicting type

akwasniewski and others added 30 commits July 25, 2025 11:31

basic component

ea8bd73

Merge branch 'next' into @akwasniewski/native-detector-web

32fea07

better useffect triggers:

968112c

added todos

6a69cd7

moved Gesture handler detectors

2b404af

path fix

9c30c1a

extracted host gesture detector

d7dd057

not extending view props

56b93d3

native detector action type

ad8ef64

moved implementation of web handler

0304177

memoisation

4aaf700

detaching handlers

eeddd24

forgot to asign to oldHandlerTags

3242ffd

removed unnecessary types

7147ab3

native detector animated event action type

cc78f74

removed console log

067becb

handling animated events in sendEvents

d782c95

first refactor

86046bd

using native detector animated event

6c34d33

refactor 2

cd793b3

use callback in native detector

580494d

tagMessage

eb98bf4

should prevent drop

af663c8

old api compatibility

42e84b4

not throwing strings

079fdb4

removed unnessary check

cb72d7e

even more refactoring

de98017

throwing when propsref is null

e193ff4

helper action type functions

2ba053a

separate paths on touch events

8ab666b

akwasniewski and others added 8 commits August 5, 2025 15:02

Merge branch 'next' into @akwasniewski/native-detector-web

dceba3b

Merge branch '@akwasniewski/native-detector-web' into @akwasniewski/v…

14190fc

…3-web-typing

removed usecallback

b738254

private isInitialized

1f62d5c

removed type predicate

4d916f5

removed unnecessary type indications

0b16cdb

typing wherever possible

8579092

Merge branch '@akwasniewski/native-detector-web' into @akwasniewski/v…

089466e

…3-web-typing

akwasniewski marked this pull request as ready for review August 6, 2025 09:24

m-bert reviewed Aug 6, 2025

View reviewed changes

akwasniewski marked this pull request as draft August 7, 2025 06:25

akwasniewski added 2 commits August 8, 2025 07:47

v2 compatibility

04ec35f

old state

5837159

akwasniewski force-pushed the @akwasniewski/v3-web-typing branch from 91aad1d to 5837159 Compare August 8, 2025 06:18

m-bert reviewed Aug 8, 2025

View reviewed changes

safe old state

0c96928

Base automatically changed from @akwasniewski/native-detector-web to next August 8, 2025 08:57

akwasniewski and others added 6 commits August 8, 2025 12:03

merge with parent branch

4d6d1f2

better oldState handling

6391704

specific transform event functions

9e6fa97

Merge branch 'next' into @akwasniewski/v3-web-typing

323acf6

Merge branch 'next' into @akwasniewski/v3-web-typing

3336d48

Merge branch 'next' into @akwasniewski/v3-web-typing

4a75f5f

akwasniewski marked this pull request as ready for review August 12, 2025 09:53

akwasniewski requested a review from m-bert August 12, 2025 10:38

fixing v2?

a5148ac

m-bert reviewed Aug 14, 2025

View reviewed changes

akwasniewski added 2 commits August 14, 2025 14:22

remove merge remnants

1cd5eef

removed obsolete comment

2e47b1a

Uh oh!

[Web] v3 typing and using handler data #3651

Are you sure you want to change the base?

[Web] v3 typing and using handler data #3651

Uh oh!

Conversation

akwasniewski commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akwasniewski Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akwasniewski Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akwasniewski Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akwasniewski Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

akwasniewski commented Aug 1, 2025 •

edited

Loading

akwasniewski Aug 8, 2025 •

edited

Loading

akwasniewski Aug 14, 2025 •

edited

Loading

akwasniewski Aug 14, 2025 •

edited

Loading

akwasniewski Aug 14, 2025 •

edited

Loading