Inject ChildStack from ChildComponent into Parent

[chennemann]

I'm currently trying to wrap my head around shared-element-transitions and I stumbled upon a chicken-egg problem. The following is a prototype of what I'm trying to build. It's not quite there yet thought. What I want to achieve is that the detail screen covers the whole screen instead of only the portion of the screen it's ParentComponent covers:

video_2025-06-06_15-00-05.mp4

The current structure is as follows:

RootComponent - full screen, responsible for managing the paging navigation
(this NavigationPager is a custom implementation that can not rely on the Pages Composable because of the page transition when a page is skipped (see video))
The corresponding content looks like this:

fun HomeScreen(component: RootComponent) {

    val pages by component.pages.subscribeAsState()
    val selectedPage = pages.selectedIndex
    val pagerState = rememberNavigationPagerState(
        initialPage = component.initialPage,
        pageCount = { pages.items.size }
    )
    
    // Sync pager state with Decompose pages
    LaunchedEffect(selectedPage) {
        if (pagerState.currentPage != selectedPage) {
            pagerState.animateToPage(selectedPage)
        }
    }

    // Sync Decompose pages with pager state
    LaunchedEffect(selectedPage, pagerState.currentPage) {
        if (selectedPage != pagerState.currentPage) {
            component.selectPage(pagerState.currentPage)
        }
    }

    NavigationPagerScaffold(
        pagerState,
        Modifier.fillMaxSize().padding(bottom = 12.dp),
        content = { pageIndex ->
            val page = pages.items[pageIndex]
            when (val child = page.instance) {
                // other components ommitted
                is RootComponent.Child.Finances -> FinancesRootScreen(child.component)
                else -> throw IllegalStateException("Unknown page: $child")
            }
        },
        bottomBar = {
            NavigationPagerTabContainer(
                state = pagerState,
                onPageActivationRequest = component::selectPage
            ) { pageIndex ->
                val page = pages.items[pageIndex]
                when (val child = page.instance) {
                    // other components ommitted
                    is RootComponent.Child.Finances -> NavigationItem(
                        stringResource(Res.strings.bottom_navigation_finances_label),
                        painterResource(Res.images.wallet)
                    )
                    else -> throw IllegalStateException("Unknown page: $child")
                }
            }
        }
    )
}

Each page is a separate Component (of course) as is the FinancesRootComponent (with the 'Wallet' label).
This component (currently) contains a ChildStack for which I implemented the shared-element-transition.
The corresponding content looks like this:

fun FinancesRootScreen(component: FinancesRootComponent) {
    SharedTransitionLayout {
        ChildStack(
            stack = component.childStack,
            modifier = Modifier.fillMaxSize(),
            animation = stackAnimation(
                animator = fade() + scale(),
                predictiveBackParams = {
                    PredictiveBackParams(
                        backHandler = component.backHandler,
                        onBack = component::onBack,
                    )
                },
            ),
        ) {
            when (val child = it.instance) {
                is FinancesRootComponent.Child.Overview -> FinancesScreen(
                    child.component,
                    animatedVisibilityScope = this,
                    sharedTransitionScope = this@SharedTransitionLayout
                )
                is FinancesRootComponent.Child.AccountDetails -> AccountDetailsScreen(
                    child.component,
                    animatedVisibilityScope = this,
                    sharedTransitionScope = this@SharedTransitionLayout
                )
            }
        }
    }
}

Each Account is bound to another Component which is handled as LazyChildItems (I got that from the sample decompose app).

The problem I am facing now is the following:

As mentioned in the beginning I want to open the 'AccountDetailsScreen in Fullscreen on top of the 'NavigationPagerScaffold' of the 'HomeScreen'.
However to make the shared-element-transition work I need access to the AnimatedVisibilityScope which I get from the ChildStack of the FinancesRootScreen (see above).

Which brings me to the question of the title.
A somewhat hacky way to solve that problem (maybe) would be to implement some kind of mechanism that allows my "ChildRootComponents" (e.g. the pages of the top level NavigationPager/FinancesRootComponent) to inject the composables into a slot in the root view. But I have no clue if that is even possible.

My hope is that I somehow just got something wrong about my mental model of how those components are supposed to be structured.
Does anyone has some clues for me as to how I could approach this?

If that would help I could probably also supply a sample repo that reflects the current state.

Thanks.

P.S. As I wrote this I thought that maybe the real kicker is that I rely on the AnimatedVisibilityScope of the ChildStack Composable. Is it somehow possible to provide a custom scope myself that I pass down myself? In that case I might be able to restructure my component tree in a way that the details screen is a direct child of the root component (similar to the sample app).

[arkivanov]

I think you need to have a separate component for the fullscreen stack. It could be as follows:

RootComponent (contains `ChildStack`)
|- HomeComponent (contains `ChildPages`)
|  |- FinancesComponent
|- AccountDetailsComponent

You can pass SharedTransitionScope and AnimatedVisibilityScope from the root Composable toAccountDetailsScreen and to FinancesScreen through HomeScreen. You can also define a Composition Local for this to simplify the code.

@OptIn(ExperimentalSharedTransitionApi::class)
val LocalSharedTransitionScope: ProvidableCompositionLocal<SharedTransitionScope> =
    compositionLocalOf { error("LocalSharedTransitionScope was not provided") }

val LocalAnimatedVisibilityScope: ProvidableCompositionLocal<AnimatedVisibilityScope> =
    compositionLocalOf { error("LocalAnimatedVisibilityScope was not provided") }

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun SharedTransitionsScope(
    content: @Composable SharedTransitionScope.(AnimatedVisibilityScope) -> Unit,
) {
    LocalSharedTransitionScope.current.content(LocalAnimatedVisibilityScope.current)
}

And then you just need to provide those two scopes in your RootScreen:

@OptIn(ExperimentalSharedTransitionApi::class, ExperimentalDecomposeApi::class)
@Composable
fun RootScreen(
    component: RootComponent,
    modifier: Modifier = Modifier,
) {
    SharedTransitionLayout(modifier = modifier) {
        ChildStack(stack = component.stack) {
            CompositionLocalProvider(
                LocalSharedTransitionScope provides this@SharedTransitionLayout,
                LocalAnimatedVisibilityScope provides this@ChildStack,
            ) {
                when (val child = it.instance) {
                    ...
                }
            }
        }
    }
}

Then in you child screen Composable:

@Composable
fun FinancesScreen(...) {
    SharedTransitionsScope {
        ...
    }
}

[arkivanov]

Yes. But if you have a fullcreen flow (like for example user registration), you can have a nested stack for such a flow, and so the root will be only aware of the flow parent component.

[chennemann]

that is true. Thanks again

[arkivanov]

Oh, you can also consider the so called Portal approach (I think it comes from the React world). See the snippet: https://gist.github.com/arkivanov/ffa8fa140ed94d3896a66a338c5a9200

[chennemann]

That is exactly what I was looking for.
That enables me to structure the code the way it is intuitive to me :)

One question regarding the configs. Do they have to be sealed classes?

Looking at your sample it might be possible to simply have a BottomSheetPortal, DialogPortal and/or ChildStackPortal where the respective components can register themselves with and the portal handles the dispatch logic accordingly.

Even if not that is an amazing suggestion. I'll try it as soon as possible :)

[arkivanov]

Most important requirements for configurations are described in the docs: here. Some navigation models add additional requirements, you can check corresponding docs as well. They don't have to be sealed classes. However, the idea is that you have one Portal per navigation model, e.g. one portal for stack. Then your parent component have to just provide that Portal once and then be almost never updated. So sealed classes come handy. Also, the ChildStack and Children Composable functions currently use the combination of the configuration class name and the hash code as a key for UI state restoration. So having separate configuration classes per child component dramatically reduces the chance of key clashing.