[Web] Native detector component #3637

akwasniewski · 2025-07-25T09:38:16Z

Description

This PR adds a web version of NativeDetector component following its IOS/android implementations.

Test plan

copy all react source files from basic-example to expo-example
add a console log, in the NativeDetector pan Gesture
check whether the gesture is properly recognised

packages/react-native-gesture-handler/src/v3/NativeDetector.web.tsx

packages/react-native-gesture-handler/src/web/detectors/GestureHandlerDetector.tsx

packages/react-native-gesture-handler/src/v3/NativeDetector.web.tsx

packages/react-native-gesture-handler/src/web/detectors/GestureHandlerDetector.tsx

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx

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

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx

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

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

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

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

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

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

…dlerWebDelegate.ts Co-authored-by: Jakub Piasecki <[email protected]>

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

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx

packages/react-native-gesture-handler/src/handlers/createHandler.tsx

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

m-bert

I can see that you updated some handlers implementations, what about Pan, `Tap, etc. don't they have to be updated too?

m-bert · 2025-08-05T12:31:44Z

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

@@ -21,8 +22,8 @@ interface DefaultViewStyles {
 export class GestureHandlerWebDelegate
  implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
 {
-  private isInitialized = false;
-  private _view!: HTMLElement;
+  public isInitialized = false;


I don't like making this public, can we make a getter to it (preferably with name better than getIsInitialized)

Made private with a getter called initialized in 1f62d5c

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

akwasniewski · 2025-08-05T12:50:36Z

I can see that you updated some handlers implementations, what about Pan, `Tap, etc. don't they have to be updated too?

I only needed to update those handlers than override the init function, because we pass additional props. Those using parent implementation don't need to be directly updated

j-piasecki · 2025-08-06T08:20:19Z

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

+    if (this.delegate.initialized) {
+      // this function is called on handler creation, which happens before initializing delegate
+      const view = this.delegate.view as HTMLElement;
+      this.restoreViewStyles(view);
+    }


Doesn't this break the native gesture somewhat? If the view isn't set when init is called, restoreViewStyles wouldn't be called at all, no?

Without this change the native gesture is broken, as it tries to work on a null view and gets errors. restoreViewStyles only changes view, thus there is not point in calling it then. When handler gets attached the view gets set and the init function called, thus restoreViewStyles is then called properly.

basic component

ea8bd73

akwasniewski added the Platform: Web label Jul 25, 2025

akwasniewski requested a review from m-bert July 25, 2025 09:38

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

32fea07

m-bert reviewed Jul 25, 2025

View reviewed changes

m-bert requested a review from j-piasecki July 25, 2025 10:18

akwasniewski added 2 commits July 25, 2025 12:33

better useffect triggers:

968112c

added todos

6a69cd7

j-piasecki reviewed Jul 25, 2025

View reviewed changes

akwasniewski added 4 commits July 25, 2025 12:50

moved Gesture handler detectors

2b404af

path fix

9c30c1a

extracted host gesture detector

d7dd057

not extending view props

56b93d3

m-bert reviewed Jul 25, 2025

View reviewed changes

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx Outdated Show resolved Hide resolved

akwasniewski added 3 commits July 25, 2025 15:54

native detector action type

ad8ef64

moved implementation of web handler

0304177

memoisation

4aaf700

akwasniewski requested a review from j-piasecki July 28, 2025 08:51

j-piasecki reviewed Jul 28, 2025

View reviewed changes

packages/react-native-gesture-handler/src/ActionType.ts Show resolved Hide resolved

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx Outdated Show resolved Hide resolved

m-bert reviewed Jul 28, 2025

View reviewed changes

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx Outdated Show resolved Hide resolved

akwasniewski added 6 commits July 28, 2025 11:57

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

akwasniewski requested a review from j-piasecki July 29, 2025 09:01

akwasniewski marked this pull request as ready for review July 29, 2025 09:18

akwasniewski requested a review from m-bert July 29, 2025 09:40

m-bert requested changes Jul 29, 2025

View reviewed changes

akwasniewski and others added 4 commits August 1, 2025 11:32

one more refactor

20cbc9e

display contents

58f8d60

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

532f35a

removed action type native detector animated event

7d205dc

akwasniewski requested a review from j-piasecki August 1, 2025 10:35

j-piasecki reviewed Aug 4, 2025

View reviewed changes

akwasniewski and others added 2 commits August 4, 2025 08:34

Update packages/react-native-gesture-handler/src/web/tools/GestureHan…

0c6f200

…dlerWebDelegate.ts Co-authored-by: Jakub Piasecki <[email protected]>

minor fixes

00738d6

akwasniewski force-pushed the @akwasniewski/native-detector-web branch from bfac6a5 to 06a3c86 Compare August 4, 2025 08:30

type predicate

9c17a96

akwasniewski force-pushed the @akwasniewski/native-detector-web branch from 06a3c86 to 9c17a96 Compare August 4, 2025 08:31

readded memoisation

2353a84

j-piasecki reviewed Aug 4, 2025

View reviewed changes

akwasniewski added 2 commits August 5, 2025 09:57

changed dependencies

2443971

moved forAnimated to config

f3198f5

akwasniewski force-pushed the @akwasniewski/native-detector-web branch from e1ef94a to f3198f5 Compare August 5, 2025 08:18

m-bert reviewed Aug 5, 2025

View reviewed changes

packages/react-native-gesture-handler/src/handlers/createHandler.tsx Outdated Show resolved Hide resolved

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts Outdated Show resolved Hide resolved

akwasniewski and others added 5 commits August 5, 2025 10:39

removed forAnimated from attachHandlers

686fadd

type predicate using protected props ref

b0d384d

native gesture bugfix

2ba5ae8

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

38b240a

removed forAnimated

7c00105

m-bert requested changes Aug 5, 2025

View reviewed changes

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

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

dceba3b

removed usecallback

b738254

private isInitialized

1f62d5c

removed type predicate

4d916f5

j-piasecki reviewed Aug 6, 2025

View reviewed changes

safe detaching

18b1b77

Uh oh!

[Web] Native detector component #3637

Are you sure you want to change the base?

[Web] Native detector component #3637

Uh oh!

Conversation

akwasniewski commented Jul 25, 2025

Description

Test plan

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

m-bert Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

akwasniewski Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

j-piasecki Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

akwasniewski Aug 6, 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 5, 2025 •

edited

Loading

akwasniewski Aug 6, 2025 •

edited

Loading