[Android] onPress not work in Android with overlapped components

• [OK] Review the documentation: https://facebook.github.io/react-native
• [OK] Search for existing issues: https://github.com/facebook/react-native/issues
• [OK] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i5-5575R CPU @ 2.80GHz Memory: 34.23 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.11.3 - /usr/local/bin/node Yarn: 1.10.1 - /usr/local/bin/yarn npm: 5.6.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0 Android SDK: Build Tools: 26.0.3, 27.0.3, 28.0.1 API Levels: 25, 26, 27, 28 IDEs: Android Studio: 3.1 AI-173.4907809 Xcode: 10.0/10A255 - /usr/bin/xcodebuild npmPackages: react: ^16.6.0-alpha.8af6728 => 16.6.0 react-native: ^0.57.4 => 0.57.4 npmGlobalPackages: react-native-cli: 2.0.1

Description

I have a TouchableOpacity overlapping on an Image component, but onPress can’t be fired on Android. In iOS works fine. The problem occurs in real devices and emulators of both platforms.

Inspector on Android:

Inspector on Ios:

Reproducible Demo

Overlap button: <View style={{ elevation: 4 }} > <TouchableOpacity style={{ width: 50, height: 50, left: scale(200), top: scale(200), right: 0, bottom: 0 }} onPress={this.showLabel} > <View> <Animated.Image source={image} style={{ width: scale(35), height: scale(35) }} /> </View> </TouchableOpacity> </View> Image: <Image source={images[imgteste]} style={{ width: width, height: verticalScale(512), resizeMode: "contain" }} />

[mayooresan]

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

[bartolkaruza]

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