react-native: [Android] onPress not work in Android with overlapped components

I used the TouchableOpacity from react-native instead of react-native-gesture-handler and it worked. God knows why.

Just make the parent at least as big as the touch area.

I had same problems but I found (https://github.com/kmagiera/react-native-gesture-handler) I just import TouchableOpacity from it and it works as on IOS

When you give a view negative margin or negative position, it is basically outside of the parent view. Although the view renders in the case of iOS even if it is not inside the parent, on Android the view is simply clipped to the part that is in the parent.

This is true for display of the view and for touch handling.

I am using react-native 0.57 and the issue with clipping child seems to be solved, but onPress events still don’t work… Is there any way I can make it work as it works on IOS? Or maybe 0.58 solves this problem?

When you give a view negative margin or negative position, it is basically outside of the parent view. Although the view renders in the case of iOS even if it is not inside the parent, on Android the view is simply clipped to the part that is in the parent.

This is true for display of the view and for touch handling.

TouchableOpacity works great!! However, if you don’t need any UI feedback, just set the activeOpacity prop to 1.

<TouchableOpacity activeOpacity={1}/>

Is there any news on this issue? I am using the following style properties on a view, cotaining a TouchableWithoutFeedback:

buttonContainerStyle: { position: ‘absolute’, top: -45, width: ‘100%’, height: ‘100%’, alignItems: ‘flex-end’, paddingRight: 15, },

It is working perfectly on iOS, but I cannot access the Touchable on android (onPress not working). I do require the View containing the Touchable be removed from its parent View. zIndex and hitSlop did not solve the issue.

try to removed backgroudColor of the parent View. in my case , It works.

Facing an issue while using a position: absolute, TouchableOpacity onPress is not working in Android Only. it works fine in iOS.

Same problem here. TouchableOpacity does not fire onPress event on Android when it is inside a view with absolute positioning and parent view has a sibling. Please see snack: https://snack.expo.io/@sorinbogdan/working-maybe

Buttons 2, 3, 4 onPress is not called. Please reopen issue.

@Zver64 Did you solve it? I’ve got the same problem… On Android i cannot click on the TouchableOpacity (for the portion outside of the parent view)

To not make mistake described by @mayooresan again, added ESLint rule which will show error when it happens: https://github.com/kmagiera/react-native-gesture-handler/issues/578#issuecomment-558599996

I had same problems but I found (https://github.com/kmagiera/react-native-gesture-handler) I just import TouchableOpacity from it and it works as on IOS

Awesome! This worked for my. I was trying to make a bigger button on a bottom tab-bar, but I got this problem with Android. That TouchableOpacity solved the problem. Thanks!

Nice, but it only solved part of the problem, we could trigger the event in the foreground, but if the backdrop has Touchable as well. The application will receive both of them

I had same problems but I found (https://github.com/kmagiera/react-native-gesture-handler) I just import TouchableOpacity from it and it works as on IOS

Awesome! This worked for my. I was trying to make a bigger button on a bottom tab-bar, but I got this problem with Android. That TouchableOpacity solved the problem. Thanks!

has this been solved? i am having similar issue with a the touch being triggered for the component below the overlapping component

Just make the parent at least as big as the touch area.

It’s not the best solution. Especially in some cases. For example I have header and I want to have a small button with a dropdown that can overlap my header.

Is there any news on this issue? I am using the following style properties on a view, cotaining a TouchableWithoutFeedback:

buttonContainerStyle: { position: ‘absolute’, top: -45, width: ‘100%’, height: ‘100%’, alignItems: ‘flex-end’, paddingRight: 15, },

It is working perfectly on iOS, but I cannot access the Touchable on android (onPress not working). I do require the View containing the Touchable be removed from its parent View. zIndex and hitSlop did not solve the issue.

I have a feeling this is related to the negative top value of the TouchableOpacity. On Android, a view is not able to render outside of its parent, but it is on iOS. Why do you need a negative absolute position?

I had same problems but I found (https://github.com/kmagiera/react-native-gesture-handler) I just import TouchableOpacity from it and it works as on IOS

Are you doing anything special? I’m trying to use TouchableOpacity and still have the same problem (overlapping an element causes the top element to be pressed instead), plus a lot of layout problems of its own.

there are some really big problems on touchable in android, zIndex works differently in android, and also you should pay attention to “position” style, you can wrap it in a View or you can play with it, and you will find out some strange logic or at least it will work somehow 😄. have a nice day

I had same problems but I found (https://github.com/kmagiera/react-native-gesture-handler) I just import TouchableOpacity from it and it works as on IOS

Are you doing anything special? I’m trying to use TouchableOpacity and still have the same problem (overlapping an element causes the top element to be pressed instead), plus a lot of layout problems of its own.