Nativescript 6 external image parent does not respect height - nativescript

Question

I have an NS 6 app and testing on an iPhone 6+ with iOS 13.
In this app I have a ListView and in the ListView I have a nativescript-carousel.
In the carousel I have an image component that loads an external image. The issue is that when I load the page, the image is loaded, but the parent does not expand vertically to accommodate the full height of the image. I can only see a small portion of it.
I tried refreshing the ListView and calling page.requestLayout(), but that did not help. If I set the image height, everything works, but the issue is that some of the carousel items may not have an image, so I cannot commit to a set height.
Here is my code (truncated for brevity):
<ListView id="lst" items="{{ asks }}">
<ListView.itemTemplate>
<StackLayout class="ask-item">
…
<GridLayout rows="*" columns="*" marginTop="10">
<ns:Carousel items="{{ recs }}" color="white" pageChanged="myChangeEvent" android:indicatorAnimation="slide" indicatorColor="#999999" indicatorColorUnselected="#dddddd" indicatorOffset="0,15" showIndicator="true">
<ns:Carousel.itemTemplate>
<ns:CarouselItem backgroundColor="#f9f9f9" verticalAlignment="middle">
<StackLayout class="rec-item">
…
<Image src="{{ image }}" stretch="aspectFit" horizontalAlignment="center" />
…
</StackLayout>
</ns:CarouselItem>
</ns:Carousel.itemTemplate>
</ns:Carousel>
</GridLayout>
</StackLayout>
</ListView.itemTemplate>
</ListView>
What is the best way to handle this issue?
Thank you.

Answer 1

By nature iOS ListView height can not be changed once rendered, you will have to update the specific list item.
Try downloading the image upfront or listen to isLoading property change, once then capture the height of the raw image and bind the height to the layout. The images height could be in raw pixel, you might want to convert that into density independent pixel for better display on high resolution devices.