Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Touchable] Support hit test slop for touchable components #110

Labels
Resolution: Locked This issue was locked by the bot.

Comments

@ide
Copy link
Contributor

ide commented Feb 27, 2015

For example, if you have a small button it is useful to make it easier to touch by increasing the hit test bounds. See "Button Nodes" on http://asyncdisplaykit.org/guide/ for example.

@vjeux
Copy link
Contributor

vjeux commented Feb 27, 2015

We've been using padding for that. I feel like while that attribute is useful, it's dangerous to be able to increase hit range like this as you're likely going to overlap with other elements and have an undefined behavior

@ide
Copy link
Contributor Author

ide commented Feb 27, 2015

Hit slop is especially useful when you Have completed your layout and just need to adjust the tappable areas. Comfortable hit-test areas are one of those features that makes apps feel "native" and it would be good if they were easy to customize. Sometimes the tappable region may overlap with other views, which is unambiguous when those views don't handle touches. When touchable areas do overlap I believe the behavior can be well-defined (e.g. use z-index and responder chain) and the programmer can later fine-tune the hit area. There may be another good way to resolve tap conflicts / UIKit might have a clever approach.

@vjeux
Copy link
Contributor

vjeux commented Feb 28, 2015

Right now, we've made the conscious choice not to introduce apis that cannot be polyfilled on the web. Unfortunately it's basically impossible to polyfill this without having to reimplement hit testing.

At some point in the future we'll want to reimplement hit testing on web, layout, ... but until then, I feel like it's best to have a slightly worse api but that's backward compatible.

@ide
Copy link
Contributor Author

ide commented Feb 28, 2015

OK. I will think about it some more to see if there is a solution that can be built in user space, either with pure JS or a native module that swizzles native hit-testing methods. I do think it is useful to adjust hit-test areas easily even when you can't run the same code everywhere.

@brentvatne brentvatne changed the title Support hit test slop for touchable components [Touchable] Support hit test slop for touchable components May 31, 2015
@brentvatne
Copy link
Collaborator

@ide - did you ever look into this?

@ide
Copy link
Contributor Author

ide commented Jun 1, 2015

Last I looked at the touch handler the easiest way would be to override the hit testing of views. I haven't experimented with this, just have been making my views bigger to compensate for now.

@sahrens
Copy link
Contributor

sahrens commented Jun 12, 2015

I'm going to close this out - if you come up with an elegant solution, put up a PR?

@sahrens sahrens closed this as completed Jun 12, 2015
harrykiselev pushed a commit to harrykiselev/react-native that referenced this issue Aug 5, 2015
…tion

Update overview of Dispatcher#waitFor to reflect its current implementation
@ide
Copy link
Contributor Author

ide commented Jan 30, 2016

Reopening this since we're actively working on a hit-test slop API that works across iOS and Android, with iOS's hit-test semantics. Specifically, if there are two overlapping hit boxes, they are treated the exact same way as if you had two overlapping views -- the one that comes last in the view hierarchy receives the touch.

To get this same behavior on Android requires some extra work since the de facto way to adjust hit areas on Android ends up sending touch events to all views with overlapping hit boxes. It's confusing and inconsistent with how overlapping views function (where the hit box size == view size) so we're working towards fixing this for RN Android so no one else has to. We're still a little bit away from sending a PR (need to do Android) but plan to when we have something working well.

@ide ide reopened this Jan 30, 2016
@ghost ghost closed this as completed in 0176ac4 Feb 17, 2016
pglotov pushed a commit to pglotov/react-native that referenced this issue Mar 15, 2016
Summary:New prop `hitSlop` allows extending the touch area of Touchable components. This makes it easier to touch small buttons without needing to change your styles.

It takes `top`, `bottom`, `left`, and `right` same as the `pressRetentionOffset` prop. When a touch is moved, `hitSlop` is combined with `pressRetentionOffset` to determine how far the touch can move off the button before deactivating the button.

On Android I had to add a new file `ids.xml` to generate a unique ID to use for the tag where I store the `hitSlop` state. The iOS side is more straightforward.

terribleben worked on the iOS and JS parts of this diff.

Fixes facebook#110
Closes facebook#5720

Differential Revision: D2941671

Pulled By: androidtrunkagent

fb-gh-sync-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
shipit-source-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
react-one pushed a commit to react-one/react-native that referenced this issue Sep 24, 2021
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.