Help: Not able to make generic navigation make work in pager like impl.

[Shabinder]

Let me give some context on the arch of components in said Impl.

Components Types:

• Container
• Child (does not host any kind of nav)

For example:

RootComponent: 3 Tabs (A, B, C) (one is active, others are inactive in ChildNavState, but child stored in a concurrent map)

 private val activeChildren: MutableMap<Config, Child> = ConcurrentMutableMap()
    private val navigation =
        SimpleNavigation<(NavState) -> NavState>()

    override val activeChild: Value<ChildElement<Config, Child>> = children(
        source = navigation,
        key = "MainWindow",
        initialState = { NavState(Config.A) },
        navTransformer = { state, transformer -> transformer(state) },
        stateMapper = { state, children ->
            ChildElement(
                active = children
                    .first { it.configuration == state.activeChild }
                        as DecomposeChild.Created
            )
        },
        backTransformer = {
            it.takeIf { it.activeChild != Config.A }?.let {
                { it.copy(activeChild = Config.A) }
            }
        },
        childFactory = { config, componentContext ->
            child(config) { componentContext }
        }
    )

    private fun child(config: Config, componentContext: () -> ComponentContext): Child {
        return activeChildren[config] 
                          ?: when (config) { ...create component }.also { activeChildren[config] = it }

All works good if I host Stack or Overlay in A / B / C, back works as expected.

BUT as soon as I create another simpleNavigation source just like above in a container lets say B and C,
Where B hosts D,E,F child.
and C hosts G,H Child.

Now back navigation breaks.

Example Code for using navigation in B / C.

private val initialChild = Config.D
private val activeChildren: MutableMap<Config, Child> =
        ConcurrentMutableMap()

    private val navigation =
        SimpleNavigation<(NavState) -> NavState>()

    override val activeChild: Value<ChildElement<Config, Child>> = children(
        source = navigation,
        key = "MainBWindow",
        initialState = { NavState(initialChild) },
        navTransformer = { state, transformer ->
            transformer(state)
        },
        stateMapper = { state, children ->
            ChildElement(
                active = children
                    .first { it.configuration == state.activeChild }
                        as DecomposeChild.Created
            )
        },
        backTransformer = {
            // Only `F` is treated as a child,
            //  `D` and `E` are as treated as parents in this component
           // So back button should only navigate back if F is there, else back will be passed to root.
            it.takeIf { it.activeChild == Config.F }?.let {
                { it.copy(activeChild = initialChild) }
            }
        },
        childFactory = { config, componentContext ->
            child(config) { componentContext }
        }
    )

fun child(config: Config, componentContext: () -> ComponentContext): Child {
        return activeChildren[config] 
                         ?: when (config) { ...create component }.also {
                                      activeChildren[config] = it
                              }

After having above, back button just exits the whole app.

If above is not clear, can give more details or add as a contributor in the repo(private as of now), so can checkout the real code.

Any help is appreciated.

[arkivanov]

Hello! Yes, a reproducer project would be much easier to understand and debug. Would it possible to provide one?

[Shabinder]

Yes, sending u a contributor invitiation.

[Shabinder]

sent ✅

[arkivanov]

Turned out that the child components in the root Generic Navigation were always INACTIVE, so they couldn't intercept the back button.