Skip to content

Commit b18935a

Browse files
authored
[Web] Config refactor - update logic and drop class field (#3673)
## 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. ```ts 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> ); } ```
1 parent 87c33d9 commit b18935a

11 files changed

+295
-284
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,15 @@ export default {
7474
NodeManager.detachGestureHandler(handlerTag);
7575
},
7676
setGestureHandlerConfig(handlerTag: number, newConfig: Config) {
77-
NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
77+
NodeManager.getHandler(handlerTag).setGestureConfig(newConfig);
7878

7979
InteractionManager.instance.configureInteractions(
8080
NodeManager.getHandler(handlerTag),
8181
newConfig
8282
);
8383
},
84-
updateGestureHandlerConfig(_handlerTag: number, _newConfig: Config) {
85-
// TODO: To be implemented
84+
updateGestureHandlerConfig(handlerTag: number, newConfig: Config) {
85+
NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
8686
},
8787
getGestureHandlerNode(handlerTag: number) {
8888
return NodeManager.getHandler(handlerTag);

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,15 @@ export default class FlingGestureHandler extends GestureHandler {
2626
private maxNumberOfPointersSimultaneously = 0;
2727
private keyPointer = NaN;
2828

29-
public override updateGestureConfig({
30-
enabled = true,
31-
...props
32-
}: Config): void {
33-
super.updateGestureConfig({ enabled: enabled, ...props });
34-
35-
if (this.config.direction) {
36-
this.direction = this.config.direction;
29+
public override updateGestureConfig(config: Config): void {
30+
super.updateGestureConfig(config);
31+
32+
if (config.direction) {
33+
this.direction = config.direction;
3734
}
3835

39-
if (this.config.numberOfPointers) {
40-
this.numberOfPointersRequired = this.config.numberOfPointers;
36+
if (config.numberOfPointers) {
37+
this.numberOfPointersRequired = config.numberOfPointers;
4138
}
4239
}
4340

0 commit comments

Comments
 (0)