Overlapping items are not intractable if it's overflowing the parent box in react native android

Issue

I’ve developed an app for ios with the expo and trying to make it work for android, but I have a general issue with overlapping items, I’ve read and tried various tips & tricks, including elevation, and zIndex, removing background color & borders, etc.

Like this one
https://github.com/hossein-zare/react-native-dropdown-picker/issues/40

But this problem is not specific to this package, in general, any time when an item is bigger than its parent, overflowing items are not interactable. Visually there is no issue, it just can’t be tapped on / clicked on.

Here is how it reacts;

overlapping items are not clickable.

In this image, item locations can be seen, if the test dropdown overflows the search component, then overflowing items are not clickable, if the dropdown overflows the Input component, then overlapping items are not clickable.

schema of item postioning

A similar problem is here, this overlay menu, is in the user info component, clicking mute, results in interacting with the like button. I’ve tried using the react-native-gesture-handler package for TouchableOpacity as well.

another example

Expo version: 43.0.0 (comes with React Native 0.64.3)

Solution

I’ve found the answer. It’s a bug of react-native.

react-native#29308: The touch area never extends past the parent
view bounds and on Android negative margin is not supported.

Answered By – siniradam

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published