I sometimes find myself doing ```AnimatedVisibili...

# compose

[Colton Idle]

I sometimes find myself doing

AnimatedVisibility(visible = someState != null) {
    MyUi(someState!!)
}

should compose/kotlin be able to figure out that I don't need !! or, am I setting up a potential footgun for myself here?

[Ian Lake]

Does that actually work? I would think that someState!! would crash while the content is animating out (since setting visible to false doesn't mean the content instantly vanishes) - that's why AnimatedContent passes the lambda the targetState - so you don't have to hold onto it separately)

[ephemient]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1697303548190649?thread_ts=1697303412.000489&cid=CJLTWPH7S

[Zoltan Demant]

Beware that AnimatedContent will also animate whenever someState changes. Shared a workaround here if you need!

[Ian Lake]

Yeah, don't do that, just use the contentKey on AnimatedContent

[Zoltan Demant]

Will that not still try to animate between values? Im pretty sure that was the behavior I was seeing at least but I havent revisited that in quite some time.

[Ian Lake]

There's no animation between content with the same key

[Colton Idle]

Ah okay. so it does work when "entering", but not during exit.

TIL about AnimatedContent, thank you!

This is what I ended up with

AnimatedContent(targetState = someState) {
    if (it != null) {
      MyUi(it)
    }
}

the animation seems right, even though the other thread linked Albert mentioned that we don't need the inner null check. But I can't get it to work without that inner null check

AnimatedContent(targetState = someState) {
    MyUi(it!!)
}

crashes

[vide]

@Colton Idle that would animate only when entering, not exiting? AnimatedContent would work in both directions. You can't skip the inner null check with AnimatedVisibility

[Colton Idle]

ah. copy pasta'd wrong. editing my last message now

[Colton Idle]

but yeah. basically. i still have to do the inner null check even with AnimatedContent

[vide]

Yes, that's how you determine if you want content to show or not

[vide]

targetState doesn't care about what your content is, it's completely up to you what to do with it inside

[vide]

(it's less opinionated than AnimatedVisibility, which determines it for you, but it's a bit hairy with nullable values)

[Colton Idle]

Interesting. Okay. so it seems like my final code is:

AnimatedContent(targetState = someState) {
    if (it != null) {
      MyUi(it)
    }
}

thanks!

[vide]

yes!

[Stylianos Gakis]

Ah okay. so it does work when “entering”, but not during exit.

Well yeah, if during exiting the state is set to null, and you render nothing, then there will be nothing to render 😄
In places like these I’ve just passed a nullable object into MyUi and then that component can handle the null cases too, which is basically from the first frame it starts animating out, until it’s actually out of composition. And that results in a nice animation out too.
It’s just a declarative UI thing, even as it’s animating out, you still need to tell it what it should look like.

[Zoltan Demant]

@Stylianos Gakis, can you elaborate on

In places like these I’ve just passed a nullable object into MyUi and then that component can handle the null cases too

Do you mean doing something like remembering the value so that it still exists for the out animation? Just curious, thats effectively what Ive been doing, but always fun to explore new ways!

[Stylianos Gakis]

In some cases it’s just that the component is ready to handle a null input. If it’s a card that shows some information, well, then it just shows no information, but keeps the height as it is.
So practically what you see as it’s animating out is that on the first frame, the content is gone, and it starts shrinking a bit, and then on the next frames you just continue showing nothing, and continue animating out.

Doing a remember, while also making sure to update the value when a new input comes which is not null, but not updating the value when the new input is null is also a possibility, which I would only do in places where the thing animating out is important enough to warrant all the extra work to have it “remember” the last valid input. Definitely makes the code harder to reason about only to bring in better animation support, but when it’s needed, then it’s worth it.

[Zoltan Demant]

Gotcha, agreed 👍🏽

[Colton Idle]

In this case, it seems to keep the content there while animating out, which is nice because thats the behavior i want.

[Stylianos Gakis]

That doesn't sound right. What does the real snippet look like?

[Colton Idle]

my final code is:

AnimatedContent(targetState = someState) {
if (it != null) {
MyUi(it)
}
}

[Ian Lake]

Yep, that'll keep it around all the way until it finishes animating out, even if nothing else outside of the AnimatedContent is keeping that object alive

[Colton Idle]

I swear I've been doing compose for a while but there's always something new to learn.