Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Image not displaying on Android simulator and Android device but displaying on iOS

$
0
0

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) :

Image on Android simulator (not showing but the width and height properties are good)

Image on iOS simulator (displaying with correct height and width)

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.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>