Why the `Modifier.onSizeChange()` doesn't work in...

# compose

[Daniele Segato]

Why the Modifier.onSizeChange() doesn't work in Preview?

var cardSize by remember { mutableStateOf<IntSize?>(null) }
    Box(
        modifier = Modifier
            .background(Color.White)
            .aspectRatio(1f)
            .fillMaxSize()
            .onSizeChanged { cardSize = it }
    ) {
        Text(text = "Size is = $cardSize")
    }

the preview always show "Size is null" while if I run it I get the size as I expect?
Is there a way to fix the preview?

[Daniele Segato]

In my case I can encapsulate in a BoxWithConstraint and use the maxWidth but this is kind of weird

[ms]

Did you try it on a device or an emulator?

[Albert Chang]

I guess you need the interactive mode for the text to get updated.

[Daniele Segato]

yes in both emulator and device work as expected.

[Daniele Segato]

I guess you need the interactive mode for the text to get updated.

I think it's disabled in AS Beta

[Albert Chang]

You can enable it in settings.

[Daniele Segato]

oh thank you, I had missed that

[Zach Klippenstein (he/him) [MOD]]

The reason is because the preview only runs a single composition. The size changed event isn’t sent until after the first composition-layout completes, which would normally trigger a recomposition but not in previews. This means if you’re using that state in the composition (as you are) then it will probably flicker in even on a real device because that first frame will be drawn without the size value. BoxWithConstraints might be a better approach if it works for your use case since it gives you the constraints immediately, on the first composition. No missed frame, no flicker

[Daniele Segato]

What about that preview they were showing with an animated 3D content being previewed? is that gonna come later?

[Zach Klippenstein (he/him) [MOD]]

that relies on specific integrations with the animation primitives