Skip to content

Commit 0e5d58e

Browse files
authored
[Web] Fix bottom hitslop (#3644)
## Description Currently `hitSlop` on web uses `width` instead of `height` to calculate `bottom` property. This is incorrect. Fixes #3633 ## Test plan Trust our intuition 🤓 <details> <summary>Tested on the following example:</summary> ```jsx import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; export default function EmptyExample() { const gesture = Gesture.Pan().hitSlop({ bottom: -20 }).onUpdate(console.log); return ( <GestureDetector gesture={gesture}> <View style={styles.box} /> </GestureDetector> ); } const styles = StyleSheet.create({ box: { width: 10, height: 100, backgroundColor: 'red', }, }); ``` </details>
1 parent 56db030 commit 0e5d58e

File tree

1 file changed

+2
-1
lines changed

1 file changed

+2
-1
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -685,8 +685,9 @@ export default abstract class GestureHandler implements IGestureHandler {
685685
}
686686

687687
if (this.config.hitSlop.bottom !== undefined) {
688-
bottom = width + this.config.hitSlop.bottom;
688+
bottom = height + this.config.hitSlop.bottom;
689689
}
690+
690691
if (this.config.hitSlop.width !== undefined) {
691692
if (this.config.hitSlop.left !== undefined) {
692693
right = left + this.config.hitSlop.width;

0 commit comments

Comments
 (0)