Component in same hierarchy as AsycImage cannot render when used together with IntrinsicSize #3260
Description
Describe the bug
I'm building a UI where there is a left hand size and right hand size. Image are on the right and the left hand size's content will scale to the maximum available height.
Similar to this UI:
When using the following code, the text inside the same Column as the ASyncImage view are not rendered. You can replicate this with following code:
Row(
modifier = Modifier
.height(IntrinsicSize.Max)
.fillMaxWidth()
) {
Column(
modifier = Modifier
.fillMaxHeight()
.padding(end = 16.dp, start = 16.dp)
) {
Image(
imageVector = Icons.Default.Check,
contentDescription = null
)
VerticalDivider(
modifier = Modifier
.fillMaxHeight()
.align(Alignment.CenterHorizontally)
.width(1.dp)
)
}
Column {
AsyncImage(
model = "https://fastly.picsum.photos/id/1077/1000/500.jpg?hmac=Uri1xzECqflU1kLIIKwN4JByLcTIIoGx8ih5XLpps9I",
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth()
)
Text("This is not rendered!")
}
}And it will produce the following result when the app is run on a device. Notice that the the last text "This is not rendered!" is not visible
However, I also found a workaround that using a combination of Image + rememberAsyncImagePainter works correctly. In the above code, change AsyncImage to following:
Image(
painter = rememberAsyncImagePainter(model = "https://fastly.picsum.photos/id/1077/1000/500.jpg?hmac=Uri1xzECqflU1kLIIKwN4JByLcTIIoGx8ih5XLpps9I"),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth()
)And the text is now rendered correctly:
I believe this bug is in AsyncImage as the behavior between using AsyncImage and Image + rememberAsyncImagePainter should be the same for simple use cases like this. Could be a bug with AsyncImage not being able to layout correctly when using with IntrinsicSize
Version
Coil 3.3.0 but maybe also affecting older versions