Is there a way to define the width of a React.Image component while ensuring that the height adjusts automatically to maintain aspect ratio? I have attempted setting the height to 'auto' like so...
imageStyle: {
width: 400,
height: 'auto'
}
I have also tried setting the height to 0 and even leaving out the height property altogether. However, all these methods resulted in the image not being displayed. It seems like the default height might be set to 0.
I experimented with using flexbox as well, by applying flexDirection: 'row' to the image container component and assigning flex: 1 to the image itself. This did create the desired display with the specified width and properly scaled height, but unfortunately it caused issues with zoom functionality in other parts of the component. Are there any other styling techniques that would be effective?
Just for reference, this issue only arises when adjusting the width. When setting the image height and allowing the width to adjust for maintaining aspect ratio, the following style configuration works perfectly...
imageStyle: {
height: 400,
}