A modern programming language that makes developers happier.

kotlinlang

<@UHAJKUSTU> I want to track ScreenName for Analytics purpose,
I have a 3 layer nested Navigation hierarchy
So Root Level Screens, it has a HomeScreen which has bottom navigation, and then each bottom nav tab has a Pager in it.

How would you suggest achieving ScreenName tracking in such a multi layer nav structure ?

One way I could think of is listening to the activeItem changes in childPages and childStack, but will that handle proper name change when a back navigation happens in a layer above.

Do you mean tracking every screen opening, or attaching a screen name to every event.

Tracking every screen change in all layers of navigation, also Root Screen should ignore tracking for HomeScreen as it has a nested nav, this i think can be done by simply using flow filter operator 

I have a `analyticsScreenName` property in my ScreenConfig sealed interfaces

I currently have setup in all navigations
```childStackFlow
    .mapLatest { it.active }
    .filterNot { it.instance.hasNestedNavigation }
    .mapLatest { it.instance.analyticsScreenName to it.configuration.landedAnalyticsProps }
    .onEach { (name, props) -&gt; Analytics.trackLanded(name, props) }
    .safeCatch()
    .launchIn(scope)```
but if lets say RootNav navigates from HomeScreen to another screen and comes back to home, this same code in HomeComponent is not called, and the screen Name is not tracked

I have this in my HomeComponent's `init` block
```childStack.toStateFlow()
    .map { it.active.instance }
    .onEach { Analytics.trackLanded(it.analyticsScreenName) }
    .launchIn(componentScope)```

It's not possible to somehow globally observe all screen changes. I think it might make sense to inject a tracker to every component with navigation and create an extension function to subscribe to navigation changes and track. You can also define a custom ComponentContext with the tracker included in it, so that every component automatically has access to the tracker.

That sounds interesting, i wont have to repeat this code everywhere

My current setup works fine, its just that on Back navigation in RootNav, the flow does so trigger again in HomeComponent, so the screen name is not updated

At root level all screen name change works fine, its just for the nested nav

I think its more of a kotlin flow related problem

Maybe adding the collection in the doOnStart method start it again when HomeComponent becomes the active child after back nav and the stateflow would emit the last value, but would that lead to multiple flow collectors being added?

You can try to just usie doOnStart on every screen that needs tracking.