Skip to content

Commit 1328672

Browse files
latekvom-bert
authored andcommitted
Fix Pressable's onPress being called on cancellation (#3678)
## Description This PR fixes the `Pressable`'s `onPress` callback being called despite the press being cancelled. Credit for finding and fixing this issue goes to @gigobyte. Fixes #3609 ## Test plan - Run the following example: https://gist.github.com/gigobyte/5d1d0bf9e5f188f6590210a21fc6eb3a - Swipe the pink `Pressable` to the right. - Before this PR, the `onPress` callback would be called without the finger being lifted. - Since this PR, the `onPress` is no longer called when the finger isn't lifted.
1 parent 430b92e commit 1328672

File tree

2 files changed

+13
-4
lines changed

2 files changed

+13
-4
lines changed

packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -270,9 +270,13 @@ const Pressable = (props: PressableProps) => {
270270
stateMachine.reset();
271271
handlePressOut(pressableEvent, false);
272272
})
273-
.onFinalize(() => {
273+
.onFinalize((_event, success) => {
274274
if (Platform.OS === 'web') {
275-
stateMachine.handleEvent(StateMachineEvent.FINALIZE);
275+
if (success) {
276+
stateMachine.handleEvent(StateMachineEvent.FINALIZE);
277+
} else {
278+
stateMachine.handleEvent(StateMachineEvent.CANCEL);
279+
}
276280
handleFinalize();
277281
}
278282
}),
@@ -301,11 +305,15 @@ const Pressable = (props: PressableProps) => {
301305
stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
302306
}
303307
})
304-
.onFinalize(() => {
308+
.onFinalize((_event, success) => {
305309
if (Platform.OS !== 'web') {
306310
// On Web we use LongPress().onFinalize() instead of Native().onFinalize(),
307311
// as Native cancels on mouse move, and LongPress does not.
308-
stateMachine.handleEvent(StateMachineEvent.FINALIZE);
312+
if (success) {
313+
stateMachine.handleEvent(StateMachineEvent.FINALIZE);
314+
} else {
315+
stateMachine.handleEvent(StateMachineEvent.CANCEL);
316+
}
309317
handleFinalize();
310318
}
311319
}),

packages/react-native-gesture-handler/src/components/Pressable/stateDefinitions.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export enum StateMachineEvent {
77
NATIVE_START = 'nativeStart',
88
FINALIZE = 'finalize',
99
LONG_PRESS_TOUCHES_DOWN = 'longPressTouchesDown',
10+
CANCEL = 'cancel',
1011
}
1112

1213
function getAndroidStatesConfig(

0 commit comments

Comments
 (0)