I'm using TouchableOpacity for handling clicks.Everything is working fine in upper hierarchy views, but bellow two containers view is not clickable.I've set an alert when it's clicked for testing purposes.View bellow comment is not working and I think it's because of bad nesting.
Here is code :
return (
<View style={styles.container}>
<View style={styles.subContainer}>
<Text style={[styles.storyLikesAndShares, { marginRight: 17 }]}>
{this.state.likes} Likes
</Text>
<Text style={styles.storyLikesAndShares}>
{this.props.story.Shares ? this.props.story.Shares : 0} Shares
</Text>
</View>
<View style={[styles.subContainer, { paddingTop: 16 }]}>
<View style={styles.storyIconsContainer}>
<TouchableOpacity onPress={() => this.changeLikedState(this.props)}>
<Icon
style={[
this.props.story && this.state.isLiked
? styles.storyLikedIcon
: styles.storyNotLikedIcon,
{ marginRight: 24 }
]}
name={"heart"}
size={24}
/>
</TouchableOpacity>
<Icon style={styles.storyNotLikedIcon} name={"share"} size={24} />
//Code bellow is not working
<TouchableOpacity
onPress={() => alert('alertiiiing')}
>
{this.props.storyViewType === "feed" ? (
<Text
onPress={() => console.log('read more clicked')}
style={styles.storyReadMoreText}>Read Full Story...</Text>
) : (
<View />
)}
</TouchableOpacity>
</View>
</View>
</View>
);
}
}