Skip to content

TouchableOpacity not clickable with negative margin on Android #25441

Closed
facebook/react-native-website
#2537
@franciscop-sc

Description

@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 ReproductionAndroid 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions