4

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>
    );
  }
}
J.range
  • 449
  • 5
  • 20

0 Answers0