I have the following component in React Native:
<View style={{ flex: 1, width: "100%", backgroundColor: "white" }} >
<View style={{ position: "absolute", top: 20, left: 20, height: 100, width: 100, backgroundColor: 'red' }}>
<TouchableWithoutFeedback onPress={() => console.log("clicked")}>
<View style={{ position: "absolute", top: 20, left: 20, height: 200, width: 200, backgroundColor: 'blue'}}>
</View>
</TouchableWithoutFeedback>
</View>
</View>
This renders the following screen:
Now when I click on the part of the child (blue) component that is outside of the parent (red) component it doesn't log "click" on Android. But when I run this app on iOS, it does log "click" when clicked outside of the parent on the child component.
What is the reason that it does work on iOS but not on Android? Should I use a different component specifically for Android?
Thanks in advance.
Version information:
Output of react-native info:
System:
OS: macOS 12.0.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 157.67 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.10.0 - /var/folders/0k/l1gbyzj91lzg98pqcyp95xl40000gn/T/yarn--1653119182599-0.2342745454309867/node
Yarn: 1.22.18 - /var/folders/0k/l1gbyzj91lzg98pqcyp95xl40000gn/T/yarn--1653119182599-0.2342745454309867/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
Watchman: 2022.03.21.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7784292
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 15.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-macos: Not Found
This is a general problem for Android devices and this problem has not been solved. You find a long open discussion about this here on Github.
However, this can be solved by not letting the parent container handle the positioning of its children and handle this with absolute positioning yourself, which you are doing anyway. Thus, each of the absolute positioned containers should not be wrapped inside the same parent view.
The following solves the problem on Android while still working on iOS.
<>
<View style={{ width: "100%", backgroundColor: "white" }} >
<View style={{ position: "absolute", top: 20, left: 20, height: 100, width: 100, backgroundColor: 'red' }}></View>
</View>
<TouchableWithoutFeedback onPress={() => console.log("clicked")}>
<View style={{ position: "absolute", top: 40, left: 40, height: 200, width: 200, backgroundColor: 'blue'}}></View>
</TouchableWithoutFeedback>
</>
Notice, that I have created the desired overlap of the blue and the red component by adjusting its position. The touch event does now work as expected on Android. I have tested this only on physical devices (Android and iOS).