Image always rendering on top of its content

[davidsamacoits]

Hi, thank you for your work. I'm really interesting in your plugin but unfortunately it's not working as expected.
I have the following structure :
<TouchableOpacity> <ImageLoad source={imageSrc} > <Image source={require('../../../assets/img/cardgradient.png')} style={Styles.gradientImage} > <View style={Styles.ShowCard.titleContainer}> <View style={Styles.ShowCard.titleLayout}> <Text style={Styles.ShowCard.title}>{title}</Text> <Text style={Styles.ShowCard.genres}>{genres}</Text> </View> </View> </Image> </ImageLoad> </TouchableOpacity>
The main idea is to have a Touchable component with a picture inside, a gradient on top of it and some texts.
But when your ImageLoad component renders, it renders on top of my other components.
Any idea why?

[TuNguyenThanh]

Thank @davidsamacoits for your issues.
Bug occurred because of "styles" inside ImageLoad component.
I updated the new version.

ex:

<ImageLoad
   style={{ flex: 1 }}
   loadingStyle={{ size: 'large', color: 'blue' }}
   source={{uri: 'https://4.bp.blogspot.com/-lYq2CzKT12k/VVR_atacIWI/AAAAAAABiwk/ZDXJa9dhUh8/s0/Convict_Lake_Autumn_View_uhd.jpg'}}
>
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
        <Text>ImageLoad</Text>
    </View>
</ImageLoad>

Note: backgroundColor: 'transparent' is required.

[davidsamacoits]

I'm sorry but it's still not working. It's duplicating the content of my ImageLoad tag.

My code :

Using imageLoad tags :

Using regular image tags :