Key XYZ was used multiple times

[cerny-etnetera]

Since we started using predictiveBackAnimation for the Children element in Jetpack Compose, our app has started experiencing issues with the error "Key XYZ was used multiple times."

So far we have tried:

Updating the library to the beta version (3.5.0-beta01) – the release notes mention that the issue with "Key XYZ was used multiple times" should be fixed.

Using the Experimental API with ChildStack – the predictive back implementation should be more stable there.

Unfortunately, neither of these approaches helped. In Firebase, we can see a large number of crashes, and it seems that they often happen when the user sends the app to the background or brings it back to the foreground.

Unfortunately, we are not able to reproduce the issue locally while trying to debug it.

Has anyone experienced similar issues? If so, were you able to solve them while using predictive back animation?

We would appreciate any advice.

Thank you.

[arkivanov]

This is a known issue on versions older than 3.5.x. ChildStack and Children composable functions both used configuration class + configuration hash code as a child key for saving the UI state. The crash was happening when keys were clashing. This should indeed be fixed in 3.5.x, because now the child key is basically a UUID.

Can you share the error message and stack trace? And are you using the duplicate configurations feature?

[arkivanov]

Also, if you are registered in KotlinLang slack, there was a similar thread recently: https://kotlinlang.slack.com/archives/C03H3N51SKT/p1772505702111249?thread_ts=1772505702.111249&cid=C03H3N51SKT

[fabiawrc]

hello, here is stack trace of error:

Fatal Exception: java.lang.IllegalArgumentException: Key 7b42bf11-afeb-4024-bcc9-c923c4315927 was used multiple times 
      at androidx.compose.runtime.saveable.SaveableStateHolderImpl.SaveableStateProvider$lambda$0$1$0(SaveableStateHolderImpl.java:88)
      at androidx.compose.runtime.DisposableEffectImpl.onRemembered(Effects.kt:85)
      at androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberList(RememberEventDispatcher.java:256)
      at androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberObservers(RememberEventDispatcher.java:228)
      at androidx.compose.runtime.CompositionImpl.applyChangesInLocked(Composition.kt:1133)
      at androidx.compose.runtime.CompositionImpl.applyChanges(Composition.kt:1160)
      at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2.invokeSuspend$lambda$2(Recomposer.java:716)
      at androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame(AndroidUiFrameClock.android.kt:39)
      at androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch(AndroidUiDispatcher.java:108)
      at androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch(AndroidUiDispatcher.java:41)
      at androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame(AndroidUiDispatcher.android.kt:69)
      at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1386)
      at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1396)
      at android.view.Choreographer.doCallbacks(Choreographer.java:1033)
      at android.view.ChoreographerExtImpl.checkScrollOptSceneEnable(ChoreographerExtImpl.java:411)
      at android.view.Choreographer.doFrame(Choreographer.java:900)
      at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1371)
      at android.os.Handler.handleCallback(Handler.java:942)
      at android.os.Handler.dispatchMessage(Handler.java:99)
      at android.os.Looper.loopOnce(Looper.java:240)
      at android.os.Looper.loop(Looper.java:351)
      at android.app.ActivityThread.main(ActivityThread.java:8377)
      at java.lang.reflect.Method.invoke(Method.java)
      at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:584)
      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1013)

[arkivanov]

Ok, thanks. This is indeed the new version. It would be nice to have a reproducer, I will try to reproduce it as well.

[arkivanov]

Are you using the duplicate configurations feature?

[arkivanov]

And one more question: what stack animation are you using?

[cerny-etnetera]

No, we are not using the duplicate configurations feature. I initially thought it was intended only for duplicate configurations in the stack, so I assumed it was not relevant to this issue.

We are using a slightly modified version of PredictiveBackAnimation for the Children element provided by your library.

We adjust the modifiers and the background of the animated content so that when the user starts the animation, the background uses a solid color. In some cases the background needs to remain transparent because we use gradient headers. This approach prevents the gradient transition from being visually cut.

StackPredictiveBackAnimation(
            backHandler = backHandler,
            animation = stackAnimation(animator = slide()),
            selector = ({ initialBackEvent, _, _ ->
                materialPredictiveBackAnimatable(initialBackEvent = initialBackEvent)
            }),
            onBack = onBack,
        )

@OptIn(ExperimentalDecomposeApi::class)
class StackPredictiveBackAnimation<C : Any, T : Any>(
    private val backHandler: BackHandler,
    private val animation: StackAnimation<C, T>?,
    private val selector: (BackEvent, exitChild: Child.Created<C, T>, enterChild: Child.Created<C, T>) -> PredictiveBackAnimatable,
    private val onBack: () -> Unit,
) : StackAnimation<C, T> {

    @Composable
    override fun invoke(stack: ChildStack<C, T>, modifier: Modifier, content: @Composable (child: Child.Created<C, T>) -> Unit) {
        val activeKeys = remember { HashSet<Any>() }
        val handler = rememberHandler(stack = stack, isGestureEnabled = { activeKeys.size == 1 })
        val animationProvider = LocalStackAnimationProvider.current
        val anim = animation ?: remember(animationProvider, animationProvider::provide) ?: EmptyStackAnimation()

        val childContent =
            remember(content) {
                movableContentOf<Child.Created<C, T>> { child ->
                    key(child.key) {
                        content(child)
                        DisposableEffect(Unit) {
                            activeKeys += child.key
                            onDispose { activeKeys -= child.key }
                        }
                    }
                }
            }

        Box(modifier = modifier) {
            handler.items.forEach { item ->
                key(item.key) {
                    anim(
                        stack = item.stack,
                        modifier = Modifier
                            .fillMaxSize()
                            .then(item.modifier()),
                        content = childContent,
                    )
                }
            }

            if (handler.items.size > 1) {
                InputConsumingOverlay(modifier = Modifier.matchParentSize())
            }
        }

        if (stack.backStack.isNotEmpty()) {
            DisposableEffect(handler) {
                backHandler.register(handler)
                onDispose { backHandler.unregister(handler) }
            }
        }
    }


    @Composable
    private fun rememberHandler(stack: ChildStack<C, T>, isGestureEnabled: () -> Boolean): Handler<C, T> {
        val scope = key(stack) { rememberCoroutineScope() }

        return rememberWithLatest(stack) { previousHandler ->
            Handler(
                stack = stack,
                scope = scope,
                isGestureEnabled = isGestureEnabled,
                key = previousHandler?.items?.maxOf { it.key } ?: 0,
                selector = selector,
                onBack = onBack,
            )
        }
    }

    @OptIn(InternalDecomposeApi::class)
    @Composable
    private fun <T> rememberWithLatest(key: Any, supplier: (T?) -> T): T {
        val ref = remember { Ref<T?>(null) }
        val v = remember(key) { supplier(ref.value) }
        ref.value = v

        return v
    }

    private data class Item<out C : Any, out T : Any>(
        val stack: ChildStack<C, T>,
        val key: Int,
        val modifier: @Composable () -> Modifier = { Modifier },
    )

    private class Handler<C : Any, T : Any>(
        private val stack: ChildStack<C, T>,
        private val scope: CoroutineScope,
        private val isGestureEnabled: () -> Boolean,
        private val key: Int,
        private val selector: (BackEvent, exitChild: Child.Created<C, T>, enterChild: Child.Created<C, T>) -> PredictiveBackAnimatable,
        private val onBack: () -> Unit,
    ) : BackCallback() {
        var items: List<Item<C, T>> by mutableStateOf(listOf(Item(stack = stack, key = key)))
            private set

        private var animatable: PredictiveBackAnimatable? = null
        private var initialBackEvent: BackEvent? = null

        override fun onBackStarted(backEvent: BackEvent) {
            initialBackEvent = backEvent
        }

        override fun onBackProgressed(backEvent: BackEvent) {
            val initialBackEvent = initialBackEvent
            if ((initialBackEvent != null) && isGestureEnabled()) {
                val animatable = selector(initialBackEvent, stack.active, stack.backStack.last())
                this.animatable = animatable
                this.initialBackEvent = null

                items =
                    listOf(
                        Item(stack = stack.dropLast(), key = key + 1, modifier = { animatable.enterModifier }),
                        Item(stack = stack, key = key, modifier = { animatable.exitModifier.drawBehind {
                            drawRect(
                                color = darkPrimary,
                            )
                        } }),
                    )
            }

            scope.launch { animatable?.animate(backEvent) }
        }

        private fun <C : Any, T : Any> ChildStack<C, T>.dropLast(): ChildStack<C, T> =
            ChildStack(active = backStack.last(), backStack = backStack.dropLast(1))

        override fun onBack() {
            if (animatable == null) {
                onBack.invoke()
            } else {
                scope.launch {
                    animatable?.finish()
                    animatable = null
                    onBack.invoke()
                }
            }
        }

        override fun onBackCancelled() {
            scope.launch {
                animatable?.cancel()
                animatable = null
                items = listOf(Item(stack = stack, key = key))
            }
        }
    }

    @Composable
    fun InputConsumingOverlay(modifier: Modifier) {
        Box(modifier = modifier.pointerInput(Unit) {
            awaitPointerEventScope {
                while (true) {
                    val event = awaitPointerEvent()
                    event.changes.forEach { it.consume() }
                }
            }
        }
        )
    }


    private class EmptyStackAnimation<C : Any, T : Any> : StackAnimation<C, T> {

        @Composable
        override fun invoke(
            stack: ChildStack<C, T>,
            modifier: Modifier,
            content: @Composable (child: Child.Created<C, T>) -> Unit,
        ) {
            Box(modifier = modifier) {
                content(stack.active)
            }
        }
    }
}

Thank you.

[arkivanov]

@cerny-etnetera the crash message you provided, was it with Children composable or ChildStack? What stack animation were you using? Was it stackAnimation(...) or something else? Which overload variant? This will help a lot.

[kozakradovan-etnetera]

@arkivanov

• We uses ChildStack. The StackPredictiveBackAnimation composable takes a stack: ChildStack<C, T> as a parameter in its invoke method. It does not use the Children composable.
• We uses a custom StackAnimation implementation called StackPredictiveBackAnimation. This class is a wrapper that adds predictive back gesture handling around another, more conventional StackAnimation.

You can see the specific implementation in the code he sent @cerny-etnetera

[cerny-etnetera]

For clarification, we tried both approaches: using ChildStack and Children composables. The result was the same in both cases. The only change required from developers perspective was a small modification to StackPredictiveBackAnimation to match the ChildStack experimental API. Otherwise, everything remained the same.

For Children component (version 3.4.0) the stacktrace looks like this:

Fatal Exception: java.lang.IllegalArgumentException
Key ... .ui.navigation.BottomNavigationDestination.Home_-dqmok6 was used multiple times
androidx.compose.runtime.saveable.SaveableStateHolderImpl.SaveableStateProvider$lambda$0$1$0 (SaveableStateHolderImpl.java:88)
androidx.compose.runtime.DisposableEffectImpl.onRemembered (Effects.kt:85)
androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberList (RememberEventDispatcher.java:256)
androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberObservers (RememberEventDispatcher.java:228)
androidx.compose.runtime.CompositionImpl.applyChangesInLocked (Composition.kt:1133)
androidx.compose.runtime.CompositionImpl.applyChanges (Composition.kt:1160)
androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2.invokeSuspend$lambda$2 (Recomposer.java:716)
androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame (AndroidUiFrameClock.android.kt:39)
androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch (AndroidUiDispatcher.java:108)
androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch (AndroidUiDispatcher.java:41)
androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame (AndroidUiDispatcher.android.kt:69)
android.view.Choreographer$CallbackRecord.run (Choreographer.java:1299)
android.view.Choreographer$CallbackRecord.run (Choreographer.java:1309)
android.view.Choreographer.doCallbacks (Choreographer.java:923)
android.view.Choreographer.doFrame (Choreographer.java:847)
android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:1283)
android.os.Handler.handleCallback (Handler.java:942)
android.os.Handler.dispatchMessage (Handler.java:99)
android.os.Looper.loopOnce (Looper.java:226)
android.os.Looper.loop (Looper.java:313)
android.app.ActivityThread.main (ActivityThread.java:8762)
java.lang.reflect.Method.invoke (Method.java)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:604)
com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1067)

For Children component (version 3.5.0-beta01) the stacktrace looks like this:

Fatal Exception: java.lang.IllegalArgumentException
Key ... .ui.navigation.BottomNavigationDestination.Home_-dqmok6 was used multiple times
androidx.compose.runtime.saveable.SaveableStateHolderImpl.SaveableStateProvider$lambda$0$1$0 (SaveableStateHolderImpl.java:88)
androidx.compose.runtime.DisposableEffectImpl.onRemembered (Effects.kt:85)
androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberList (RememberEventDispatcher.java:256)
androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberObservers (RememberEventDispatcher.java:228)
androidx.compose.runtime.CompositionImpl.applyChangesInLocked (Composition.kt:1133)
androidx.compose.runtime.CompositionImpl.applyChanges (Composition.kt:1160)
androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2.invokeSuspend$lambda$2 (Recomposer.java:716)
androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame (AndroidUiFrameClock.android.kt:39)
androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch (AndroidUiDispatcher.java:108)
androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch (AndroidUiDispatcher.java:41)
androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame (AndroidUiDispatcher.android.kt:69)
android.view.Choreographer$CallbackRecord.run (Choreographer.java:1811)
android.view.Choreographer$CallbackRecord.run (Choreographer.java:1822)
android.view.Choreographer.doCallbacks (Choreographer.java:1340)
android.view.Choreographer.doFrame (Choreographer.java:1221)
android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:1796)
android.os.Handler.handleCallback (Handler.java:1027)
android.os.Handler.dispatchMessage (Handler.java:108)
android.os.Looper.loopOnce (Looper.java:298)
android.os.Looper.loop (Looper.java:408)
android.app.ActivityThread.main (ActivityThread.java:9952)
java.lang.reflect.Method.invoke (Method.java)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:613)
com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1074)

For ChildStack component (version 3.5.0-beta01 - using com.arkivanov.decompose:extensions-compose-experimental) the stacktrace looks like this:

Fatal Exception: java.lang.IllegalArgumentException
Key 7fcd33cf-af4c-4e85-8bd3-dcd868f0454a was used multiple times
androidx.compose.runtime.saveable.SaveableStateHolderImpl.SaveableStateProvider$lambda$0$1$0 (SaveableStateHolderImpl.java:88)
androidx.compose.runtime.DisposableEffectImpl.onRemembered (Effects.kt:85)
androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberList (RememberEventDispatcher.java:256)
androidx.compose.runtime.internal.RememberEventDispatcher.dispatchRememberObservers (RememberEventDispatcher.java:228)
androidx.compose.runtime.CompositionImpl.applyChangesInLocked (Composition.kt:1133)
androidx.compose.runtime.CompositionImpl.applyChanges (Composition.kt:1160)
androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2.invokeSuspend$lambda$2 (Recomposer.java:716)
androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame (AndroidUiFrameClock.android.kt:39)
androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch (AndroidUiDispatcher.java:108)
androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch (AndroidUiDispatcher.java:41)
androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame (AndroidUiDispatcher.android.kt:69)
android.view.Choreographer$CallbackRecord.run (Choreographer.java:1410)
android.view.Choreographer$CallbackRecord.run (Choreographer.java:1420)
android.view.Choreographer.doCallbacks (Choreographer.java:1047)
android.view.ChoreographerExtImpl.checkScrollOptSceneEnable (ChoreographerExtImpl.java:441)
android.view.Choreographer.doFrame (Choreographer.java:918)
android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:1395)
android.os.Handler.handleCallback (Handler.java:942)
android.os.Handler.dispatchMessage (Handler.java:99)
android.os.Looper.loopOnce (Looper.java:240)
android.os.Looper.loop (Looper.java:351)
android.app.ActivityThread.main (ActivityThread.java:8374)
java.lang.reflect.Method.invoke (Method.java)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:584)
com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1013)

I hope that it will help. Thank you.

[arkivanov]

Thank you for providing useful information. Currently, I suspect that something is wrong with the implementation of StackPredictiveBackAnimation, but for now I it's hard to say where exactly. One thing that catched my attention is that childContent calls content (which in turn uses the child key), but at the same time it calls anim and passes the entire stack there (which might be also rendering the same child second time). The overall problem is that sometimes the same child is rendered twice.

Another potential problem is that you are using movableContentOf, which is known to have bugs. There was one bug which actually produced the same crash: b/284078042. Unfortunately, it was never fixed. This is the primary reason why I'm replacing Children with ChildStack, the latter doesn't use movableContentOf.

I double checked the implementations in Decompose and couldn't find any technical possibility of rendering children twice. Would it be possible for you to confirm whether the problem is in Decompose or in StackPredictiveBackAnimation? Maybe you could run an ab-test, or just avoid using StackPredictiveBackAnimation for one release and see if the crash is still there.

[cerny-etnetera]

@arkivanov For the ChildStack component we had different implementation of the predictiveBack animation. We had to rewrite it to match the Decompose Experimental API. The app was still crashing (the last stacktrace I have previously sent).
The implementation looked like this.

// Using this inside ChildStack component
stackAnimation(
            animator = slide(),
            predictiveBackParams = {
                PredictiveBackParams(
                    backHandler = backHandler,
                    onBack = onBack,
                    animatable = ::materialPredictiveBackAnimatable
                )
            }
        )

@OptIn(ExperimentalDecomposeApi::class)
fun <C : Any, T : Any> stackAnimation(
    animator: StackAnimator? = fade(),
    disableInputDuringAnimation: Boolean = true,
    predictiveBackParams: (ChildStack<C, T>) -> PredictiveBackParams? = { null },
): StackAnimation<C, T> =
    DefaultStackAnimation(
        disableInputDuringAnimation = disableInputDuringAnimation,
        predictiveBackParams = predictiveBackParams,
        selector = { _, _, _, _ -> animator },
    )

@ExperimentalDecomposeApi
internal class DefaultStackAnimation<C : Any, T : Any>(
    private val disableInputDuringAnimation: Boolean,
    private val predictiveBackParams: (ChildStack<C, T>) -> PredictiveBackParams?,
    private val selector: (
        child: Child.Created<C, T>,
        otherChild: Child.Created<C, T>,
        direction: Direction,
        isPredictiveBack: Boolean,
    ) -> StackAnimator?,
) : StackAnimation<C, T> {

    @Composable
    override operator fun invoke(
        stack: ChildStack<C, T>,
        modifier: Modifier,
        content: @Composable StackAnimationScope.(child: Child.Created<C, T>) -> Unit,
    ) {
        var currentStack by remember { mutableStateOf(stack) }
        var items by remember { mutableStateOf(getAnimationItems(newStack = currentStack)) }
        var nextItems: Map<Any, AnimationItem<C, T>>? by remember { mutableStateOf(null) }
        val stackKeys = remember(stack) { stack.items.map { it.key } }
        val currentStackKeys = remember(currentStack) { currentStack.items.map { it.key } }

        if (stack != currentStack) {
            val oldStack = currentStack
            currentStack = stack

            val updateItems =
                when {
                    stack.active.key == oldStack.active.key ->
                        (items.keys.singleOrNull() != stack.active.key) ||
                                (items.values.singleOrNull()?.child?.instance != stack.active.instance)

                    items.size == 1 -> items.keys.single() != stack.active.key
                    else -> items.keys.toList() != stackKeys
                }

            if (updateItems) {
                val newItems = getAnimationItems(newStack = currentStack, oldStack = oldStack)
                if ((items.size == 1) || items.values.last().transitionState.isSeekable()) {
                    items = newItems
                } else {
                    nextItems = newItems
                }
            }
        }

        Box(modifier = modifier) {
            items.forEach { (key, item) ->
                key(key) {
                    Child(
                        item = item,
                        onFinished = {
                            if (item.direction.isExit) {
                                items -= key
                            } else {
                                items += (key to item.copy(animator = null))
                            }
                        },
                        content = content,
                    )

                    if (item.direction.isExit) {
                        DisposableEffect(Unit) {
                            onDispose {
                                nextItems?.also { items = it }
                                nextItems = null
                            }
                        }
                    }
                }
            }

            // A workaround until https://issuetracker.google.com/issues/214231672.
            // Normally only the exiting child should be disabled.
            if (disableInputDuringAnimation && ((items.size > 1) || (nextItems != null))) {
                Overlay(modifier = Modifier.matchParentSize())
            }
        }

        if (currentStack.backStack.isNotEmpty()) {
            val predictiveBackParams = remember(currentStackKeys) { predictiveBackParams(currentStack) }
            if (predictiveBackParams != null) {
                key(currentStackKeys) {
                    PredictiveBackController(
                        stack = currentStack,
                        predictiveBackParams = predictiveBackParams,
                        setItems = { items = it },
                    )
                }
            }
        }
    }

    @Composable
    private fun Child(
        item: AnimationItem<C, T>,
        onFinished: () -> Unit,
        content: @Composable StackAnimationScope.(child: Child.Created<C, T>) -> Unit
    ) {
        val transition = rememberTransition(item.transitionState)
        val isTransitionIdle = item.transitionState.isIdle()

        if (isTransitionIdle) {
            LaunchedEffect(Unit) {
                onFinished()
            }
        }

        WithStackAnimationScope(item.direction.takeUnless { isTransitionIdle }, transition) {
            Box(modifier = item.animator?.run { animate(item.direction) } ?: Modifier) {
                content(item.child)
            }
        }
    }

    @Composable
    internal fun WithStackAnimationScope(
        direction: Direction?,
        transition: Transition<EnterExitState>,
        block: @Composable StackAnimationScope.() -> Unit,
    ) {
        val directionState = rememberUpdatedState(direction)
        val transitionState = rememberUpdatedState(transition)
        val scope = remember(directionState, transitionState) { SimpleStackAnimationScope(directionState, transitionState) }
        scope.block()
    }


    private fun getAnimationItems(newStack: ChildStack<C, T>, oldStack: ChildStack<C, T>? = null): Map<Any, AnimationItem<C, T>> =
        when {
            (oldStack == null) || (newStack.active.key == oldStack.active.key) ->
                keyedItemsOf(
                    AnimationItem(
                        child = newStack.active,
                        direction = Direction.ENTER_FRONT,
                        transitionState = MutableTransitionState(EnterExitState.Visible),
                    )
                )

            (newStack.size < oldStack.size) && oldStack.backStack.any { it.key == newStack.active.key } ->
                keyedItemsOf(
                    AnimationItem(
                        child = newStack.active,
                        direction = Direction.ENTER_BACK,
                        transitionState = EnterExitState.PreEnter transitionTo EnterExitState.Visible,
                        otherChild = oldStack.active,
                    ),
                    AnimationItem(
                        child = oldStack.active,
                        direction = Direction.EXIT_FRONT,
                        transitionState = EnterExitState.Visible transitionTo EnterExitState.PostExit,
                        otherChild = newStack.active,
                    ),
                )

            else ->
                keyedItemsOf(
                    AnimationItem(
                        child = oldStack.active,
                        direction = Direction.EXIT_BACK,
                        transitionState = EnterExitState.Visible transitionTo EnterExitState.PostExit,
                        otherChild = newStack.active,
                    ),
                    AnimationItem(
                        child = newStack.active,
                        direction = Direction.ENTER_FRONT,
                        transitionState = EnterExitState.PreEnter transitionTo EnterExitState.Visible,
                        otherChild = oldStack.active,
                    ),
                )
        }

    @ExperimentalDecomposeApi
    @Composable
    private fun PredictiveBackController(
        stack: ChildStack<C, T>,
        predictiveBackParams: PredictiveBackParams,
        setItems: (Map<Any, AnimationItem<C, T>>) -> Unit,
    ) {
        val scope = rememberCoroutineScope()

        val callback =
            remember {
                PredictiveBackCallback(
                    stack = stack,
                    scope = scope,
                    predictiveBackParams = predictiveBackParams,
                    setItems = setItems,
                )
            }

        DisposableEffect(predictiveBackParams.backHandler, callback) {
            predictiveBackParams.backHandler.register(callback)

            onDispose {
                scope.cancel() // Ensure the scope is cancelled before unregistering the callback
                predictiveBackParams.backHandler.unregister(callback)
            }
        }
    }

    private fun AnimationItem(
        child: Child.Created<C, T>,
        direction: Direction,
        transitionState: TransitionState<EnterExitState>,
        otherChild: Child.Created<C, T>,
        isPredictiveBack: Boolean = false,
        predictiveBackAnimator: StackAnimator? = null,
    ): AnimationItem<C, T> =
        AnimationItem(
            child = child,
            direction = direction,
            transitionState = transitionState,
            animator = predictiveBackAnimator ?: selector(child, otherChild, direction, isPredictiveBack),
        )

    private inner class PredictiveBackCallback(
        private val stack: ChildStack<C, T>,
        private val scope: CoroutineScope,
        private val predictiveBackParams: PredictiveBackParams,
        private val setItems: (Map<Any, AnimationItem<C, T>>) -> Unit,
    ) : BackCallback() {
        private var animationHandler: AnimationHandler? = null
        private var initialBackEvent: BackEvent? = null

        override fun onBackStarted(backEvent: BackEvent) {
            initialBackEvent = backEvent
        }

        override fun onBackProgressed(backEvent: BackEvent) {
            startIfNeeded()

            scope.launch {
                animationHandler?.progress(backEvent)
            }
        }

        private fun startIfNeeded() {
            val backEvent = initialBackEvent ?: return
            initialBackEvent = null

            val animationHandler = AnimationHandler(animatable = predictiveBackParams.animatable(backEvent))
            this.animationHandler = animationHandler
            val exitChild = stack.active
            val enterChild = stack.backStack.last()

            setItems(
                keyedItemsOf(
                    AnimationItem(
                        child = enterChild,
                        direction = Direction.ENTER_BACK,
                        transitionState = animationHandler.enterTransitionState,
                        otherChild = exitChild,
                        isPredictiveBack = true,
                        predictiveBackAnimator = animationHandler.animatable?.let { anim -> SimpleStackAnimator { anim.enterModifier } },
                    ),
                    AnimationItem(
                        child = exitChild,
                        direction = Direction.EXIT_FRONT,
                        transitionState = animationHandler.exitTransitionState,
                        otherChild = enterChild,
                        isPredictiveBack = true,
                        predictiveBackAnimator = animationHandler.animatable?.let { anim -> SimpleStackAnimator { anim.exitModifier.drawBehind {
                            drawRect(
                                color = darkPrimary,
                            )
                        }}}
                    ),
                )
            )

            scope.launch {
                animationHandler.progress(backEvent)
            }
        }

        override fun onBackCancelled() {
            initialBackEvent = null

            scope.launch {
                animationHandler?.also { handler ->
                    handler.cancel()
                    animationHandler = null
                    setItems(getAnimationItems(newStack = stack))
                }
            }
        }

        override fun onBack() {
            initialBackEvent = null

            scope.launch {
                animationHandler?.also { handler ->
                    handler.finish()
                    animationHandler = null
                    setItems(getAnimationItems(newStack = stack.dropLast()))
                }

                predictiveBackParams.onBack()
            }
        }
    }

    private class AnimationHandler(
        val animatable: PredictiveBackAnimatable?,
    ) {
        val exitTransitionState: SeekableTransitionState<EnterExitState> = SeekableTransitionState(EnterExitState.Visible)
        val enterTransitionState: SeekableTransitionState<EnterExitState> = SeekableTransitionState(EnterExitState.PreEnter)

        suspend fun progress(backEvent: BackEvent) {
            animatable?.run {
                animate(backEvent)
                return@progress // Don't animate transition states on back progress if there is PredictiveBackAnimatable
            }

            awaitAll(
                { exitTransitionState.seekTo(fraction = backEvent.progress, targetState = EnterExitState.PostExit) },
                { enterTransitionState.seekTo(fraction = backEvent.progress, targetState = EnterExitState.Visible) },
            )
        }

        suspend fun cancel() {
            awaitAll(
                { exitTransitionState.snapTo(EnterExitState.Visible) },
                { enterTransitionState.snapTo(EnterExitState.PreEnter) },
                { animatable?.cancel() },
            )
        }

        suspend fun finish() {
            awaitAll(
                { exitTransitionState.animateTo(EnterExitState.PostExit) },
                { enterTransitionState.animateTo(EnterExitState.Visible) },
                { animatable?.finish() },
            )
        }
    }
}

@Composable
private fun Overlay(modifier: Modifier) {
    Box(
        modifier = modifier.pointerInput(Unit) {
            awaitPointerEventScope {
                while (true) {
                    val event = awaitPointerEvent()
                    event.changes.forEach { it.consume() }
                }
            }
        },
    )
}

@ExperimentalDecomposeApi
private data class AnimationItem<out C : Any, out T : Any>(
    val child: Child.Created<C, T>,
    val direction: Direction,
    val transitionState: TransitionState<EnterExitState>,
    val animator: StackAnimator? = null,
)

@ExperimentalDecomposeApi
private fun <C : Any, T : Any> keyedItemsOf(vararg items: AnimationItem<C, T>): Map<Any, AnimationItem<C, T>> =
    items.associateBy { it.child.key }

/*
 * Can't be anonymous. See:
 * https://github.com/JetBrains/compose-jb/issues/2688
 * https://github.com/JetBrains/compose-jb/issues/2612
 */
@ExperimentalDecomposeApi
private class SimpleStackAnimator(
    private val modifier: () -> Modifier,
) : StackAnimator {
    @Composable
    override fun StackAnimationScope.animate(direction: Direction): Modifier =
        modifier()
}

private infix fun <S> S.transitionTo(targetState: S): MutableTransitionState<S> =
    MutableTransitionState(this).apply {
        this.targetState = targetState
    }


private fun TransitionState<*>.isIdle(): Boolean =
    when (this) {
        is MutableTransitionState -> isIdle
        is SeekableTransitionState -> false
        else -> false
    }

private fun TransitionState<*>.isSeekable(): Boolean =
    this is SeekableTransitionState

@OptIn(ExperimentalDecomposeApi::class)
private class SimpleStackAnimationScope(
    directionState: State<Direction?>,
    transitionState: State<Transition<EnterExitState>>,
) : StackAnimationScope {
    override val stackAnimationDirection: Direction? by directionState::value
    override val transition: Transition<EnterExitState> by transitionState::value
}

internal suspend inline fun awaitAll(vararg jobs: suspend CoroutineScope.() -> Unit) {
    coroutineScope {
        jobs.map { launch(block = it) }.joinAll()
    }
}

internal fun <C : Any, T : Any> ChildStack<C, T>.dropLast(): ChildStack<C, T> =
    ChildStack(active = backStack.last(), backStack = backStack.dropLast(1))

internal val ChildStack<*, *>.size: Int get() = items.size

[cerny-etnetera]

The custom implementations are almost the same as yours (inside the library) the only change we have added was small drawBehind update to make sure that animated content always had a background (it was the same for both ChildStack and Children element.

predictiveBackAnimator = animationHandler.animatable?.let { anim -> SimpleStackAnimator { anim.exitModifier.drawBehind {
                            drawRect(
                                color = darkPrimary,
                            )
                        }}}

[arkivanov]

Thanks for sharing. I will try to reproduce, but so far there was no luck. If you could attach a reproducer, that would help a lot. Not sure if I can do anything otherwise. Checked our apps, crashes are gone since Decompose 3.5.x update.