if i want to use animatedVisibility when some data is not null. Is this safe and correct to do?

# compose

[myanmarking]

if i want to use animatedVisibility when some data is not null. Is this safe and correct to do?

[myanmarking]

val item: Item?

AnimatedVisibility(item != null){
val item = checkNotNull(item)
Composable(item)
}

[Timo Drick]

I just had a similar problem. And no that does not work.
Because the content is also rendered when you have the transition animation. And than the item is null

[Timo Drick]

Workaround could be to use AnimatedContent instead. But it is a little bit more complex to use.

[MR3Y]

Have you tried this?:

if(item != null) {
    AnimatedVisibility(
    visibleState = remember { MutableTransitionState(false).apply{
    targetState = true
}
}
    ) { ... }
}

it should animate the item directly once it enters the composition tree

[Timo Drick]

But this works only in one direction right? So when item is null again it disappears without an animation.

[MR3Y]

But you can apply the same concept again, just negate the condition in if, and you would get an animation for disappearing as well

[Timo Drick]

I don't understand how this should solve the problem that the item is null when it should slowly disappear. You need the item to be the old value until it is completely disappeared.

[MR3Y]

yeah, that would be the problem! I didn't thought about the item content here, so in this case you would have to cache the old value and clear that cache after finishing animation Or use AnimatedContent as you said ☝️

[Timo Drick]

But in general i think it would be cool in many cases to have such a compose component. So you give it a state and when the state is null it will animate the visibility to invisible and vice versa.