[Web] Config refactor - update logic and drop class field #3673

akwasniewski · 2025-08-12T11:42:17Z

Description

This PR changes how config is handled on web, following #3658 it separates update and set functionality, which allows passing only relevant, changed fields to update, as opposed to the entire config. Moreover it removes the config field from GestureHandler - adds necessary fields as class fields, this mimics how config is handled on iOS / Android and simplifies the code (previously some fields were both both config and class fields).

Test plan

The update functionality was tested on the following code.

import * as React from 'react';
import { Animated, Button } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);
  const taps = useSharedValue(2);

  const gesture = useGesture('TapGestureHandler', {
    onEnd: () => {
      console.log('Tap detected. Required number of taps:', taps.value);
      taps.set(taps.value + 1);
    },
    numberOfTaps: taps,
  });

  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,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

m-bert

Given that in updateGestureConfig we have:

this._config = {
  enabled,
  dispatchesAnimatedEvents,
  ...props,
};

updateGestureConfig acts as setGestureConfig. The point of separating this method in module was to have set method which sets the config to new one and update method which updates only changed fields.

Right now doing this:

console.log(this.config);
this._config = {
  enabled,
  dispatchesAnimatedEvents,
  ...props,
};
console.log(this.config);

yields this:

akwasniewski · 2025-08-18T10:54:11Z

The point of separating this method in module was to have set method which sets the config to new one and update method which updates only changed fields.

Okay, I had previously not understood this was the point, as your PR didn't add this, it simply renamed the function. Even before your PR checking if the fields exist was already built into setConfig. I added it in 41f615ef.

m-bert · 2025-08-18T12:44:33Z

Okay, I had previously not understood this was the point, as your PR didn't add this, it simply renamed the function.

Not really. It added setGestureHandlerConfig into module spec and updated behavior of updateGestureHandlerConfig such that it really updates the config, not resets it 😉

akwasniewski · 2025-08-18T13:00:03Z

Not really. It added setGestureHandlerConfig into module spec and updated behavior of updateGestureHandlerConfig such that it really updates the config, not resets it 😉

Yeah, I could have worded that better. I meant that iOS / android implementations required fewer changes within the GestureHandler, I did not notice that web required more.

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

m-bert · 2025-08-18T13:23:53Z

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

+    if (
+      config.shouldCancelWhenOutside !== undefined &&
+      this.config.shouldCancelWhenOutside !== undefined
+    ) {


Suggested change

if (

config.shouldCancelWhenOutside !== undefined &&

this.config.shouldCancelWhenOutside !== undefined

) {

if (config.shouldCancelWhenOutside !== undefined) {

Also this check is quite weird - if config.shouldCancelWhenOutside is defined, then it will be assigned into this.config.shouldCancelWhenOutside in the loop above. And if config.shouldCancelWhenOutside is undefined, then nothing really happens.

Note, I assumed that the for loop above doesn't check for key differences.

Fixed, got carried away 4fd97f8a1b8

m-bert · 2025-08-18T13:24:19Z

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

+    if (
+      config.dispatchesAnimatedEvent !== undefined &&
+      this.config.dispatchesAnimatedEvents !== undefined
+    ) {


Suggested change

if (

config.dispatchesAnimatedEvent !== undefined &&

this.config.dispatchesAnimatedEvents !== undefined

) {

if (config.dispatchesAnimatedEvent !== undefined) {

Same as above

Checking undefined was just to make eslint happy, fixed in 4fd97f8a1b8

m-bert · 2025-08-18T13:30:32Z

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

+    for (const key of Object.keys(config)) {
+      if (this.config[key] !== config[key]) {
+        this.config[key] = config[key];
+      }
+    }


Suggested change

for (const key of Object.keys(config)) {

if (this.config[key] !== config[key]) {

this.config[key] = config[key];

}

}

for (const key of Object.keys(config)) {

this.config[key] = config[key];

}

I don't think we need this check, I'd just assign new values.

I agree, fixed 4fd97f8a1b8

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

j-piasecki

Took a quick look, and the PR generally looks good. Can you please merge the next branch so that only actually modified files are shown in the diff?

j-piasecki · 2025-08-25T13:18:24Z

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

+    }
+
+    if (config.dispatchesAnimatedEvents !== undefined) {
+      this.forAnimated = config.dispatchesAnimatedEvents;


Suggested change

this.forAnimated = config.dispatchesAnimatedEvents;

this.dispatchesAnimatedEvents = config.dispatchesAnimatedEvents;

Can we align those names?

Done in 2da4640

j-piasecki · 2025-08-25T13:30:32Z

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

+    if (config.activeOffsetXStart !== undefined) {
+      this.activeOffsetXStart = config.activeOffsetXStart;
+      this.hasCustomActivationCriteria = true;
    }

-    if (this.config.activeOffsetXStart !== undefined) {
-      this.activeOffsetXStart = this.config.activeOffsetXStart;
-
-      if (this.config.activeOffsetXEnd === undefined) {
-        this.activeOffsetXEnd = Number.MAX_SAFE_INTEGER;
-      }
+    if (config.activeOffsetXEnd !== undefined) {
+      this.activeOffsetXEnd = config.activeOffsetXEnd;
+      this.hasCustomActivationCriteria = true;
    }

-    if (this.config.activeOffsetXEnd !== undefined) {
-      this.activeOffsetXEnd = this.config.activeOffsetXEnd;
-
-      if (this.config.activeOffsetXStart === undefined) {
-        this.activeOffsetXStart = Number.MIN_SAFE_INTEGER;
-      }
+    if (
+      this.activeOffsetXStart !== undefined &&
+      this.activeOffsetXEnd === undefined
+    ) {
+      this.activeOffsetXEnd = Number.MAX_SAFE_INTEGER;
+    } else if (
+      this.activeOffsetXStart === undefined &&
+      this.activeOffsetXEnd !== undefined
+    ) {
+      this.activeOffsetXStart = Number.MIN_SAFE_INTEGER;
    }


Is the logic with Number.MAX_SAFE_INTEGER needed? Wouldn't that be handled by resetConfig?

Indeed, it is handled by resetConfig. Thanks, removed in f490152.

j-piasecki · 2025-08-25T13:31:40Z

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

+    if (config.failOffsetXStart !== undefined) {
+      this.failOffsetXStart = config.failOffsetXStart;
+      this.hasCustomActivationCriteria = true;
    }

-    if (this.config.failOffsetXEnd !== undefined) {
-      this.failOffsetXEnd = this.config.failOffsetXEnd;
-
-      if (this.config.failOffsetXStart === undefined) {
-        this.failOffsetXStart = Number.MIN_SAFE_INTEGER;
-      }
+    if (config.failOffsetXEnd !== undefined) {
+      this.failOffsetXEnd = config.failOffsetXEnd;
+      this.hasCustomActivationCriteria = true;
    }

-    if (this.config.activeOffsetYStart !== undefined) {
-      this.activeOffsetYStart = this.config.activeOffsetYStart;
-
-      if (this.config.activeOffsetYEnd === undefined) {
-        this.activeOffsetYEnd = Number.MAX_SAFE_INTEGER;
-      }
+    if (
+      this.failOffsetXStart !== undefined &&
+      this.failOffsetXEnd === undefined
+    ) {
+      this.failOffsetXEnd = Number.MAX_SAFE_INTEGER;
+    } else if (
+      this.failOffsetXStart === undefined &&
+      this.failOffsetXEnd !== undefined
+    ) {
+      this.failOffsetXStart = Number.MIN_SAFE_INTEGER;
    }


Removed in f490152.

j-piasecki · 2025-08-25T13:31:53Z

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

+    if (config.activeOffsetYStart !== undefined) {
+      this.activeOffsetYStart = config.activeOffsetYStart;
+      this.hasCustomActivationCriteria = true;
+    }

-      if (this.config.activeOffsetYStart === undefined) {
-        this.activeOffsetYStart = Number.MIN_SAFE_INTEGER;
-      }
+    if (config.activeOffsetYEnd !== undefined) {
+      this.activeOffsetYEnd = config.activeOffsetYEnd;
+      this.hasCustomActivationCriteria = true;
    }

-    if (this.config.failOffsetYStart !== undefined) {
-      this.failOffsetYStart = this.config.failOffsetYStart;
+    if (
+      this.activeOffsetYStart !== undefined &&
+      this.activeOffsetYEnd === undefined
+    ) {
+      this.activeOffsetYEnd = Number.MAX_SAFE_INTEGER;
+    } else if (
+      this.activeOffsetYStart === undefined &&
+      this.activeOffsetYEnd !== undefined
+    ) {
+      this.activeOffsetYStart = Number.MIN_SAFE_INTEGER;
+    }


Removed in f490152.

j-piasecki · 2025-08-25T13:33:12Z

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

+    if (config.failOffsetYStart !== undefined) {
+      this.failOffsetYStart = config.failOffsetYStart;
+      this.hasCustomActivationCriteria = true;
    }

-    if (this.config.failOffsetYEnd !== undefined) {
-      this.failOffsetYEnd = this.config.failOffsetYEnd;
+    if (config.failOffsetYEnd !== undefined) {
+      this.failOffsetYEnd = config.failOffsetYEnd;
+      this.hasCustomActivationCriteria = true;
+    }

-      if (this.config.failOffsetYStart === undefined) {
-        this.failOffsetYStart = Number.MIN_SAFE_INTEGER;
-      }
+    if (
+      this.failOffsetYStart !== undefined &&
+      this.failOffsetYEnd === undefined
+    ) {
+      this.failOffsetYEnd = Number.MAX_SAFE_INTEGER;
+    } else if (
+      this.failOffsetYStart === undefined &&
+      this.failOffsetYEnd !== undefined
+    ) {
+      this.failOffsetYStart = Number.MIN_SAFE_INTEGER;
    }


Removed in f490152.

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

m-bert · 2025-08-26T08:18:04Z

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

@@ -156,7 +153,7 @@ export class GestureHandlerWebDelegate
  }

  private setUserSelect(isHandlerEnabled: boolean) {


It is probably out of scope of this PR, but if we have access to this.gestureHandler we could do this.gestureHandler.enabled instead of passing it as argument.

I think If the delegate is already being refactored we might as well add it.

Added in 847f3ed

Co-authored-by: Michał Bert <[email protected]>

This reverts commit c78bb91.

m-bert

LGTM

m-bert · 2025-08-26T13:11:54Z

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

+  public get enableContextMenu() {
+    return this._enableContextMenu;
+  }
+  protected set enableContextMenu(value) {


Should they be protected? If they're not used outside of this class we could assign directly to backing field and remove setters.

However this approach is also ok, so feel free to choose the one you prefer.

Sure, I removed setters that are not used outside of the class, there is no reason to bloat the code e87ea11

m-bert and others added 18 commits August 5, 2025 15:47

Handle shared values on JS

68e48c6

Update config on android

bc7c28b

Update config on iOS

e3f51d2

Rename

2df4900

Change method in ForceTouch

3929618

Update mocks

ea1f170

Rename ID variable

7cf3962

Remove unnecessary worklet directive

dedb725

Merge branch 'next' into @mbert/shared-values

03fb873

Merge branch 'next' into @mbert/shared-values

26f38b3

Inline updateGestureHandler

50ffbcd

Move extracting SharedValues into separate effect

8d1ad9b

Store shared values in array

9a98e19

Rename functions

fd6eb79

Do not store shared values

2af12c1

Merge branch 'next' into @mbert/shared-values

d8a2824

Merge branch 'next' into @mbert/shared-values

4c29715

it works?

dd25163

akwasniewski requested a review from m-bert August 12, 2025 11:49

akwasniewski marked this pull request as ready for review August 14, 2025 08:56

m-bert requested changes Aug 14, 2025

View reviewed changes

proper update

41f615e

akwasniewski requested a review from m-bert August 18, 2025 11:15

properly checking bools

285c0f5

m-bert reviewed Aug 18, 2025

View reviewed changes

fix after review

4fd97f8

m-bert reviewed Aug 18, 2025

View reviewed changes

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

m-bert and others added 9 commits August 20, 2025 10:52

Use operation block

73bd21b

Copy config

ee63683

Move flushOperations into JS

ed5e9d8

Merge branch 'next' into @mbert/shared-values

9c89722

manually setting config

0014899

manually setting in each handler

c0756a2

moved values out of config and added needsPointerData

fa62ef8

restored config update for now

a3451ef

removed config field

70f2f00

akwasniewski marked this pull request as draft August 21, 2025 08:57

akwasniewski and others added 2 commits August 21, 2025 11:05

updating new fields

36bfae5

Merge branch '@mbert/shared-values' into @akwasniewski/shared-values-web

8953c34

akwasniewski changed the title ~~[Web] Bind SharedValues in handler config~~ [Web] Config refactor - update logic and drop class field Aug 21, 2025

akwasniewski marked this pull request as ready for review August 21, 2025 09:36

akwasniewski requested a review from m-bert August 21, 2025 09:36

Base automatically changed from @mbert/shared-values to next August 22, 2025 12:11

j-piasecki reviewed Aug 25, 2025

View reviewed changes

akwasniewski added 4 commits August 26, 2025 08:28

Merge branch 'next' into @akwasniewski/shared-values-web

534e784

merge with next

3d66fb8

aligned names

2da4640

removed unncessary checks

f490152

m-bert reviewed Aug 26, 2025

View reviewed changes

akwasniewski and others added 3 commits August 26, 2025 10:58

removed redundant check

c78bb91

Co-authored-by: Michał Bert <[email protected]>

simplify

847f3ed

Revert "removed redundant check"

2fca8a2

This reverts commit c78bb91.

m-bert approved these changes Aug 26, 2025

View reviewed changes

akwasniewski and others added 2 commits August 27, 2025 09:50

removed bloat setters

e87ea11

Merge branch 'next' into @akwasniewski/shared-values-web

a94436c

akwasniewski merged commit b18935a into next Aug 27, 2025
1 check passed

akwasniewski deleted the @akwasniewski/shared-values-web branch August 27, 2025 08:13

	this.forAnimated = config.dispatchesAnimatedEvents;
	this.dispatchesAnimatedEvents = config.dispatchesAnimatedEvents;

		@@ -156,7 +153,7 @@ export class GestureHandlerWebDelegate
		}

		private setUserSelect(isHandlerEnabled: boolean) {

Uh oh!

[Web] Config refactor - update logic and drop class field #3673

[Web] Config refactor - update logic and drop class field #3673

Uh oh!

Conversation

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

Uh oh!

Description

Test plan

Uh oh!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

akwasniewski commented Aug 18, 2025

Uh oh!

m-bert commented Aug 18, 2025

Uh oh!

akwasniewski commented Aug 18, 2025

Uh oh!

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!

Uh oh!

j-piasecki left a comment

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!

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!

Uh oh!

m-bert Aug 26, 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!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

m-bert Aug 26, 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 27, 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 commented Aug 12, 2025 •

edited

Loading

m-bert Aug 26, 2025 •

edited

Loading

m-bert Aug 26, 2025 •

edited

Loading

akwasniewski Aug 27, 2025 •

edited

Loading