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

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 15 (3 by maintainers)

Most upvoted comments

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!

+17

benadamstyles on Aug 30, 2017

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.

ghost on Jun 12, 2018

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

linoleum00 on May 18, 2017

Yes, its still an issue in 0.51 😦

deepaksasken on Dec 21, 2017

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.

IgorVanian on Oct 26, 2017