When the app is closed then the subscribeAsState() doesn't work

[giorgioprovenzale]

I have a simple app with tab bar navigation.
The navigation is done with bringToFront API

fun onTabChange(tab: String) {
        tabsNavigation.bringToFront(
            when (tab) {
                "home" -> TabsConfigs.HeadlinesConfig
                "source" -> TabsConfigs.SourcesConfig
                else -> TabsConfigs.CategoriesConfig
            }
        )
    }

It works properly, the state is updated and the active tab is highlighted correctly.

clicking back I use pop() to go back and then in the end the app is closed. Once I open it again the state is not updated correctly.
When I click on another tab the tab is not highlighted anymore and the Child is not shown correctly.

What can be the issue?

Here a screen recording

Screen_recording_20240402_184647.mp4

[arkivanov]

It's hard to say what's the reason without the UI part of the code, or a reproducer. Would you be able to provide? You can also check the sample, I believe it works fine.

[giorgioprovenzale]

also with handleBackButton = true I have the same behaviour

RootComponent

class RootComponent(
    private val componentContext: ComponentContext,
    private val domainComponent: DomainComponent,
) : ComponentContext by componentContext {

    private var tabsNavigation: StackNavigation<TabsConfigs> = StackNavigation<TabsConfigs>()

    lateinit var tabsStack: Value<ChildStack<TabsConfigs, Child.TabsChild>>

    private val initialState: RootState
        get() = RootState(
            selectedTab = "home",
        )

    private val _state = MutableValue<RootState>(initialState)
    val state: Value<RootState> = _state

    init {
        tabsStack = childStack(
            source = tabsNavigation,
            serializer = TabsConfigs.serializer(),
            initialConfiguration = TabsConfigs.HeadlinesConfig,
            handleBackButton = true,
            childFactory = ::tabsChildFactory,
            key = "tabs"
        )
        tabsStack.observe { stack ->
            _state.update {
                it.copy(
                    selectedTab = when (stack.active.instance) {
                        is Child.TabsChild.CategoriesList -> "category"
                        is Child.TabsChild.Headlines -> "home"
                        is Child.TabsChild.SourcesList -> "source"
                    }
                )
            }
        }
    }

    private fun tabsChildFactory(config: TabsConfigs, componentContext: ComponentContext): Child.TabsChild {
        return when (config) {
            is TabsConfigs.HeadlinesConfig -> Child.TabsChild.Headlines(
                HeadlinesComponent(componentContext, domainComponent.articlesRepository) { item ->
                }
            )

            is TabsConfigs.SourcesConfig -> Child.TabsChild.SourcesList(
                SourcesComponent(componentContext)
            )

            TabsConfigs.CategoriesConfig -> Child.TabsChild.CategoriesList(
                CategoriesComponent(componentContext)
            )
        }
    }

    fun onTabChange(tab: String) {
        tabsNavigation.bringToFront(
            when (tab) {
                "home" -> TabsConfigs.HeadlinesConfig
                "source" -> TabsConfigs.SourcesConfig
                else -> TabsConfigs.CategoriesConfig
            }
        )
    }
}

RootContent

@Composable
fun RootContent(
    component: RootComponent,
    modifier: Modifier = Modifier
) {
    val state = component.state.subscribeAsState()

    MaterialTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.primary)
                .windowInsetsPadding(WindowInsets.safeDrawing)
        ) {
            Scaffold(
                topBar = {
                    TopAppBar(
                        title = { Text(text = state.value.selectedTab) },
                    )
                },
                bottomBar = {
                    BottomNavigation(
                    ) {
                        BottomNavigationItem(
                            icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
                            onClick = { component.onTabChange("home") },
                            selected = state.value.selectedTab == "home"

                        )
                        BottomNavigationItem(
                            icon = { Icon(Icons.Default.AccountCircle, contentDescription = "Source") },
                            onClick = { component.onTabChange("source") },
                            selected = state.value.selectedTab == "source"
                        )
                        BottomNavigationItem(
                            icon = { Icon(Icons.Default.Info, contentDescription = "Category") },
                            onClick = { component.onTabChange("category") },
                            selected = state.value.selectedTab == "category"
                        )
                    }
                }
            ) {

                Box(
                    modifier = Modifier.fillMaxSize().background(Color.LightGray)
                ) {
                    Children(
                        stack = component.tabsStack,
                        modifier = modifier,
                        animation = stackAnimation(fade())
                    ) {
                        when (val child = it.instance) {
                            is Child.TabsChild.CategoriesList -> CategoriesContent(child.component)
                            is Child.TabsChild.Headlines -> HeadlinesContent(child.component)
                            is Child.TabsChild.SourcesList -> SourcesContent(child.component)
                        }
                    }
                }
            }
        }

    }
}

[arkivanov]

The code looks good, I don't see any issues currently. How do you create your RootComponent and the root component context?

Also, since you exposed tabsStack property, you don't need RootState#selectedTab property, as you can just observe tabsStack in the UI.

[giorgioprovenzale]

I use Koin for DI, so the RootComponent is created in CommonModule

fun commonModule() = networkModule() + module {

    single {
        ArticlesRepository(getHeadlinesArticles = get())
    }

    single {
        DomainComponent(
            articlesRepository = get()
        )
    }

    single<RootComponent> {
        RootComponent(
            componentContext = get(),
            domainComponent = get()
        )
    }

}

and in the MainActivity I have:

private val modules = module {
        single<ComponentContext> { defaultComponentContext() }
    }

    init {
        loadKoinModules(modules)
    }

    private val rootComponent: RootComponent by inject() 

[giorgioprovenzale]

@arkivanov I noticed that the issue is when the stack is updated, after the app comes from background:

when the bringToFront() is invoked, the active child in the stack is not updated and the result is shown on the video on this thread. The same behaviour is present with push()

[arkivanov]

Thanks, I can't 100% confirm correctness, but looks fine. Please double check the following:

1. There is only one instance of the root ComponentContext per Activity.
2. The root ComponentContext is only passed to RootComponent and not passed to any other component.
3. There is only one instance of RootComponent per Activity.

If the issue is still there, it would be nice to have a complete reproducer for this issue.

[giorgioprovenzale]

I have created a public repository
https://github.com/giorgioprovenzale/KmpNewsAppPublic

• clone it
• add secrets.properties file in composeApp folder with API_KEY=85fa006719c142d5bafbe96f38c8782e
• run ./gradlew generateBuildKonfig
  then you can sync/build and run the app

[OsmanMusse]

Hi giorgio, the public repository link you posted doesn't work

[arkivanov]

Thank you for the reproducer! Turned out your RootComponent is a singleton - the same instance is reused across different instances of the MainActivity, but the lifecycle is destroyed when the activity is finished. Please make sure you have setup your Koin DI correctly.

There are two options:

1. Recommended - every Activity should have its own instance of the root ComponentContext and root component, see the docs.
2. Alternative - use retained components, see the docs.

[giorgioprovenzale]

thanks @arkivanov I solved the issue on Android using retained components initializing RootComponent in the MainActivity.

Can you please provide the documentation for iOS? How I should init RootComponent in iOS?

[arkivanov]

For iOS and other platforms you can check Quick Start docs. You can also check the sample iOS app.

[giorgioprovenzale]

Hello, yes I solved it also on iOS. Using Koin I had to change something but now it works as expected. I used the experimental ApplicationLifecycle which simplifies a lot of the logic.

if you want I can share the base project to see how to include Decompose with Koin and have also a simple DomainComponent injected in the RootComponent.

anyway, Thank you very much 🙂

[arkivanov]

Thanks for the update! Feel free to add your project to the Used By list. I will also convert this issue to a QnA discussion, so that it could be discovered later.