I have a Card
component that displays a listing on the app's dashboard page. The whole card is wrapped in a TouchableOpacity
. I want the entire card to be Pressable, which links to the listings page.
However, I want the bottom right corner of it to not be pressable, since it contains a View
that has 2 icons on it (a Like button and a Message button). Each of these icons has their own onPress()
that needs to happen.
Right now, if you try to click on the bottom right icons, it just triggers the whole TouchableOpacity
Here is the return
statement for Card
:
return (
<Container>
<Cover style={{ backgroundColor: "red" }}>
<Image
source={{
width: 80,
height: 90,
url: "https://picsum.photos/200/300",
}}
/>
</Cover>
<Content>
<Title>{props.name}</Title>
<PriceCaption>{"$" + props.price}</PriceCaption>
<View
style={{
position: "absolute",
height: 35,
width: 100,
top: 45,
right: 0,
flexDirection: "row",
alignItems: "Flex-end",
}}
>
<TouchableOpacity
style={{
...styles.ButtonBackground,
backgroundColor: null,
left: 70,
}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="mail" size={26} color={colours.purple} />
</TouchableOpacity>
<TouchableOpacity
style={{
...styles.ButtonBackground,
backgroundColor: null,
marginLeft: 0,
left: 10,
}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="heart" size={26} color={colours.purple} />
</TouchableOpacity>
</View>
</Content>
</Container>);
Is there a property, or way I can exclude a nested View
from a TouchableOpacity
?
Note: If you click on the Icons
, they still trigger their respective onPress()
, however, the entire Card still fades out, and the animation is the same as if you clicked elsewhere on the card (so user gets poor feedback on where they clicked).
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…