React-native: React Native Android: An absolute positioned, TouchableOpacity outside of the bounds of its parent is not clickable

[travisho-ensu]

If I place a TouchableOpacity outside the bounds of its parent (using absolute positioning) only the portions of the TouchableOpacity which are inside the bounds of the parent are clickable. I think this is a bug because this can only be reproduced in Android, not iOS.
React Native version: 35.0.0

Steps To Reproduce

Here's a minimal code sample:
<View style={{height: 60, width: '100%', zIndex: 1}}> <TouchableOpacity onPress={() => console.log('pressed')} style={{position: 'absolute', zIndex: 2, backgroundColor: 'yellow', width: 100, height: 50, top: 70}} /> </View>

[excitedleigh]

I'm having the same problem, but I've come across #26374 which I think should fix it if/when it's merged?

[tarasvakulka]

Hi, may be somebody know when this PR #26374 will be merged ?

[harshitaahuja]

This is still reproducible on version 0.61.5. any fixes?

[lucassardois]

We really need this issue to be fixed.

[vonkanehoffen]

I'm still seeing this bug in 0.61.5 on Android. A fix would be amazing.

[LeonDong199509]

I got this bug too. This PR #26374 doesn't work for me. Anyone can help?

[sriram-kailasam]

A temporary workaround is to import TouchableOpacity from react-native-gesture-handler. That's how I got it working after a wasted day of messing with position: 'absolute'.

[prateekchachra]

@sriram-kailasam Not working

I tried using the same.

[igorrfc]

Render the absolute positioned touchable component as the last child worked for me. Also, I've enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

[Egizas]

please merge, this issue is driving me nuts

[neXorianus]

I also had the bug when using a wrapper element positioned absolute:

<View style={{position: 'absolute', height: 0, justifyContent: 'space-between'}}>
  <TouchableOpacity ... />
  <TouchableOpacity ... />
</View>

This results in Toucheables not beeing clickable. expanding the wrapping View to the height of the Touchables, makes them clickable again, but kills interaction with elements behind the wrapper.

The only way I could fix this is giving the absolute positioning to the children, similar to @igorrfc :

<>
  <TouchableOpacity style={{position: 'absolute', left: 0}} ... />
  <TouchableOpacity style={{position: 'absolute', right: 0}} ... />
</>

[Shuo-Mr]

Has this problem been solved? I also have this problem. When my view is absolutely positioned, it is not in the scope of the parent view, and all internal interaction events will not take effect.

[jong-hui]

0.63's Pressable have same problem

[alexvilchis]

Having the same issue with Pressables. The proposed workarounds didn't work for me. What else can I do?

[youssame]

Render the absolute positioned touchable component as the last child worked for me. Also, I've enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

👍

[abhirna36]

What's the latest update from the issue ?

[Svarto]

same problem

[JB-CHAUVIN]

Same problem...

[mikkelwf]

Same issue here with Pressable

[MrToxy]

Same issue with View.
RN version "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz".

[summerkiflain]

Its a shame that one of the most important design feature doesn't work properly with touchables in overflown area, the issue and the related PR is lingering on for over an year, I hope someone gives it another look and solve the biggest hassle for design implementation, if its working fine in iOS it should replicate the behavior in android too.

[FrancisLeigh]

Experiencing this issue also and wrapping the pressable element or complete render in Fragments is not working...

[JeremiahUL]

This is a shame honestly. I love RN but I am surprised how long this issue has gone. We celebrated one year anniversary of this issue. 😅

[kamwoz]

Why is it waiting for so long here? It's basic funcionality!

[lukebrandonfarrell]

A simple fix for this is to position your absolute positioned components at the root of your page

[summerkiflain]

A simple fix for this is to position your absolute positioned components at the root of your page

@lukebrandonfarrell I don't understand what do you mean by the "root of your page", can you create a small expo snack if possible?

[cokepizza]

A temporary workaround is to import TouchableOpacity from react-native-gesture-handler. That's how I got it working after a wasted day of messing with position: 'absolute'.

same issue react-native 0.63.4 in android
if i use touchableOpacity from 'react-native-gesture-handler', This seems to be bubbling between the touch layers.

https://github.com/software-mansion/react-native-gesture-handler/issues/784

fundamental problem solving seems to be needed on the RN side.