React-native: Touchable onPress not working with 3D Touch when 'position: absolute'

[benadamstyles]

Description

I'm trying to consolidate the various issues around this into one place so it can finally be tackled. The related issues I have found are:

https://github.com/facebook/react-native/issues/3082 *
https://github.com/facebook/react-native/issues/10822
https://github.com/facebook/react-native/issues/10386

The issue is that Touchable*#onPress doesn't work on iOS devices with 3D Touch, if any pressure is applied, when the component wrapped by the Touchable* has position: 'absolute'. I think this has to do with touchmove events (or equivalent) being triggered by 3D Touch (possibly in the z direction?). A quick fix is to wrap your Touchable* in a View, giving this outer view position: 'absolute', and removing position: 'absolute' from the View inside your Touchable*.

There is a related problem about the same incorrect behaviour applying to Touchables within a ScrollView (see * above) but this involves PanResponder and becomes much more complicated. I have a feeling (totally unfounded) that fixing this bug might go some (or all the) way towards fixing that bug.

Reproduction Steps and Sample Code

// onPress never called if 3D Touch is present and any pressure is applied
<TouchableOpacity onPress={() => {}}>
  <View style={{position: 'absolute'}}>
    <Text>Press me</Text>
  </View>
</TouchableOpacity>

Solution

I think this is a bug and requires either:

• Clear documentation telling the dev user that the first child of a Touchable* should not have position: 'absolute' (but the parent _can_)
• Or a react-native fix

Additional Information

• React Native version: 0.43.0
• Platform: iOS (3D Touch enabled devices)
• Development Operating System: macOS

[linoleum00]

In my case, the View inside the TouchableOpacity doesn't have the position absolute style, but if you press gently enough, it does work, but if you press normally then it doesn't work.

I have seen some post in which the solution is to use onPressIn instead, and it does the trick but when you have a bunch of touchables inside a scroll view, then you can't scroll because the onPressIn is called immediately after touched

[benadamstyles]

I have seen some post in which the solution is to use onPressIn instead, and it does the trick

@linoleum00 Another related reason why this solution is unsatisfactory is that if you use onPressIn, the user can't cancel their tap by moving their finger away, which is a fundamental aspect of touch interaction.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[benadamstyles]

This is still an issue, and I have reproduced it on React Native v0.47. All the information required is in my original post above. Lack of activity !== resolution!

[IgorVanian]

This is a big issue still in RN49. Actually this looks like a solution but I guess it would be better to implement that inside RN itself.

[JLLLinn]

Still an issue in 0.51

[deepaksasken]

Yes, its still an issue in 0.51 :(

[batmaster]

react-native: 0.51.0 still not work

[raimens]

it worked for me
https://stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute

[philvasseur]

still not working in 0.53.3, no other solutions seem to work for me.

[ashishbista]

This is still an issue.

[kingr]

Issue still exist.

[carmenchapa]

Still an issue.

[ghost]

issue still exists on RN 0.55.4, none of the solutions mentioned in other threads are working when TouchableOpactity is rendered inside of position: 'absolute' View.

[cpojer]

We noticed that very few people actually use 3D Touch so we recently removed a bunch of features related to it, so I'm going to close this as wontfix.