react-nativeiconstouchableopacityreact-native-elementsonpress

React-native: TouchableOpacity and Icon with absolute touchable background issue

I'm using TouchableOpacity for a card and there is a heart icon with white absolute background and for background I'm also using touchable opacity (for Icon BG). The problem I'm facing here is that whenever I click on Icon the card get clicked even though the icon is absolute.

I want to click the absolute Icon with BG and the card separately as wanted to navigate when clicked on card and when icon is clicked i wanted to change the icon on isLiked condition.

yes there is a solution that I should use View instead of TouchableOpacity for Icon BG and should use Icon onPress. But the thing is I need the Icon BG touchable for some reasons.

Solution

  • In the tag, Apply zIndex: 9 in style props.

    <TouchableOpacity onPress={() => {...}} style={{ zIndex: 9 }} />