React-native: Using onPress with hitslop does not work as expected

[kpink224]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v: 0.48.2
2. node -v: 7.7.2
3. npm -v: 5.0.3

Then, specify:

• Target Platform: ios and android

• Development Operating System: MacOS Sierra 10.12.6

• Build tools: Xcode 9 and android studio

Description

I'm using TouchableWithoutFeedback around a small view and since it's small, I'm using hitslop to expand the touchable area. I'm calling a function using onPress but when I'm using hitslop, it actually becomes harder to touch when using a device -- it works great when using an emulator which is why it doesn't make sense to make a side snackio project for this.

I noticed that if you lightly touch the screen with minimal skin contact, it works fine but when you fat finger it, nothing works. I'm able to work around this by using onPressIn or onPressOut but prefer to use onPress for detecting a true onPress.

[janicduplessis]

@facebook-github-bot needs-repro

[facebook-github-bot]

Can you reproduce the issue using Snack? This step is necessary for people to be able to see and debug the issue being reported. See "How to Contribute".

[kpink224]

Here is a snack project https://snack.expo.io/HyuojKzjW: Don't use it on an emulator as described above. The state is set only on some touches and when this scenario is scaled down, it barely triggers.

[endel]

Apparently, using hitSlop makes no difference for me as well. I'm wrapping a small image and trying to create a touch event from it, but it's very hard to "fat finger" it.

<TouchableWithoutFeedback
  onPressIn={ this._onPressIn }
  onPressOut={ this._onPressOut }
  onPress={ this._onPress }
  hitSlop={{ top: 20, left: 20, bottom: 20, right: 20 }}
>
  <Animated.Image
    source={ this.props.source }
    style={[this.props.style, { transform: [{ scale: scale }] }]} />
</TouchableWithoutFeedback>

Any help is appreciated.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[WillyRamirez]

Still waiting for a fix for this...

[danielneal]

I'm seeing this exact problem too. The onPress works on the emulator but has a tiny pressable area on my device. I'm using an iPhone SE for testing. Adding hitSlop doesn't seem to work at all - apart from in the top direction.

[JulioOrellana]

hitSlop doesn't work with TouchableWithoutFeedback, waiting for a fix x2

[jsprzybylski]

In RN 0.52 hitSlop actually expands the clickable space. The problem is that on iOS, when using small views (e.g. icon buttons), only the left halve is clickable (clicking on the right side doesn't even fire the touch event).

What worked for me (kinda) was setting icon dimensions to 22dp and adding 4dp padding. It still had issues but buttons were large enought to be usable.

[kpink224]

@jsprzybylski Sounds like that's because of how the button was laid out in the react tree. Hitslop actually renders on the level of the button so a following sibling of the button would cover the button's hitslop on the right side. It is solvable using various workarounds based on this above fact (like flexDirection row-reverse gave us the right side of hitslop back since the sibling is laid out first. This worked out great for our design structure). Obviously hitslop shouldn't be as complicated as that to use but as for now, that's not the biggest problem.

I'd still like to verify what @jsprzybylski said about v0.52 because that would be awesome if it was fixed.

[jsprzybylski]

I don't think it's an issue with hitSlop overlapping on anything. It looks more like na issue with touch event handling.

I've made an example, though it crashes on Android so you will need to build it on your box. Snack: https://snack.expo.io/B1Wrx3nUf

Try clicking on iOS and compare it to Android.

Personally I don't think hitSlop is complicated. Maybe the issue is that people don't read the documentation?

My environment details:
RN 0.52.2, Expo 25, node 8.9.3 with npm 5.5.1

Tested on Android 6/7 and iOS 10/11.

[andidev]

I had this issue as well when trying to increase the hitslop in a single direction like hitSlop={{right: 8}}. Changing this to hitSlop={{top: 0, right: 8, bottom: 0, left: 0}} made it work.

I also found out that this issue exists also exist on the emulator (when setting hitslope in one direction) but to be able to trigger du issue one must move the mouse pointer at least one pixel after hitting the mouse button. I guess the issue is triggered easier on the phone since the the pressing with a finger is more sensitive for movements and pressing the button as fast as possible made it harder to trigger this issue.