How to save BottomNav screens state (when using StackNavigation)

[sardormobile]

In the project I'm currently working on, there are 3 BottomNav items: Home, Chats, Docs. It's always drawn a new Screen whenever I switch screens. I want each screen to retain its last state. Is this possible?

[arkivanov]

Assuming you are using Child Stack for your tabs, you can switch tabs using either bringToFront or pushToFront. It will keep the components in the stack preserving their states. See the sample:

Decompose/sample/shared/shared/src/commonMain/kotlin/com/arkivanov/sample/shared/tabs/DefaultTabsComponent.kt

Line 84 in 537dfbf

nav.bringToFront(Config.Menu)

[sardormobile]

bringToFront and pushToFront work very well for preserving the stack. To preserve the UI state as well, I did the following and it worked:

interface ChatListComp {
    val listState: LazyListState
    val textState: MutableState<String>
}

class ChatListCompImpl(
    context: ComponentContext
) : ComponentContext by context, ChatListComp {
    override val listState = LazyListState()
    override val textState = mutableStateOf("")
}

is this a good approach?

[arkivanov]

Oh, the UI state should also be preserved automatically if you use Children {} or ChildStack {} Composable function. See the example:

Decompose/sample/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/tabs/TabsContent.kt

Line 52 in 537dfbf

Children(

[sardormobile]

In the example, It is wrapped in Children(){}. Now everything works fine. Thank you very much👌👌👌

   Scaffold(...) { innerPadding ->
        Children(
            modifier = Modifier.safeContentPadding(),
            stack = component.childStack
        ) {
            Box(modifier = Modifier.padding(innerPadding)) {
                when (val child = activeChild) {
                    is MainComp.Child.ChatList -> ChatsScreen(child.component)
                    is MainComp.Child.Docs -> DocsScreen(child.component)
                    is MainComp.Child.Home -> HomeScreen()
                }
            }
        }
    }