Description
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
- Create a
<View>
with a backgroundColor. - Add a TouchableOpacity with some sort of displacement, so that it falls outside this parent View (but still within the screen).
- 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: