Hi guys and <@UHAJKUSTU>, I have a question Let's ...

# decompose

[Andrey Larionov]

Hi guys and @Arkadii Ivanov, I have a question
Let's say each BottomNavigation tab (ExploreRootScreen, WalletRootScreen and ProfileRootScreen) has it's own ChildStack

@Composable
internal fun HomeRootScreen(component: HomeRootComponent) = Box(
    modifier = Modifier.fillMaxSize()
) {
    StackContent(component)
    BottomNavigation(component)
}

@Composable
private fun StackContent(component: HomeRootComponent) {
    val homeStack by component.stackRouter.subscribeAsState()
    Children(
        // ...
        content = { childStack -> childStack.instance.getContentByChild() }
    )
}

@Composable
private fun HomeRootChild.getContentByChild() = when (this) {
    // ...
    is ProfileRootChild -> ProfileRootScreen(this) // with ProfileRootComponent
}

BottomNavigation is drawn over StackContent using Alignment.Bottom
If we need to display a Dialog (ChildSlot) somewhere deep inside of tab's ChildStack, it should be drawn above BottomNavigation

I created a diagram where LogoutDialog and SwitchLanguageDialog (marked with yellow color) should appear. Each child in the diagram (marked with blue, yellow and pink colors) has it's own ChildComponent (e.g, LanguageComponent and SwitchLanguageComponent)

And as I understand Decompose, for SwitchLanguageDialog I should create ChildSlot inside LanguageComponent and this Dialog should be displayed on LanguageScreen
That's ok, but it will be drawn under the BottomNavigation

I assume I could create ChildSlot at HomeRootComponent level, but
• I'm not sure how to handle different children from different nested screens (e.g, using activeSlotChild: Flow<BaseSlotChild> seems odd due to a large when check)
• I don't know if this approach would break children back navigation (e.g, when Dialog is displayed, using system back swipe might trigger ChildStack 's backHandler)
How should I handle this properly?
Thanks in advance

[Arkadii Ivanov]

Material 3 dialogs are shown in a separate Window, so on top of everything. Same with modal bottom sheets. I guess this should be fine. For regular kinds of dialogs you can probably leverage the UI framework to show dialogs on top of everything. There should be no need to extract this to the upper level. With Compose it should be possible to implement via Composition Locals.

[Andrey Larionov]

We use custom dialogs, so they haven't be drawn in a separate Window

Fixed this by wrapping the custom dialog in a Popup

Popup(
    onDismissRequest = onDismissRequest,
    properties = PopupProperties(
        focusable = true,
        clippingEnabled = false,
        dismissOnBackPress = true,
        dismissOnClickOutside = false
    )
) {
    // Full screen dialog content
}

and now it works as expected

Thank you so much!