Skip to content

Commit 78c9ed7

Browse files
authored
[Web] Fix press out (#3833)
## Description After #3678 pressables `onPressOut` did not work on web. This PR fixes the issue. That PR added a check whether gesture has succeded or not. Because on web, native gestures fail on mouse move, the finalise was handled by LongPress.finalize, but the LongPress has minDuration set to INT_32 max so it never ends succesfully. This creates new tap gesture that which handles finalise on web. ## Test plan Tested on the following example ```tsx import { View } from 'react-native' import { GestureHandlerRootView, Pressable, ScrollView } from 'react-native-gesture-handler' export default function Test() { return ( <GestureHandlerRootView > <ScrollView style={{ flexGrow: 1, backgroundColor: 'white' }}> <View style={{ paddingTop: 200, height: 2000 }}> <Pressable style={{ width: 30, height: 30, backgroundColor: 'pink' }} onPress={() => console.log("pressed")} /> </View> </ScrollView> </GestureHandlerRootView > ) } ```
1 parent 9f0a521 commit 78c9ed7

File tree

1 file changed

+1
-2
lines changed
  • packages/react-native-gesture-handler/src/components/Pressable

1 file changed

+1
-2
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const Pressable = (props: PressableProps) => {
248248
const pressAndTouchGesture = useMemo(
249249
() =>
250250
Gesture.LongPress()
251-
.minDuration(INT32_MAX) // Stops long press from blocking Gesture.Native()
251+
.minDuration(Platform.OS === 'web' ? 0 : INT32_MAX) // Long press handles finalize on web, thus it must activate right away
252252
.maxDistance(INT32_MAX) // Stops long press from cancelling on touch move
253253
.cancelsTouchesInView(false)
254254
.onTouchesDown((event) => {
@@ -331,7 +331,6 @@ const Pressable = (props: PressableProps) => {
331331
gesture.enabled(isPressableEnabled);
332332
gesture.runOnJS(true);
333333
gesture.hitSlop(appliedHitSlop);
334-
gesture.shouldCancelWhenOutside(Platform.OS !== 'web');
335334

336335
Object.entries(relationProps).forEach(([relationName, relation]) => {
337336
applyRelationProp(

0 commit comments

Comments
 (0)