Make overlapping views touchable to trigger onPress in react-native

I have a view which has overlapping views, the root view is an absolute view while the child views which is the buttons shown below is relative, the upper side of the buttons is touchable but the bottom side marked in yellow is not, therefore onPress is not triggered:

Image may be NSFW.
Clik here to view.

Code used for this:

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>  );}

I have read online websites that this is an issue with react-native it does not support overlapping views.Any workaround that can be done to avoid this kind of issue or bug in react-native?