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:
Actual result:
