rememberAsyncImagePainter renders nothing when using dragAndDropSource

[vjxDev]

Describe the bug
The image is simply rendering nothing. There is nothing in the logs. When I remove the dragAndDropSource it works fine.

To Reproduce

                Box(
                    modifier = Modifier
                        .aspectRatio(1f)
                        .dragAndDropSource {
                            detectTapGestures (
                                onLongPress = {
                                    startTransfer(
                                        DragAndDropTransferData(
                                            clipData = ClipData.newPlainText("text/","${photo.id}"),
                                            flags = View.DRAG_FLAG_GLOBAL,
                                        )
                                    )
                                }
                            )
                        }
                ) {
                    Image(
                        painter = rememberAsyncImagePainter(photo.url),
                        contentDescription = photo.description,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize()
                    )
                    Text(text = "${photo.id}")
                }

Logs/Screenshots

Version
I am using a google pixel 6, android 14.
coil-compose = "2.6.0"
activity-compose = "1.7.0"

[colinrtwhite]

If you use AsyncImage does it fix it? rememberAsyncImagePainter isn't easily able to determine the output bounds which can cause issues.

[vjxDev]

I just tried it with AsyncImage . Its blank until I long press on a box, only then does it render the images. I only now noticed it does the same thing with rememberAsyncImagePainter.

It seams like it only renders the images when a recomposition happens.

screen-20240229-023455.mp4

[colinrtwhite]

Interesting - if it also happens with AsyncImage then it might not be related to the constraints. Just to confirm if you set a fixed size on the image request (e.g. size(Size(500, 500))) does it work-around the issue?

[vjxDev]

Its still blank after adding modifier size until the 1st state update.

AsyncImage(
  model = photo.url,
  contentDescription = photo.description,
  contentScale = ContentScale.Crop,
   modifier = Modifier.size(20.dp, 20.dp),
)

The dragAndDropSource and dragAndDropTarget are under ExperimentalFoundationApi they might be the problem.

[TinyHai]

I reproduce this issue by applying Modifier#drawWithCache to AsyncImage

Modifier.drawWithCache {
    val picture = Picture()
    onDrawWithContent {
        val canvas = Canvas(picture.beginRecording(size.width.toInt(), size.height.toInt()))
        draw(this, layoutDirection, canvas, size) {
            this@onDrawWithContent.drawContent()
        }
        picture.endRecording()
        drawIntoCanvas { it.nativeCanvas.drawPicture(picture) }
    }
}

the code is copy from androidx.compose.foundation.draganddrop.CacheDrawScopeDragShadowCallback.

I suppose it cause this issue, but I don't know why.

Hope it's useful for you.

[TinyHai]

I reproduce this issue by applying Modifier#drawWithCache to AsyncImage

Modifier.drawWithCache {
    val picture = Picture()
    onDrawWithContent {
        val canvas = Canvas(picture.beginRecording(size.width.toInt(), size.height.toInt()))
        draw(this, layoutDirection, canvas, size) {
            this@onDrawWithContent.drawContent()
        }
        picture.endRecording()
        drawIntoCanvas { it.nativeCanvas.drawPicture(picture) }
    }
}

the code is copy from androidx.compose.foundation.draganddrop.CacheDrawScopeDragShadowCallback.

I suppose it cause this issue, but I don't know why.

Hope it's useful for you.

In dragAndDropSource, it uses Picture to capture a snapshot by calling drawContent, but it doesn't recall it when inner content changed. It seems like drawing phase is localized.

As a result, it will draw the empty snapshot until next recompose comes.

[TinyHai]

I found a similar issue on issue tracker