I am currently working on an ecommerce App and as I render products through a component, it turns out that my Component does not render any image on Android as opposed to iOS where the image is rendered.
The component that fails to render properly is this one :
<TouchableOpacity style={styles.productContainer}><Image source={{ uri: product.imgURI }} style={styles.productImage} /><View style={styles.productText}><Text style={styles.productName}>{product.name}</Text><Text style={styles.productQuantity}>{product.quantity}</Text></View></TouchableOpacity>
I use an external Image like so (as you can see) :
<Image source={{ uri: product.imgURI }} style={styles.productImage} />
The imgURI property of the product object corresponds to this :
product.imgURI = "https://via.placeholder.com/150.png"
and the image style is this :
style.productImage: {borderTopLeftRadius: 5,borderTopRightRadius: 5,width: 115,height: 80,
}
Here are screenshots of the outcome on Android and iOS (respectively) :
I tried wrapping the image inside a but it does not work, I tried assigning height and width properties directly to the image but it doesn't work either.
Do you have any clue as to where it could be coming from ?
Thank you in advance
EDIT : I tried with different images and it seems to be working with some images, regardless of the extension of the image which is very weird. I still don't understand why it doesn't work with the placeholder image.