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;
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.
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.
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
Answer Checked By - Marilyn (JavaFixing Volunteer)