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>

[daisylb]

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'}} />
  </>

)