Skip to content

Commit 76e3fd2

Browse files
authored
[Web] Fix onStart firing on Pan with activateAfterLongPress when gesture is disabled while being pressed down. (#3075)
## Description `Pan` gesture allows for use of `activateAfterLongPress` modifier, which allows it to be activated after holding down the gesture down for a specified amount of time. This modifier uses `setTimeout` underneath, which was not properly cleared when the gesture was disabled while being pressed down. Closes: #3074 ## Test plan - run the attached code - when the button is clicked 2 times, nothing happens - without this PR, clicking the button 2 times results in `onStart` firing on the `Pan` gesture due to lack of `timeout` clearing ## Attached code - make sure to have `@shopify/flash-list` installed <details> <summary> Collapsed code </summary> ```jsx import React from 'react'; import { Button, View } from 'react-native'; import { FlashList } from '@shopify/flash-list'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; export default function HomeScreen() { const [enabled, setEnabled] = React.useState(true); const data = [0]; const panGesture = Gesture.Pan() .enabled(enabled) .activateAfterLongPress(750) .onStart(() => { console.warn('pan triggered'); }); return ( <GestureDetector gesture={panGesture}> <FlashList data={data} ListHeaderComponent={ <Button title={enabled ? 'Disable Gestures' : 'Enable Gestures'} onPress={() => { setEnabled((prev) => !prev); }} /> } renderItem={() => { return ( <View style={{ height: 70, backgroundColor: 'tomato', }} /> ); }} /> </GestureDetector> ); } ``` </details> ## Results <details> <summary> Collapsed results recordings </summary> ### Before https://github.com/user-attachments/assets/c09b2bc4-8b6a-4f2b-aa8c-efa78821d7f2 ### Fixed https://github.com/user-attachments/assets/5a72a363-94d4-4fdb-9060-f0f496487614 </details> ### Important: As far as I see, all the other calls to `this.clearActivationTimeout()` can be activated individually, and none of them are redundant.
1 parent 90c275d commit 76e3fd2

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

src/web/handlers/PanGestureHandler.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,10 @@ export default class PanGestureHandler extends GestureHandler {
268268

269269
this.tracker.removeFromTracker(event.pointerId);
270270

271+
if (this.tracker.getTrackedPointersCount() === 0) {
272+
this.clearActivationTimeout();
273+
}
274+
271275
if (this.currentState === State.ACTIVE) {
272276
this.end();
273277
} else {

0 commit comments

Comments
 (0)