Android: Overlap TouchableOpacity and View behave differently when there is backgroundColor style

[gie3d]

Description

I created 2 Views that display overlaps to each others. The top and the bottom

When the bottom view background wasn't configured. It responded to the press event correctly. Let's say when I press on the overlap zone, it showed that the bottom one had been pressed

However, when I configured the bottom view backgroundColor. When I pressed on the overlap zone, on Android, it responded as I pressed on the top view which I think it's incorrect. (iOS it responded correctly that the bottom was pressed)

React Native version:

System:
OS: macOS 10.15.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 605.80 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
Yarn: 1.22.0 - ~/.nvm/versions/node/v12.16.0/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
npmPackages:
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.
Here is an example component

const OverlapseTouchExample = ({backgroundColor}) => {
  const [pressedBox, setPressefBox] = React.useState('')
  return (
    <View>
      <Text>{pressedBox} pressed</Text>
      <TouchableOpacity style={[styles.box, {backgroundColor: 'blue'}]} onPress={() => setPressefBox('top')} />
      <View style={backgroundColor ? { backgroundColor: 'orange' } : null}>
        <View style={{marginTop: -75}}>
          <TouchableOpacity style={[styles.boxBottom, backgroundColor ? { backgroundColor: 'green '} : null]} onPress={() => setPressefBox('bottom')} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 150,
    height: 150,
    borderWidth: 1,
  },
  boxBottom: {
    width: 120,
    height: 200,
    borderWidth: 1,
  }
})

The problem found when set the backgroundColor to true
<OverlapseTouchExample backgroundColor={true} />

Expected Results

It should response to the press event the same whether or not backgroundColor is configured or not.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@gie3d/9b6c32

[fabOnReact]

I reproduced the issue in the following example

import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';

export default function App() {
  const [pressedBox, setPressefBox] = React.useState('')
  return (
    <React.Fragment>
      <TouchableOpacity style={styles.box} onPress={() => setPressefBox('top')} />
      <View accessible={false}>
        <TouchableOpacity style={styles.boxBottom} onPress={() => setPressefBox('bottom')} />
      </View>
    </React.Fragment>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 150,
    height: 150,
    borderWidth: 1,
  },
  boxBottom: {
    width: 120,
    height: 200,
    borderWidth: 1,
    marginTop: -75,
  }
})

I opened the example and debug it with Android Studio

https://developer.android.com/studio/debug/layout-inspector

I quote stackoverflow answer

I believe this is not a bug. It is just one of the limitations of trying to use unique layout for Android and iOS. If we exposed the original Android Api, we could have more freedom to configure the Layout (maybe use Linear or RelativeLayout).

This links include alternative layout that you can use to accomplish what you are trying to do.. This limitations are well known..

https://stackoverflow.com/a/40829834/11452286

https://unbug.gitbooks.io/react-native-training/content/32_absolute_&_relative.html

additionally you are using negative top margin, so I would not investigate this further.. because I don't think that you should use a negative margin... Margin should be > 0 ...

[gie3d]

Many thanks to your investigation and effort. Even though I don’t have much knowledge in Android layout.

For the time being, I should go with the absolute position.

[fabOnReact]

#27333 (comment)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.