React Native - onPress on child larger than parent component not working on Android

Question

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:

Render of component

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

Answer 1

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).