Сделайте перекрывающиеся представления сенсорными, чтобы вызвать onPress в реагировать на родной

Question

У меня есть вид, который имеет перекрывающиеся виды, вид root является абсолютным, в то время как дочерние виды, которые являются кнопками, показанными ниже, являются относительными, верхняя сторона кнопок является сенсорной, но нижняя сторона, отмеченная желтым цветом, является нет, поэтому onPress не запускается:

Код, используемый для этого:

render() {
  return (
    <Card elevation={4}>
      <Card.Cover
        resizeMode="contain"
        source={{
          uri:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTRDxz5NrZ1gdQOqyodN9Qudpw9Z2HTMsfzBm-D1vURyNQdJtNFJ6OLbS_wTlwr15b36BSDddr9&usqp=CAc",
        }}
      ></Card.Cover>
      <Card.Content>
        <Title>Maverick Drone</Title>
      </Card.Content>
      <View
        style={{
          flex: 1,
          position: "absolute",
          bottom: "-8%",
          right: 0,
          flexDirection: "row",
        }}
      >
        <View
          style={{
            elevation: 6,
            shadowOffset: 0.8,
            position: "relative",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "red",
            width: 45,
            height: 45,
            borderRadius: 80,
          }}
        >
          <TouchableRipple
            borderless
            rippleColor={Colors.purple600}
            style={{ justifyContent: "center", alignItems: "center" }}
            onPress={this.onDecrement}
          >
            <MatIcon color="white" size={32} name="minus"></MatIcon>
          </TouchableRipple>
        </View>
        <View style={{ padding: 8 }}></View>
        <View
          style={{
            elevation: 6,
            shadowOffset: 0.8,
            justifyContent: "center",
            alignItems: "center",
            borderRadius: 20,
            backgroundColor: "darkred",
            width: 60,
          }}
        >
          <Text style={{ fontSize: 18, fontWeight: "bold", color: "white" }}>
            {this.state.quantity}
          </Text>
        </View>
        <View style={{ padding: 8 }}></View>
        <View
          style={{
            elevation: 6,
            shadowOffset: 0.8,
            position: "relative",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "red",
            width: 45,
            height: 45,
            borderRadius: 80,
          }}
        >
          <TouchableRipple
            borderless
            rippleColor={Colors.purple600}
            style={{ justifyContent: "center", alignItems: "center" }}
            onPress={this.onIncrement}
          >
            <MatIcon color="white" size={32} name="plus"></MatIcon>
          </TouchableRipple>
        </View>
      </View>
    </Card>
  );
}

Я читал онлайн-сайты, что это это проблема с Reaction-native, он не поддерживает перекрывающиеся представления. Любой обходной путь, который может быть сделан, чтобы избежать такого рода проблемы или ошибки в Reaction-native?