react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Increasing hitSlop does not increase touch area

Open LouiseBC opened this issue 5 years ago • 4 comments

Description

I added hitSlop to buttons on iOS and it works perfectly, but the touch area isn't increased on Android. It seems to be an issue with react-native-gesture-handler: We're using a BorderlessButton, but when I replace it with TouchableOpactiy from react-native it works just fine. Using RNGH's TouchableOpacity once again doesn't work, and besides that it seems to calculate different touch areas.

Screenshots

Screenshot 2020-11-27 at 09 55 18 This is what the touch area looks like using TouchableOpacity from RN, or using BorderlessButton from RNGH. When using TouchableOpacity from RN the touch area indicated here works. When using BorderlessButton only the red area (padding) is touchable.

Screenshot 2020-11-27 at 09 55 27 This is what the touch area looks like using TouchableOpacity from RNGH

Snack or minimal code example

    <TouchableOpacity    // or BorderlessButton
      ...
      hitSlop={{top: 16, bottom: 16, left: 8, right: 0}}>
      ...
    </TouchableOpacity>

Package versions

  • React: 16.13.1
  • React Native: 0.63.3
  • React Native Gesture Handler: 1.9.0

LouiseBC avatar Nov 27 '20 09:11 LouiseBC

Any news about this issue?

Thavry avatar Jan 19 '21 10:01 Thavry

Any news about this issue?

VictorPulzz avatar Jun 03 '21 15:06 VictorPulzz

Any news about this issue?

ghost avatar Oct 20 '21 17:10 ghost

Same issue - this seems to work correctly for RN's implementation of TouchableOpacity, but not RNGH in Android.

leepowellnbs avatar Mar 21 '22 11:03 leepowellnbs