React-native: Touch events in nested absolute positioned views not working on Android

[AdamGerthel]

When nesting a touchable surface in absolute positioned views, Android will display the children correctly according to style rules, but not handle the touch event. It works as expected on iOS.

React Native version: 0.59

Steps To Reproduce

Create two views, both absolutely positioned (one as child to the other) and place a button or (whatever that uses a touch event) in the child view. Attempt to use the button.

Describe what you expected to happen:
I would expect the touchable surfaces to work (onPress events etc.)

Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/@insats/android-positioning-bug

[wsamipw]

Facing same Problem.

[emzet93]

+1. Same issue only on Android

[kailask]

Also been struggling with this problem for a while now. Problem occurs even after setting zIndex and if parent view is not absolute positioned.

[Hirbod]

Can confirm this too

[AdamGerthel]

Possible workaround: Use pointerEvents attribute set to box-none on the absolute positioned view. Worked in my use-case (not in my snack though 🤷🏼‍♂️).

[chukwuezi]

Make sure you set the height and the width in the parent view. This will fix the Android issue.

[smisaacs]

same issue.

[lucas-pessoa]

+1 same issue happening only on Android

[tagraha]

same issue. happening on android only

[ManuEpi]

Same issue only on android too

[HunteRoi]

Same here ✋

[matheuss-leonel]

Same here

[yastrebovb]

Same issue, android only, any solutions?

[fabriziobertoglio1987]

https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java#L59-L70

RootView delegates touch event to childs

https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java#L201-L208

ReactViewGroup get the touch event from the RootView and should pass it back to javascript TouchableOpacity

https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java#L220-L232

I believe JS is invoked with this function
https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java#L263-L281

https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSTouchDispatcher.java#L53-L66

I'll keep working on this tomorrow

[sjonchhe]

Has anybody found anything on this??

[fabriziobertoglio1987]

I know the solution for this. I'm preparing a pull request

reactTargetView resolves to ReactViewGroup instance with id 0x3 (The Red View Group).

https://github.com/facebook/react-native/blob/120ff7ccdebebdf814e478259ba1e4a8ef6f513e/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.java#L85

Then the only children of that ViewGroup is the red TouchableOpacity

https://github.com/facebook/react-native/blob/120ff7ccdebebdf814e478259ba1e4a8ef6f513e/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.java#L90

[fabriziobertoglio1987]

I believe your issue is based on a WorkAround similar to negative margin https://github.com/facebook/react-native/issues/25441#issuecomment-635787940, which should not be used with Android Design.

Related issues https://github.com/facebook/react-native/issues/25441 https://github.com/facebook/react-native/issues/28694

The view you created has the following properties

```javascript
position: 'absolute',
bottom: 0,
right: 0,
left: 0,
zIndex: 2
}}>
{ touchableOpacity }

````

This breaks the following Java logic

https://github.com/facebook/react-native/blob/0060b5de559cd9c785a2a2a6c66f58088fea4dd2/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.java#L153

As the view has height = 0 and bottom = 0. The getTop returns 2022 (the bottom of my android screen).

For this reason the touchY which is positioned at { y: 2009 } is not included in that view container and touch is passed to the red component.. LONG STORY SHORT Make sure you absolute container contains your Touchable Opacity as explained in hitSlop

I believe the functionality you expect does not exist in react native.
I could consider working on it, but seems to me more like a consistent feature request.

Does your company need this feature? I am available as freelancer for 10 usd per hour and I can built this feature for a cheap rate. Otherwise you can consider sponsoring me on Github and I will give priority to your features request.

Otherwise I have to postpone this for later.

Thanks a lot
I wish you a good day
Fabrizio Bertoglio

[AdamGerthel]

@fabriziobertoglio1987 Even if you're right, I'm going to quote this comment from the issue you linked to and say this:

The documentation says we can use CSS with React Native (except for the names changing to camelCase).

So either the documentation is wrong and CSS is not supported, or this issue is valid and negative margins should be supported as in CSS. In any case I found this issue after many hours of debugging following the documentation so others will find this issue as well unless something is changed.

If position: 'bottom' without a specified position: 'top' value is not allowed, then this should be either fixed or documented imho.