TouchableOpacity not clickable with negative margin on Android

[franciscop-sc]

When clicking on a <TouchableOpacity /> element that a child of <View /> but is rendered outside of this view, if and only if this parent view has a backgroundColor then the TouchableOpacity will not be clickable in Android (see Snack):

Snack Reproduction	Android Simulator

// Works - can click the circles
<View style={{ marginHorizontal: 50 }}>
 <Circle works style={{ marginLeft: -50 }} />
 <Circle works style={{ transform: [{ translateX: -50 }] }} />
 <Circle works style={{ position: 'relative', left: -50 }} />
</View>

// Broken - cannot click these circles
<View style={{ marginHorizontal: 50, backgroundColor: '#aaa' }}>
 <Circle style={{ marginLeft: -50 }} />
 <Circle style={{ transform: [{ translateX: -50 }] }} />
 <Circle style={{ position: 'relative', left: -50 }} />
</View>

React Native version:

react-native-cli: 2.0.1
react-native: 0.59.9

Steps To Reproduce

1. Create a <View> with a backgroundColor.
2. Add a TouchableOpacity with some sort of displacement, so that it falls outside this parent View (but still within the screen).
3. Try to press it. There's no feedback and no event triggered.

Describe what you expected to happen:

You can click any <TouchableOpacity /> element rendered within the screen.

Snack, code example, or link to a repository:

https://snack.expo.io/SJfRhWPlH

[Volksfeld]

All buttons worked fine on Snack, android.

[idocme]

Having the same issue. is there a way to solve it? or it's a bug and we need to wait for a fix?

[sungsong88]

I have the same issue... In my case, the button underneath the negative-margin-top button gets clicked. The click event just passes through...

[MamyChow]

+1 i have same issue on Android (IOS is working well), React-native: 0.61

[nohharri]

+1 Same issue Android (IOS also working fine), React-native 0.59.8. Tested with other components as well, TouchableNativeFeedback, TouchableWithoutFeedback. This seems to be an issue regardless of the TouchableOpacity component and with anything outside the given RN view.

[basha777]

+1 Same issue android react-native 0.60.5

[antonKalinin]

+1 same issue on Android, React-Native: 0.61.3

[RobertBiberovic]

+1 same issue on Android when margin is negative, on iOS it works fine, React Native 0.59 (older version because of expo)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[franciscop-sc]

Hey thanks for the follow-up stale-bot, testing the above snack in Android still yields the same issue unfortunately, so this is pretty much not dead.