I have a CachedImage component and now I have added a touchableOpacity on top of that which I want to be clickable but it doesn't work.

there is an onPress function on the ChachedImage for single and double clicks. I tried putting Icon in the same View but it didn't work either so I thought maybe changing the container might help but didn't.

<View>
    <View style={[style, widthWrapper, heightWrapper]}>
        <CacheableImage
            style={[widthWrapper, heightWrapper, { borderRadius }, imageStyle]}
            source={this.state.retrySource ? this.state.retrySource : source}
            permanent
            resizeMode={imageResizeMode}
            one rror={() => {
            this.setState({ retrySource: source });
            }}
        />
        {this.showTags()}
        {isVideoThumbnail &&
        <Icon
            name="play"
            type="Ionicons"
            style={localStyles.absoluteIcon}
        />
        }
    </View>
    {this.renderTagButton()}
</View>


renderTagButton = () => {
    const { tags } = this.state

    if (!tags || tags?.length === 0){
      return null
    }
    return (
        <TouchableOpacity onPress={()=> console.log('clickkked')}>
          <Icon size={20} color={'white'} name={'ProductTag-fill'} style={localStyles.tagsIcon} />
        </TouchableOpacity>
    );
  }
  
absoluteIcon:{
    position: 'absolute',
    top: '40%',
    color: '#fff',
    fontSize: 13,
    alignSelf: 'center',
    padding: 7,
    backgroundColor: '#7779',
    borderRadius: 90,
}

CodePudding user response：

you need to give style to TouchableOpacity as style={{ position: 'absolute', zIndex: 1 }}

CodePudding user response：

moving style={localStyles.tagsIcon} from Icon to TouchableOpacity solved the problem. however, underlying CachedImage onPress is Called each time