TouchableOpacity not clickable with negative margin on Android

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

[stale[bot]]

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.

[AishwaryaSurana]

Got a hack Try Giving zIndex, It worked for me

 emailWrapper: {
    backgroundColor: 'red',
    marginBottom: -28,
    zIndex: 1,
  },