`Row` doesn't want to get recomposed even after hi...

# compose

[Grigorii Yurkov]

Row doesn't want to get recomposed even after his child Text become bigger. Should I recompose it manually? If yes, how can I do it?

[Afzal Najam]

That sounds like a bug, doesn't it?

[Grigorii Yurkov]

I think it's an optimisation. But looks like a bug

[Adam Powell]

can you describe the case a bit more? What caused the Text to become bigger? Did the content of the Text change or something else?

[Adam Powell]

I ask because layout and composition are different processes that invalidate differently

[Adam Powell]

it is quite valid and expected for a Row to not recompose if the layout size of one of its children changes. It will relayout, but not recompose.

[Grigorii Yurkov]

I replace text in Text with more symbols

[Adam Powell]

Can you post the code in question?

[Grigorii Yurkov]

Ok, I will try to create the test one

[Grigorii Yurkov]

@OptIn(ExperimentalAnimationApi::class)
@Preview
@Composable
fun MyTest() {
    var text by remember { mutableStateOf("0") }
    var visible by remember { mutableStateOf(false) }
    TestTheme {
        Row(modifier = Modifier.fillMaxWidth().height(30.dp)) {
            Spacer(
                modifier = Modifier.weight(1f).background(Color.Red).height(30.dp).clickable(
                    onClick = {
                        visible = true
                    }
                )
            )
            AnimatedVisibility(visible = visible) {
                Text(text, modifier = Modifier.clickable {
                    text += "0"
                })
            }
        }
    }
}

I finally finished. That was much harder that I thought

[Grigorii Yurkov]

I figured out that if visible init value is true, all work fine, but if it is false and than we set it to true, it doesn't work fine

[Adam Powell]

silly question, what is, "fine" in this context? Based on reading the code above I would expect the contents of the AnimatedVisibility to recompose for the new text, and the row to remeasure+relayout for the changed text content, but not recompose the row.

[Adam Powell]

Is relayout not happening correctly?

[Grigorii Yurkov]

Yes, after clicking on Text Spacer remains the same size

[Adam Powell]

hmm, @Doris Liu @George Mount maybe something in AnimatedVisibility?

[Grigorii Yurkov]

It's definitely a bug, because it has different behaviour with same "state"

[Grigorii Yurkov]

Switch visibility to false and back to true must not change behaviour

[Grigorii Yurkov]

I hope you understand what I'm trying to say

[Doris Liu]

This does seem like a bug in AnimatedVisibility. Could you file a bug please?

[Doris Liu]

Out of curiosity, do you expect the size change (from text change) to be animated in AnimatedVisibilty?

[Grigorii Yurkov]

I do not

[Doris Liu]

Cool. Me neither. 🙂

[Grigorii Yurkov]

But know I wonder how to do it 🙂

[Doris Liu]

I'd suggest Modifier.animateContentSize() for that purpose. 🙂

[Doris Liu]

More specifically:

Text(text, modifier = Modifier.clickable {
                    text += "0"
                }.animateContentSize() )

[Hitanshu Dhawan]

Hi @Doris Liu, I wanted to animated my Text composable, so stumbled upon this thread.
I the video below I am using PropKeys for alpha, size, color of components, but for text I’m using Modifier.animateContentSize()
The problem I am facing is that the text is changed first and then the size changes, see the transition from Added to Add. Is this the intended behaviour?
What’s the best way to achieve this interaction? Can I use PropKeys here?

Screen Recording 2020-11-07 at 9.59.07 PM.mov

[Doris Liu]

Yes. The intended behavior is to change the content (in this case the text) immediately and animate the container size afterwards. Is there a specific effect you are hoping to achieve?

[Doris Liu]

The best way to achieve this interaction is to use propkeys for the colors, and alpha, and perhaps a custom AnimationSpec in animateContentSize if you need to coordinate them. Alternatively, you could consider animating the check mark in AnimatedVisibility using fade and expand/shrink to add a little more dynamic to the animation. 🙂

[Hitanshu Dhawan]

Yes, I have used propKeys for color and alpha, what I want is that when we unselect the button, it animates smoothly but right now it is first changing ADDED to ADD and then animating it.
I want ADDED to smoothly animate to ADD.
Basically reverse of when the above interaction goes from ADD to ADDED.

[Hitanshu Dhawan]

Great suggestion on check mark animation, will surely try that too 🙂

[Hitanshu Dhawan]

The intended behavior is to change the content (in this case the text) immediately and animate the container size afterwards.

In my case I may want the content to change afterwards, is this achievable? or any other way to achieve this interaction?

[Doris Liu]

The trouble is we don't know the target size to animate to without changing the text. We might have a different API to support that going forward. For now, here's an unconventional idea: put "ED" in a separate text and animate that in/out using AnimatedVisibility 😂

[Hitanshu Dhawan]

Hahaha, just tried this, works like a charm 😄

Screen Recording 2020-11-08 at 2.15.02 AM.mov