0

React Native <Image /> doesn't display correctly when width: "100%". Well, it displays but with wrong aspect ratio, even if I have specified the correct one. It ignores aspectRatio property unless I put height: "auto".

It looks like it happens only with local images. And it's the same for both Android and Web.

My code:

const styles = StyleSheet.create({
  img: { width: "100%" }
})

// Doesn't display properly
<Image
  source={require("./local-img.webp")}
  style={{ ...styles.img, aspectRatio: 646 / 1064 }}
/>

// Displays properly
<Image
  source={require("./local-img.webp")}
  style={{ ...styles.img, height: "auto", aspectRatio: 646 / 1064 }}
/>

// Displays properly
<Image
  source={{ uri: "https://online-img.webp" }}
  style={{ ...styles.img, aspectRatio: 646 / 1064 }}
/>

Expected result:

enter image description here

Actual result:

enter image description here

Object417
  • 111
  • 3
  • Does this also happen when using an aspect ratio of `17/28`? I am not sure about the implementation of aspect ratio, but prehaps it might affect the zoom level? – Kipnoedels Apr 05 '23 at 14:28
  • Yeah, it does. It looks like `aspectRatio` property is totally ignored unless `height: "auto"` is specified. – Object417 Apr 05 '23 at 21:01
  • Yeah, you must specify a `maxHeight` or `height` for it to work then. Why would that be an issue for you? – Kipnoedels Apr 06 '23 at 08:02
  • I found the solution but my question is why. Why do I need to do this? Why does `` require both `width` and `height` to be set even when it's enough to have only `width`/`height` and `aspectRatio`? – Object417 Apr 06 '23 at 17:24
  • Well, I don't know. It's designed that way probably. Here is something similar i found: https://stackoverflow.com/questions/39631895/how-to-set-image-width-to-be-100-and-height-to-be-auto-in-react-native – Kipnoedels Apr 06 '23 at 19:05

0 Answers0