How to track compose screens

[Foenix00001]

Hi, could you please tell me, how I can track jetpack compose screens , using decompose? This is like navController.addOnDestinationChangedListener in google navigation library for logging event "user entered screen XXX". Please, give an idea.

[arkivanov]

You can observe navigation state changes as follows:

class DefaultRootComponent(
    componentContext: ComponentContext,
) : RootComponent, ComponentContext by componentContext {
    private val navigation = StackNavigation<Config>()

    private val _stack =
        childStack(
            source = navigation,
            serializer = Config.serializer(),
            initialStack = ...,
            childFactory = ::child,
        )

    override val stack: Value<ChildStack<*, Child>> = _stack

    init {
        var lastActiveConfig: Config? = null
        _stack.subscribe {
            val activeConfig = it.active.configuration
            if (activeConfig != lastActiveConfig) {
                lastActiveConfig = activeConfig
                // Track the active screen here
            }
        }
    }

You can also convert Value<ChildStack> to Observable or Flow (e.g. by creating a custom extension function) and leverage operators like distinct for better readability.

[Foenix00001]

thank you!