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.

[artemkhalygov]

I also have some problems with negative margin. It's clickable, but active zone where you can click much more smaller.

React-Native: 0.61.3

[TheMrZZ]

Still a problem today. Works also when a component has a margin big enough to be rendered outside its parent component, then the part of the view outside the parent component cannot be touched.

EDIT: I believe this pull request would fix the problem, but it isn't being reviewed at the moment.

[yigithanyucedag]

+1

[PiperGuy]

+1

[rmdashrfv]

+1 This is also an issue when adding padding. It's pretty remarkable actually. It's like ... for no reason at all.

Good to know that this has been an open issue for nearly 1 year.

[fabOnReact]

https://stackoverflow.com/a/10673572/11452286

this issue will not be fixed. Negative margin is not supported on Android. Use absolute layout.

[vigneshwaran-sh]

on absolute also not working

https://stackoverflow.com/a/10673572/11452286

this issue will not be fixed. Negative margin is not supported on Android. Use absolute layout.

on absolutue also not working

[franciscop-sc]

The documentation says we can use CSS with React Native (except for the names changing to cammelCase).

So either the documentation is wrong and CSS is not supported, or this issue is valid and negative margins should be supported as in CSS. In any case I found this issue after many hours of debugging following the documentation so others will find this issue as well unless something is changed.

[fabOnReact]

#27333 (comment)

[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]

Still an issue stalebot :)

[velidan]

I have the same issue but even when I'm using the absolute positioning the button isn't clickable as well. It's really strange.

In my case, the problem was in the limited height of the parent element. eg.

<View style={{ height: 50 }}>
  <View style={{ position: 'absolute', bottom: 50 }}> // THE TOUCHABLE ISN"T CLICKABLE BECAUSE OF BOTTOM POS
     <TouchableOpacity style={{ width: 20, height: 20 }} onPress={handler}>...</TouchableOpacity>
   </View>
</View>

In the case of web such a trick works but in the case of android it doesn't and if I understand correctly it because android doesn't recognize touchable if it absolutely positioned outside of the parent with limited height.

I solved it just by removing absolute pos -_- looks a bit different than I planned but it's clickable at least

[lagofvc]

Thanks @velidan! This was very helpful.
I solved similarly by increasing parent height for Android!
Much appreciated!

[AishwaryaSurana]

Got a hack
Try Giving zIndex, It worked for me

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

[marsk6]

I used hitSlop which solved my issue

<TouchableOpacity style={{ marginBottom: -4 }} hitSlop={{ bottom: 4 }}>
...
</TouchableOpacity>

[s-arbabi]

+1

[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.

[alexander01202]

It's still an issue stalebot. Up to two years now not yet solved

[y471n]

Still an issue :(

[SaadBinWaheed-empglabs]

Still an issue

[mbordia-eightfold]

Try importing TouchableOpacity from react-native-gesture-handler instead.
It did work for me.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.